GeneXus for SAP Systems Fiori Pattern for Web

Official Content

Patterns allow us to empower applications by easily adding new features.

When we apply a pattern, GeneXus creates all the necessary objects to provide the desired behavior without the need for us to program them.

For example, let’s suppose that even though we have the Countries transaction to add, change and delete countries:

GeneXusForSAPSystems_ListAndReportPattern_Image2

We also want to have an attractive page to query countries and show all the existing countries, following the Fiori design style:

GeneXusForSAPSystems_ListAndReportPattern_Image3

It should allow us to filter by country name and many more options,

GeneXusForSAPSystems_ListAndReportPattern_Image4

and enable us to go to the Countries transaction to add a new country,

GeneXusForSAPSystems_ListAndReportPattern_Image5

change an existing country,

GeneXusForSAPSystems_ListAndReportPattern_Image6

or delete it:

GeneXusForSAPSystems_ListAndReportPattern_Image7

To quickly implement this, there is a pattern called “Genexus for SAP Systems Fiori Pattern for Web”, and we will see how to apply it to the Country transaction.

This pattern is available for web applications and for Smart Device applications (even though for Smart Device applications it is called “Work with for Smart Devices”, basically it is the same pattern). 

Look at the Patterns tab of the Country transaction. It offers two tabs: “Fiori" and “Work with for Smart Devices”, and the first time you will use the GeneXus Fiori Pattern in one KB, you will find the "Initialize Fiori" option that will import all the necesary to work with that pattern.

GeneXusForSAPSystems_ListAndReportPattern_Image81

you must select that link and GeneXus will start to import all the Fiori theme and floorplans:

GeneXusForSAPSystems_ListAndReportPattern_Image82

once that was finished, you must Select the floorplan to use and Apply this pattern on save

GeneXusForSAPSystems_ListAndReportPattern_Image83

the GeneXus Fiori pattern can be applied to a Transaction or a Web Panel, because in that case you are applying it to a Transaction, you can choose the following List floorplans, let use, in that case, the List Report:

GeneXusForSAPSystems_ListAndReportPattern_Image84

to finish that step we only need to select that tab and click on “Apply this pattern on save” and save.

GeneXusForSAPSystems_ListAndReportPattern_Image85

GeneXusForSAPSystems_ListAndReportPattern_Image9

Now, if we place the Country transaction here:

GeneXusForSAPSystems_ListAndReportPattern_Image10

we can see that below the transaction there are several objects, which were created by GeneXus when the pattern was applied. These objects will be implemented by the web screens of the pattern, which we will see next.

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

GeneXusForSAPSystems_ListAndReportPattern_Image11

Therefore, the Developer Menu will no longer be compiled and run, and this special object containing all the knowledge base objects that we apply the GeneXus Fiori Pattern 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 here in the FioriBaseObjects Module. 

GeneXusForSAPSystems_ListAndReportPattern_Image12

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

GeneXusForSAPSystems_ListAndReportPattern_Image13

We will also be able to create web panels through Web panel objects, as it was automatically done by GeneXus for this object. We will not talk about it in this course, but you can look for it in the GeneXus 15 Course (not specialized in SAP). What is described there applies to SAP. 

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

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:

GeneXusForSAPSystems_ListAndReportPattern_Image14

Here we see the List of the three existing countries:

GeneXusForSAPSystems_ListAndReportPattern_Image3

In it, we can perform operations such as the following:

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

GeneXusForSAPSystems_ListAndReportPattern_Image16

There, as we can see, we have the 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:

GeneXusForSAPSystems_ListAndReportPattern_Image17

We're also able to directly update a country's details.

GeneXusForSAPSystems_ListAndReportPattern_Image18
 
This screen belongs to the Country transaction, where the navigation buttons have been hidden because we're positioned in the selected country. 

