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:
We also want to have an attractive page to query countries and show all the existing countries, following the Fiori design style:
It should allow us to filter by country name and many more options,
and enable us to go to the Countries transaction to add a new country,
change an existing country,
or delete it:
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 necessary to work with that pattern.
Note: By default, the pattern Fiori 3.0 will be initialized. 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
you must select that link and GeneXus will start to import all the Fiori theme and floorplans:
once that was finished, you must Select the floorplan to use and Apply this pattern on save
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:
to finish that step we only need to select that tab and click on “Apply this pattern on save” and save.
Now, if we place the Country transaction here:
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.
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.
It is of “Web Panel” type; that is to say, it implements a web screen.
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:
Here we see the List of the three existing countries:
In it, we can perform operations such as the following:
View the entire details of a country, such as France:
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:
We're also able to directly update a country's details.
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:
We can run filters over the countries displayed, by name:
save a specific User Filter, givin it a name
and use one of the saved filter or the standar one
We can also save one specific List Report Option as a Tile
in order to have it in the Fiori Launchpad
and customize the data grid as your desire, for example hide a column
Here we return to the Home page, which is the launchpad:
We easily applied the pattern to the Country transaction, and now we will apply it to the Attraction transaction.
We press F5.
Just like in the previous case, we're offered the tile to “work with attractions” with the number of attractions recorded…
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:
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:
So far, we had only selected “Apply this pattern on save” without paying attention to this tree of configurable values:
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:
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:
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:
We press F5...
At runtime, it looks like this:
In addition, suppose that we don't want the Attractions List Report to show the country identifier or the category identifier:
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):
And press F5...
Looking at the Header Content in the Attraction Fiori pattern/List Report tab, you can see all the automatically created filters:
but you can change it or add a new one:
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):
In this way, the DELETE column will be deleted:
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:
This panel's definitions are located under the Object Page tab and two subtabs, Object Page and General:
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: 
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:
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:
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:
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:
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:
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:
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).
F5.
We see that the Customers tile is invoking the Customer transaction:
In the next document, we will see what happens when the Smart Devices pattern is applied.
|