Table of contents


Unofficial Content

GeneXus Fiori Pattern for Mobile

GeneXus Fiori Pattern también se encuentra disponible para implementar en aplicaciones mobile.
Fiori Mobile permite que la aplicación siga las guías de diseño Fiori, desarrollando para Smart Devices de manera multiplataforma y nativa para cada una de las mismas.

GeneXus Fiori SD Wizard

Para aplicar Fiori Mobile Pattern a la aplicación diríjase a Tools->Fiori->Mobile startup wizard.

Al seleccionar esta opción se mostrará un menú que lo guiará por los pasos necesarios para definir una app.

image_2019517113735_1_png

En el primer paso del wizard podemos observar varios campos a completar.

Name                        : Nombre del objeto Smart Device Panel (el cual será el menú principal de nuestra aplicación)

App title                     : Título de la aplicación.

App Identifier             : Identificador único de la aplicación para las App Stores.

Connectivity              : Indica si la aplicación requiere establecer una conexión a Internet (si la app será OffLine u OnLine).

Enable Notifications  : Establece si la aplicación envía notificaciones.

Set as start up object: Define si la aplicación mobile es nuestro objeto inicial. (En este caso marcaremos esta opción)

En Icon puede seleccionar la imagen que va a tener la aplicación como icono en el Smart Device.

En Splash Screen puede seleccionar la imagen que se va a mostrar durante la carga de la aplicación.

image_201951714442_1_png

Cuando termine de configurar el paso 1 haga click en ‘Next’.

En este paso del wizard se puede configurar si quiere que se incluya la página de launchpad por defecto, de la misma manera que se implementó para web panel. Si esta opción queda sin marcar se crea un objeto SDPanel vacío para personalizar a gusto.

Para esta Demo marque la opción ‘Include default Launchpad’

También puede configurar si la aplicación tiene un slide menu o no. En caso de elegir que tenga menú, hay disponibles varios tipos de templates para seleccionar.

image_20195171452_1_png

Una vez terminada la configuración, haga click en Next para avanzar al último paso del wizard.

En el último paso del wizard se da la opción de configurarle seguridad a la aplicación mobile.

Tenemos tres opciones:

- No aplicar ninguna configuración de seguridad a la aplicación.

- Aplicar Autenticación GeneXus Access Manager.

- Aplicar Autorización GeneXus Access Manager.

GeneXus Access Manager (GAM) es un módulo de seguridad basado en RBAC (Role Based Access Control)

En caso de aplicar un control de acceso podemos elegir el diseño de Login y la pantalla de Registro para nuevos usuarios.

image_201951714519_1_png

Para el ejemplo no se va a aplicar control de acceso, seleccione ‘None’ y luego haga click en Finish para terminar con el wizard de inicialización de Fiori para Mobile.

GeneXus comenzará a generar de manera automática los objetos para su aplicación Fiori Mobile. Una vez terminado el proceso se le notificará que el mismo fue exitoso.

image_201951714534_1_png

Puede observar que se ha creado un módulo nuevo llamado FioriMobileObjects. Este módulo contiene todos los objetos generados automáticamente para que la aplicación mobile utilice el pattern Fiori, permitiendo el desarrollo multiplataforma acorde a las guías de diseño de Fiori.

 

 

TIP: Notar que al agregar objetos para SmartDevices en la KB, GeneXus automaticamente crea un generador a tales efectos. En Preferences->.Net Environment->Generators->SmartDevices, puede ver este generador y configurar las propiedades para el mismo. Entre las más importantes, destacamos que se puede elegir para qué plataforma generará la app.

Por ejemplo Androis, iOS o ambas.

Si ejecuta la aplicación mobile en este punto, podrá ver un menú predeterminado, que muestra un diseño Fiori estándar a modo de ejemplo. (Main Programs/DemoCarPartsSD/ botón derecho->Run)

Para esta demo y a efectos de acelerar los tiempos de generación, seleccione: Preferences/.Net Environment/Generators/SmartDevices -> Properties/Generate iOS = False

image_201951714629_1_png

Esto se debe a que tiene que personalizar los objetos para que aparezcan en la aplicación.

A continuación se mostrará el paso a paso para personalizar los objetos para Mobile.

  

Product List

Procedamos a personalizar la visualización de la Transacción Product para Mobile.

Seleccione la Transacción ‘Product’ y haga click en el selector ‘Patterns’

image_2019517141838_1_png

Se mostrarán en pantalla los templates disponibles para aplicar a la Transacción.

Dentro de la categoría ‘List’ seleccione el template Cards background image.

image_2019517141853_1_png

Haga click en Select para configurar los atributos a mostrar en el template.

image_2019517141910_1_png

GeneXus infiere automáticamente los atributos acorde al tipo definido cuando se especificó la Transacción.

Presione ‘Continue’ para aplicar el template a la Transacción.

