GeneXus for SAP Systems Car Parts: GeneXus Fiori Pattern for Web

Unofficial Content

GeneXus Fiori Pattern for Web

La posibilidad de usar Fiori Pattern en su desarrollo, sea para Web o para Smart Devices, es una de las características principales de GeneXus for SAP Systems.

Permite brindar una experiencia de usuario mejorada para la aplicación, siguiendo los lineamientos establecidos por el Design System SAP Fiori.

Seleccione la Transacción Product y diríjase al selector ‘Pattern’. Haga click en ‘Initialize Fiori’ para comenzar a importar los módulos.

image_201951711185_1_png

image_2019517111816_1_png

Una vez completada la importación, podemos observar un nuevo módulo en la KB llamado ‘FioriBaseObjects’ que contiene todos los objetos del pattern Fiori.

image_2019517111832_1_png

Automáticamente se crea un objeto Web Panel llamado FioriLaunchpad, definido como Startup Object de la KB. Por defecto una vez aplicado el pattern FioriLaunchpad será el menú principal.

Una vez inicializado Fiori, podremos aplicar Fiori Pattern a cada Transacción y seleccionar uno de los Floorplans disponibles que mejor se ajuste para la experiencia de usuario que se busca entregar.

 

TIP: Ver documentación

GeneXus Patterns

 

TIP: Ver documentación

GeneXus Fiori Patterns

 

Luego de inicializar el pattern Fiori, en la Transacción Product,  dentro del selector ‘Patterns’, haga click en Select Floorplan.

Aquí puede  ver los distintos tipos de diseños que ofrece Fiori para una Transacción.

Seleccione ‘Split Screen Master List’

image_201951711246_1_png

Una vez seleccionado el floorplan  ‘Split Screen Master List’ se puede observar que la visualización del selector Pattern para la Transacción ‘Product’ cambia mostrando dos paneles.

image_2019517112557_1_png

El panel izquierdo muestra los componentes de cada objeto generado automáticamente por el Pattern Fiori de GeneXus.

Los componentes que contiene un objeto pueden ser modificados por el desarrollador para lograr una visualización que se ajuste a las necesidades del usuario. GeneXus define automáticamente los atributos descritos en la estructura de la Transacción como componentes.

El panel derecho, muestra de forma responsive una previsualización del objeto conteniendo los componentes definidos en el panel izquierdo.

TIP: Note que dependiendo del tamaño de la previsualización pueden visualizarse o no los distintos componentes. Verifique en la propiedad ‘Visible’ del componente, su valor para el tamaño seleccionado.


Haga click en el Icono del Disketteimage_2019517112640_1_pngo presione Ctrl+S para salvar los cambios realizados.


Aplicar el procedimiento anterior sobre las Transacciones Customer y SalesOrder , pero en este caso seleccionando el Floorplan ‘ListReport’.

En este punto ejecute la aplicación.image_201951711277_1_png(Run - F5).

TIP: En este caso la KB fue creada para un ambiente .Net, por defecto el DBMS utilizado por GeneXus es SQLServer (ambas opciones pueden ser cambiadas por el developer o incluso crear Environments paralelos con otras opciones).

Las propiedades del Server SQL a ser utilizado se configuran en el Data Store, pero al ejecutar (F5) por primera vez, GeneXus al no tener los datos de configuración del Data Store, presentará un diálogo para configurar estos valores.


Utilizar los siguientes valores:

image_2019517112740_1_png

GeneXus luego de crear la DB, generar los programas necesarios para crear las tablas y ejecutarlos, específica y crea todos los programas de la aplicación y ejecuta el Startup Object, la aplicación ejecutada tendrá la siguiente apariencia.

image_201951711280_1_png

Se puede observar que la página de inicio (Fiori Launchpad) contiene los Tiles (nombre utilizado en SAP para denotar las opciones en el menú). Fiori Launchpad se presenta como un dashboard donde la información importante se visualiza rápidamente, para ayudar a la toma de decisiones estratégicas y operativas.

Cada Tile se puede personalizar a la medida de las necesidades del usuario, para proveer la mejor experiencia.

Se puede modificar su tamaño, información, iconos, agregar KPIs o incluso web components.

Al hacer click en un tile, se accede a la página (objeto) llamada por este.

image_2019517112814_1_png

En el caso de Customer, se accede al objeto principal correspondiente al floorplan ListReport,  donde se listan los clientes existentes, permitiendo realizar operación de altas, bajas y modificaciones de los registros.

Ahora vamos a proceder a personalizar el Fiori Launchpad de forma de presentar una visualización a medida para el caso, mostrando el potencial que GeneXus brinda para una personalización acorde a los requerimientos del usuario.

En este caso el menú tendrá la siguiente personalización:

- El Tile de Customer incluirá una gráfica de barras indicando los 3 clientes con mayor cantidad de pedidos.

- El Tile de Product tendrá un tamaño mayor y contendrá una imagen de fondo.

- El Tile de SalesOrder tendrá un icono representativo y un contador para poder visualizar la cantidad de Órdenes de Ventas registrados en el sistema.

Tile de Customer

El Tile de customer incluye un web component con una gráfica que muestra los 3 clientes con la mayor cantidad de órdenes de venta.

Debemos crear un objeto de tipo Query, que podemos encontrar en la categoría Reporting.