Likewise, we can delete the country. Since it is calling the transaction in DELETE mode, and the country has related attractions (we've just seen them: the Louvre museum and the Eiffel tower), we're not allowed to delete it. If we tried to delete Brazil, which doesn't have any attractions recorded, we could do so simply by selecting Confirm… We cancel, so as not to delete it, and we're taken again to the list of countries.

We may also insert a new country... Here the transaction is also opened. 

Let's add the United States: 

GeneXusForSAPSystems_ListAndReportPattern_Image19

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

GeneXusForSAPSystems_ListAndReportPattern_Image20

save a specific User Filter, givin it a name

GeneXusForSAPSystems_ListAndReportPattern_Image201

and use one of the saved filter or the standar one

GeneXusForSAPSystems_ListAndReportPattern_Image202

We can also save one specific List Report Option as a Tile

GeneXusForSAPSystems_ListAndReportPattern_Image203

in order to have it in the Fiori Launchpad

GeneXusForSAPSystems_ListAndReportPattern_Image204

and customize the data grid as your desire, for example hide a column

GeneXusForSAPSystems_ListAndReportPattern_Image205

Here we return to the Home page, which is the launchpad:

GeneXusForSAPSystems_ListAndReportPattern_Image21

We easily applied the pattern to the Country transaction, and now we will apply it to the Attraction transaction. 

GeneXusForSAPSystems_ListAndReportPattern_Image22

We press F5. 

GeneXusForSAPSystems_ListAndReportPattern_Image23

Just like in the previous case, we're offered the tile to “work with attractions” with the number of attractions recorded… 

GeneXusForSAPSystems_ListAndReportPattern_Image24

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

GeneXusForSAPSystems_ListAndReportPattern_Image25

Here we have the same query features that we saw for “Work With Countries”... 

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

GeneXusForSAPSystems_ListAndReportPattern_Image26

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

GeneXusForSAPSystems_ListAndReportPattern_Image27

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

GeneXusForSAPSystems_ListAndReportPattern_Image28

The first one determines if the Objects List Report option will be included in the Launchpad as a Tile, the second one allows setting an icon. Here, the icon's code is set according to the Fiori design guidelines, the third 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 here or nothing) , Launchpad information is to modify the default description of the Tile and the last one is to choose in which order will be shown in the Launchpad:

GeneXusForSAPSystems_ListAndReportPattern_Image29

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.

In the Attraction pattern, we remove the number:

GeneXusForSAPSystems_ListAndReportPattern_Image30

We press F5...
At runtime, it looks like this:

GeneXusForSAPSystems_ListAndReportPattern_Image31

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

GeneXusForSAPSystems_ListAndReportPattern_Image32

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

GeneXusForSAPSystems_ListAndReportPattern_Image33

And press F5... 

GeneXusForSAPSystems_ListAndReportPattern_Image34

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

GeneXusForSAPSystems_ListAndReportPattern_Image35

but you can change it or add a new one: 

GeneXusForSAPSystems_ListAndReportPattern_Image36

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

GeneXusForSAPSystems_ListAndReportPattern_Image42

In this way, the DELETE column will be deleted:

GeneXusForSAPSystems_ListAndReportPattern_Image43

There are more customization options available that we would like you to explore.

Here we've only seen some of the List Report panel of Attractions, but we can also customize the panel that displays the details of the selected attraction:

GeneXusForSAPSystems_ListAndReportPattern_Image44

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

GeneXusForSAPSystems_ListAndReportPattern_Image45

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: GeneXusForSAPSystems_ListAndReportPattern_Image46

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: 

GeneXusForSAPSystems_ListAndReportPattern_Image47

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

Before leaving the web application, let's mention something important: the Launchpad only includes tiles for objects with the Fiori Pattern applied in the knowledge base. For example, in our case, we haven't applied the pattern to the Customer transaction, so we 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: 

GeneXusForSAPSystems_ListAndReportPattern_Image48

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).  We may even want some of the Fiori List Reports not to be displayed in 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. 

Let's add a tile to invoke the Customer transaction. To do so, we create a procedure: 

GeneXusForSAPSystems_ListAndReportPattern_Image49

We define the rule that allows indicating the parameters received and/or returned by the object: in this case, we will define an input/output variable that will assume the predefined structured data type ProgramNames (because we give it the same name as the data type). This data type allows recording the collection of programs to be invoked:

GeneXusForSAPSystems_ListAndReportPattern_Image50

As we can see, it is a collection of a simple structured data type corresponding to a tile's information. 

We also define an internal variable of the procedure for this data type: 

GeneXusForSAPSystems_ListAndReportPattern_Image51

In the procedure Source, we load the necessary elements of the tile we want to add... (Here, for the indicator of the number of customers we will use the same Count formula we've seen before. 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, we add this “tile” to the collection of ProgramNames: 

GeneXusForSAPSystems_ListAndReportPattern_Image52

Lastly, we will includ 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

F5.

GeneXusForSAPSystems_ListAndReportPattern_Image55

We see that the Customers tile is invoking the Customer transaction:

GeneXusForSAPSystems_ListAndReportPattern_Image56

In the next document, we will see what happens when the Smart Devices pattern is applied.

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.