Observe que se ha generado automáticamente un nuevo objeto llamado ‘WorkWithDevicesProduct’

image_2019517141924_1_png

Para que esta visualización se incluya en el menú principal, fije la propiedad ‘Include in launchpad’ con el valor True.

Fije la propiedad ‘Include in slide menu’ con el valor true para que la visualización sea accesible desde el menú lateral.

Este tile se desea visualizar con una imagen de fondo, para eso configure la propiedad ‘Type’ con el valor Image.

Asigne a la propiedad ‘Size’ el valor TwoBlocks para mostrar un Tile de mayor tamaño en la aplicación.

En la propiedad ‘Image’ seleccione una imagen para asignarle al Tile.

Los template de Smart Devices contienen por defecto las operaciones de inserción, modificación y eliminación de los registros.

En este caso, los usuarios de la aplicación Smart Devices serán los clientes de la distribuidora de repuestos por lo cual, para proteger la información y garantizar la seguridad del sistema los usuarios solo podrán visualizar el catálogo de repuestos sin tener acceso a las operaciones de modificación de los registros.

En WorkWithDevicesProduct seleccione la visualización List y borre el botón Insert en Application Bar.  Seleccione el botón y presione la tecla Delete (Suprimir) para borrar el control.

image_2019517141941_1_png

De esta forma el usuario ya no podrá realizar operaciones de inserción sobre los Productos.

Ahora para restringir las operaciones de modificación y eliminación seleccione la visualización Detail y en la tab ‘Section (General)’ borre los botones ‘Update’ y ‘Delete’ seleccionandolos y presionando la tecla Delete (Suprimir)

Oculte el atributo ImageFeatureVector, seleccionando el atributo de la lista en el panel izquierdo y luego configure la propiedad ‘Visible’ en false.

image_2019517141953_1_png

El usuario que acceda a la visualización de los productos no podrá insertar, modificar ni eliminar registros.

Haga click en el Icono del Diskette image_201951714204_1_png

o presione Ctrl+S para salvar el progreso realizado.

Si ejecuta la aplicación para SmartDevices (botón derecho en el objeto mobile ‘DemoCarPartsSD’ y seleccionando Run) podrá visualizar el Tile de Product que se personalizó en los pasos anteriores.

En el slide menú contamos con las opciones de Home y Product.

Si hace click en la opción Product, podrá acceder a visualizar el listado viendo el floorplan seleccionado.

image_2019517142025_1_png  image_2019517142029_1_png  image_2019517142033_1_png

En esta imagen se ve que ya se han cargado registros para los productos, de no cargar registros Work With Products se verá vacío.

TIP: Al haber eliminado la posibilidad de ingresar/modificar/eliminar productos desde la aplicación mobile, esta tarea la podremos realizar desde el backend web. Por lo tanto, también en los objetos web que permiten trabajar con los productos, colocaremos el campo ProductFeatureVector no visible (ya que este será para un uso interno que veremos más adelante), mostrando el approach LowCode de GeneXus para realizar este tipo de tareas.

 Seleccione la solapa Transaction del Pattern aplicado a Product y para el atributo     ProductFeatureVector configure la propiedad ‘Visible’ a False.

image_201951721447_1_png

 Esto hará que el atributo ProductFeatureVector no se muestre cuando se desea crear un nuevo   registro. El atributo es utilizado para almacenar el Vector de características obtenido del   procesamiento de clasificación de imágenes de SAP Leonardo.

 Haremos lo mismo en el objeto ‘Prompt’ fijando la propiedad ‘Visible’ a False para el atributo   ProductFeatureVector.

image_201951721514_1_png

 

Sales Order

Ahora verá cómo crear el Tile de Sales Order.

Esta opción le permitirá al usuario solicitar un repuesto. En este caso se interpreta como un pedido directo a la distribuidora de partes, por lo que se debe ingresar una orden de venta.

En esta opción se incluye la conexión con el ERP de SAP (para ingresar el pedido de venta) y el uso de servicios de inteligencia artificial de SAP Leonardo (para el reconocimiento y clasificación de la imagen).

De momento comenzaremos con la creación de un Panel for Smart Devices llamado ‘SOCreate’

Este panel será accesible desde el menú principal como un Tile y permitirá al usuario dar de alta una SalesOrder.

Abra la transacción SalesOrder y en la solapa Patterns seleccione Work With for Smart Devices.

Seleccione List, el Template Title and Subtitle y haga click en Select para configurar los atributos a mostrar en el template.

image_20195172199_1_png

GeneXus por defecto, propondrá los campos mostrados en la imagen superior, pero debido a que en la realidad de nuestra aplicación, los pedidos en cada Smart Device serán del Cliente dueño del dispositivo, es más relevante mostrar en esta lista de pedidos la fecha y el producto pedido.