Para crear un nuevo objeto hacer click derecho en Root Module y New->Object, o presionando Ctrl+N.

image_2019517112856_1_png

Nombre el objeto Query como ‘SalesByCustomer’

Una vez seleccionado Create, veremos el objeto Query vacío.

image_2019517112937_1_png

Agregue los siguientes atributos a mostrar en el objeto Query:

CustomerName – Para mostrar el Nombre del cliente.

Sum(SalesOrderProductQty) – Para mostrar la cantidad de productos pedidos por dicho cliente. Ingresando esta línea se creará una fórmula que suma la cantidad de productos de todas las sales orders de dicho cliente. La información se infiere automáticamente por GeneXus.

En el atributo Sum(SalesOrderProductQty), fije la propiedad Description con el valor ‘Total Sales’

Configure las propiedades Type con el valor ‘Chart’ y Chart type con el valor ‘Stacked Bar’.

image_2019517113011_1_png

Una vez ingresado los datos a mostrar en el objeto Query y configurar sus propiedades debería quedar de la siguiente manera.

image_2019517113025_1_png

Haga click en el Icono del Diskette image_2019517113037_1_pngo presione Ctrl+S para salvar los cambios realizados.

 

Cree un nuevo objeto GeneXus de tipo Web Component.

Haga click derecho en Root Module y seleccione New->Object.

Este objeto hará referenciar al objeto Query para ser incluido en el Tile.

image_2019517113053_1_png

Una vez creado el Web Component debe agregar un componente QueryViewer del panel de Toolbox.

Seleccione el componente Query Viewer y arrástrelo al Web Component.

image_2019517113114_1_png

Fije en las propiedades del componente Query Viewer los siguientes valores.

image_2019517113125_1_png

En la categoría ‘Data Bindings’, seleccione en la propiedad Object el objeto Query ‘SalesByCustomer’

Configure las propiedades de ‘Width’ 350px y ‘Height’ 135px, este es el tamaño que tendrá el componente dentro del tile.

Haga click en el Icono del Disketteimage_2019517113135_1_pngo presione Ctrl+S para salvar los cambios realizados.


Para referenciar en el Tile de Customer al web component ‘WCSalesByCustomer’ que contiene la gráfica, seleccione la Transacción Customer y navegue a las propiedades del objeto ListReport.

En la categoría Launchpad modifique las siguientes propiedades

Fije Tile Type como ‘Web Component’

Seleccione en Tile Web Component ‘WCSalesByCustomer’ 

Configure Tile Size con el valor ‘2 blocks’ para que el tile de Customer se visualice más grande.

image_201951711326_1_png

Haga click en el Icono del Disketteimage_2019517113135_1_pngo presione Ctrl+S para salvar los cambios realizados.

 

 REF: DemoCarPartsXpz2.xpz
 Contenido: Query, ImagenRepuestos, WebComponent y SDTQueryViewer

 

Tile de Product

Para personalizar el Tile Product debe ir a la Transacción, seleccionar pattern y modificar las siguientes propiedades en el objeto Split Screen Master List.

Cambie la propiedad Tile Type al valor ‘Image’

En Tile Image elija la imagen que desea cargar, puede ser de un archivo local o desde una imagen disponible en la web.

Fije Tile Size con el valor ‘2 blocks’ para que el tile Product destaque por su tamaño.

image_2019517113419_1_png

Haga click en el Icono del Disketteimage_2019517113135_1_pngo presione Ctrl+S para salvar los cambios realizados.

Tile de Sales Order

La personalización del Tile de SalesOrder es más sencilla y se realiza de la siguiente manera.

Se desea modificar el icono que por defecto coloca GeneXus en el tile correspondiente a la opción, por uno más específico.

Seleccione en la Transacción SalesOrder, el objeto List Report dentro de Patterns.

Asigne el valor ‘’ en la propiedad Tile Icon Unicode.

El Unicode  corresponde al siguiente icono. image_2019517113454_1_png

Para ver todos los iconos disponibles, haga click aquí

image_2019517113511_1_png

La propiedad Tile Order Index indica en qué posición se muestra el Tile dentro del menú. Por defecto la propiedad Tile Order Index tiene el valor ‘0’, posicionando los Tiles según el orden en que se crearon las Transacciones que se muestran como Tiles.

Para esta aplicación el orden de los Tiles es el siguiente:

Product->Customer->SalesOrder

Para lograr esta visualización es necesario fijar las siguientes propiedades:

Product Tile Order Index = 0

Customer Tile Order Index = 1

SalesOrder Tile Order Index = 2

Una vez terminada la personalización de los Tiles, podremos ver el cambio en la visualización del menú principal al ejecutar la aplicación. (seleccione Rebuild All y luego F5)

Así luce una aplicación que implementa Fiori Web Pattern mostrando su potencial de personalización y la visualización que otorga al usuario para poder obtener información rápidamente.

image_2019517113539_1_png

Para esta imagen ya se han agregado productos, clientes y Sales Orders. En caso de no haber ingresado datos, la gráfica de Customer estará vacía.

TIP: Las barras de la gráfica se ven todas del mismo color, si se quiere una barra de cada color o personalizada, se puede utilizar, en el objeto Query, la property Conditonal Styles, para el campo Sum(SalesOrderProductQty) con el valor, p.e., {"Operator":"EQ","Value1":"1","Style":"color:red"}

 

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