GeneXus for SAP Systems Fiori Pattern for Web

Official Content
This documentation is valid for:

Patterns empower applications by easily adding new features.

When a pattern is applied, GeneXus creates all the necessary objects to provide the desired behavior without the need of programming them.

For example, suppose that even though you have the Countries Transaction to add, change and delete countries:

GeneXus for SAP Systems Fiori Pattern - Transaction -v18

Following the Fiori design style, you can also have an attractive page to show all the existing countries and query them:

image_20221122154857_1_png

It will filter data by country name and many other options,

image_2022112216439_1_png

enabling you to go to the Countries Transaction to add a new country, change an existing one, or delete it:

image_2022112216745_1_png

To quickly implement this, there is a pattern called “Fiori for Web”, and it will be applied to the Country Transaction.

This pattern is available for Web and for Native Mobile applications.

Look at the Patterns tab of the Country Transaction. If this is the first time you use the GeneXus Fiori Pattern in a Knowledge Base, you need to select the "Initialize Fiori" option, which will import everything that is necessary to work with that pattern.

Note: To use the pattern Fiori 3.0, first you need to initialize the pattern resources, else press the option Initialize Fiori. If you want to convert from the 2.0 version, read How to convert your Knowledge Base from Fiori 2.0 to Fiori 3.0

To apply the pattern in the Transaction, select the floorplan to use and Apply this pattern on save

image_20221122153454_1_png

the GeneXus Fiori pattern can be applied to a Transaction or a Web Panel. In this case, you are applying it to a Transaction. You can choose from the following List floorplans. Use the List Report:

image_20221122153545_1_png

To finish that step, select that tab, click on “Apply this pattern on save” and save. image_2022112215379_1_png

Now, if the Country Transaction is placed here:

image_20221122153822_1_png

there are several objects below the Transaction, which were created by GeneXus when the pattern was applied. These objects will be implemented by the web screens of the pattern.

Before pressing Build All, note that GeneXus has configured the FioriLaunchpad object as Startup object. 

image_20221122154143_1_png

Therefore, this special object containing the references to all the Knowledge Base objects that the GeneXus Fiori Pattern is applied to, will be compiled and run instead.

This Fiori Launchpad object (another object belonging to GeneXus Fiori Pattern) is a GeneXus object that was automatically created and can be found in the FioriBaseObjects Module. 

image_20221122154252_1_png

It is of “Web Panel” type; that is to say, it implements a web screen.

image_2022112215448_1_png

You can also create Web Panels through Web Panel objects, as it was automatically done by GeneXus for this object. You can look for it in the GeneXus Course, as this topic will not be tackled in this article.

Now, press F5 to view everything that has been automatically generated by applying the pattern at runtime.

The Launchpad with Fiori design is displayed in the browser, offering a tile with a link to work with countries. In addition, it shows the number of registered countries:

image_20221122154757_1_png

Here there's the List of the three existing countries:

image_20221122154857_1_png

operations such as the following can be performed in it:

View the entire details of a country, such as France:

image_20221122154921_1_png

There's a General tab that shows general information about the country and buttons to Update that information or Delete the country. Also, there is an Attraction tab that will show all the attractions recorded for the country being displayed:

image_20221122162226_1_png

You can also update a country's details direclty.

image_20221122162314_1_png
 
This screen belongs to the Country Transaction, where the navigation buttons have been hidden because you're positioned in the selected country. 

Likewise, the country can be deleted. Since it is calling the Transaction object in DELETE mode and the country has related attractions (the Louvre museum and the Eiffel tower), deleting it is not allowed. If you tried to delete Brazil, which doesn't have any attractions recorded, you could do so by simply selecting Confirm. Press CANCEL, so as not to delete it and you're taken to the list of countries again.

You may also insert a new country. Here the Transaction object is also opened. 

Add the United States: 

image_20221122162558_1_png

You can run filters over the countries displayed, by name: 

image_2022112412384_1_png

save a specific User Filter, giving it a name

image_2022112412400_1_png

and use one of the saved filters or the standar ones

image_20221124124028_1_png

You can also save a specific List Report Option as a Tile

image_20221124124322_1_png

in order to have it in the Fiori Launchpad

image_20221124124353_1_png

and customize the data grid as you wish, for example hide a column:

image_2022112412466_1_png

The pattern was easily applied to the Country Transaction, and now you need to apply it to the Attraction Transaction. 

image_20221124125042_1_png

Press F5. 

image_20221124125232_1_png

Just like in the previous case, you are offered the tile to “Work With Attractions” with the number of attractions recorded.

image_2022112412532_1_png

Again, if the screen size is changed, the information displayed is adjusted. In this case, instead of showing all the Attraction attributes, only the name is displayed:

image_20221124125339_1_png

These are the same query features shown for “Work With Countries”.

What is displayed and the behavior of all these screens can be customized. For example, suppose you don't want the indicator of the number of attractions to be displayed in the Launchpad, and in the tile corresponding to the countries, you want to show another icon that represents them, here: 

image_20221124125529_1_png

So far, you have only selected “Apply this pattern on save” without paying attention to this tree of configurable values:

image_20221124125751_1_png

Everything you see at runtime is determined here. For example, by clicking on the root you will see the properties of the pattern applied to this Country Transaction:

image_202211241313_1_png

The first one determines if the Objects List Report option will be included in the Launchpad as a Tile, the fourth one sets an icon. Here, the icon's code is set according to the Fiori design guidelines, the fifth one is to specify whether an Indicator will be included in the Tile (<default> is a count of the base table, but you can indicate a formula or nothing here) , Tile information is to modify the default description of the Tile and the Order index is to choose in which order it will be shown in the Launchpad:

image_2022112413553_1_png

Note: That icon is based on the SAP Font and what is set, is a specific character of that font so that at run-time the corresponding icon is shown.

Remove the number in the Attraction pattern:

image_2022112413749_1_png

Press F5. At runtime, it looks like this:

image_2022112413939_1_png

In addition, suppose that you don't want the Attractions List Report to show the country identifier or the category identifier:

image_20221124131133_1_png

To do so, open the List Report node and under the Attributes subnode you will find all the attributes displayed in the form when the screen size allows it. Delete those you don't want to see (or set the property Visible to False):

image_20221124131529_1_png

And press F5.

image_20221124131634_1_png

Looking at the Header Content in the Attraction Fiori pattern/List Report tab, you can see all the automatically created filters:

image_2022112413215_1_png

but you can change it or add a new one: 

image_20221124132151_1_png

You may also want to disable some or all the Insert, Update and Delete actions for this Panel. To do so, go to the List Report/TableGrid node and change the value of the corresponding property (include action in this case): 

image_20221124132442_1_png

In this way, the DELETE column will be deleted:

image_20221124132556_1_png

There are more customization options available that are worth exploring.

Here you have only seen some of the List Report Panel of Attractions, but the Panel that displays the details of the selected attraction can also be customized:

image_20221124132644_1_png

This Panel's definitions are located under the Object Page tab and two subtabs, Object Page and General: 

image_20221124143231_1_png

In this case, there is a single subtab called General, because an attraction doesn't have any more related information.

However, note what happens for a country: 

image_20221124143334_1_png

It has a tab for the country's general information, and another tab to show the related attractions. 

In GeneXus, the tree includes both tabs: 

image_20221124143514_1_png

This is only part of what can be easily achieved. Next, you will see the equivalent pattern for the native app in a mobile environment.

Before leaving the web application, note something important: the Launchpad only includes tiles for objects with the Fiori Pattern applied in the Knowledge Base. For example, in this case, you haven't applied the pattern to the Customer Transaction, so you can't invoke it from the Launchpad. There is an object in the Knowledge Base, generated automatically  –the Procedure called ListFioriPrograms– which obtains the collection of programs to be included in the Launchpad: 

image_20221124143743_1_png

When the pattern Fiori List Report for Web is applied to a new Transaction, this Procedure is modified to include a tile with the new pattern.

Since the launchpad will be the main object of the web application, it will surely require tiles to invoke other objects, in addition to those listed (for example, Web Panels created by the developer).  You may even want some of the Fiori List Reports not to be displayed on the launchpad.

The developer can easily achieve it by creating an object of Procedure type that receives a parameter the list of programs created by ListFioriPrograms, and handles it according to the launchpad's requirements. For example, it may delete some of the programs (tiles) or insert new ones. 

Add a tile to invoke the Customer Transaction. To do so, create a Procedure: 

image_20221124144327_1_png

Define the rule that indicates the parameters received and/or returned by the object. In this case, define an input/output variable that will assume the predefined structured data type ProgramNames (because the same name as the data type is given). This data type allows recording the collection of programs to be invoked:

image_20221124144254_1_png

As you can see, it is a collection of a simple Structured Data Type corresponding to a tile's information. 

An internal variable of the Procedure for this data type also needs to be defined: 

GeneXusForSAPSystems_ListAndReportPattern_Image51

Load the necessary elements of the tile you want to add in the Procedure Source. Here, for the number of customers indicator, the same Count formula is to be used again. However, note that this time it is a local or inline formula; that is to say, it is not associated with an attribute, and it is only triggered in this Procedure when this statement is run).

Next, add this “tile” to the collection of ProgramNames: 

GeneXusForSAPSystems_ListAndReportPattern_Image52

Lastly, include a call to that Procedure (ListFioriProgramsUsr) in the Procedure generated for the Pattern (ListFioriProgram), at the end of the source (outside the /* Generated by GeneXus Fiori Pattern Start - Do not change */ - /* Generated by GeneXus Fiori Pattern End - Do not change */ comments).  

GeneXusForSAPSystems_ListAndReportPattern_Image54

Press F5.

image_20221124145410_1_png

The Customers tile is invoking the Customer Transaction:

image_20221124145440_1_png

In the next document, you will see what happens when the mobile pattern is applied.