Por lo tanto modificar el Title y Subtitle, eligiendo los campos SalesOrderDate y ProductDesc respectivamente. Oprima Continue para finalizar.

El objeto creado será accesible desde el menú principal (launchpad) de la aplicación para Smart Devices, ya que por defecto el valor de la propiedad ‘Include in launchpad’ es True.

Haga click en la solapa del objeto WorkWithDevicesSalesOrder y fije el valor de la propiedad ‘Include in slide menu’ en True, así el panel queda también disponible para ser accedido desde el menú lateral.

La propiedad ‘Title’ hereda el nombre de la transacción sobre la que se aplicó el pattern, por lo tanto sera SalesOrder, agregue un espacio de forma que quede Sales Order y la propiedad ‘Information’ cambiela por Create, así describe la funcionalidad del Tile.

Para acceder a las propiedades del objeto, basta con hacer click sobre la solapa del mismo (donde se ve el icono del objeto y su nombre).

image_201951721929_1_png

Personalicemos algunos aspectos de los objetos creados por default por GeneXus.

Se desea que la fecha que se muestre por defecto sea la actual, para esto basta con agregar en la transacción SalesOrder, una Regla default. Seleccione la transacción SalesOrder, la solapa Rules y agregue la regla: default(SalesOrderDate, &Today);

TIP: La variable &Today siempre hace referencia a la fecha actual. Las reglas se pueden condicionar para que apliquen solamente en la ejecución Web o para los Business Component. En este caso como no la condicionamos, aplicará siempre que se quiera ingresar una Sales Order, tanto sea por web, SD.


También queremos mejorar el aspecto del formulario de visualización/creación de una Sales Order.

Para esto seleccionamos en objeto WorkWithDevicesSalesOrder/FioriMobile/Detail/Section (General).
Los cambios que siguen los debe realizar tanto para la sección View como para la sección Edit del objeto.

image_2019517211012_1_png

Para el CustomerId, seleccionaremos un Control de tipo Dynamic Combo Box, con esto GeneXus diseña, para el ingreso de este campo, un control de tipo Combo Box, cuyos valores los toma de la tabla de Customers. Hay que indicar por lo tanto en las propiedades del atributo CustomerId las propiedades Control Type = Dynamic Combo Box e Item Description = CustomerName.

image_2019517211030_1_png

De esta forma, el campo CustomerName deja de ser necesario ya que lo veremos en el Dynamic Combo Box. Por lo tanto, nos posicionamos sobre este atributo y lo eliminamos del form, posicionándonos sobre él y oprimiendo la tecla delete.

image_2019517211047_1_png

TIP: Como comentamos, en la implementación real de este escenario, no sería necesario seleccionar el Customer, ya que este se tomaría de forma automática de quien se logueo en la aplicación Mobile.  Así como también la tabla de Customers se leería de SAP ERP.

En este caso precargamos los datos con el Customer "0000001000" / "Charlie's Garage", esto es en virtud que dicho Customer existe en el SAP ERP utilizado para la POC, parametrizado de tal forma que permite crear pedidos de venta.

Para el campo ProductId, con el fin de mostrar otra forma de Input Type que permite GeneXus, seleccionaremos para este campo las siguientes propiedades:
Input Type = Descriptions
Suggest = Incremental
Item Description = ProductDesc
Filter Operator = Contains

Y eliminamos del Panel, el campo ProductDesc.

image_2019517211141_1_png

De esta forma, al momento del ingreso de datos, el usuario selecciona el ProductId en base a la descripción del producto. Esta descripción es sugerida por el sistema a medida que el usuario ingresa el texto de la misma.

Para el campo SalesOrderSAPNumber, debido a que más adelante en la aplicación, será completado automáticamente con el número de Sales Order devuelto por SAP ERP, en la sección Edit, coloquele la propiedad Read Only en true.

Si ejecuta la aplicación para Smart Devices y accede al Tile de SalesOrder Create verá el resultado del diseño realizado en los pasos anteriores.

image_2019517211156_1_png

Hasta el momento ha creado los componentes Web y Smart Devices de la aplicación. Se puede decir que el módulo web aplica a la gestión y el uso de la distribuidora de repuestos (back end), mientras que el módulo Smart Devices está dirigida a los clientes, es decir, los talleres que realizan pedidos de partes.

En cuanto al panel mobile que permite al taller (cliente de la distribuidora de repuestos), ingresar los datos del pedido a realizar, estos quedan registrados en las tablas del sistema desarrollado en GeneXus (redundancia controlada). Resta por implementar el envío de la misma a SAP ERP, a modo de crear una Sales Orden en el módulo Sales and Distribution.

Para cubrir este punto se detalla a continuación la integración que ofrece GeneXus for SAP Systems con sistemas SAP ERP mediante la feature SAP ERP Connector.

 REF: DemoCarPartsXpz3All.xpz 
 Contenido: Toda la KB hasta aquí

 
Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant