Official Content

When applying the Fiori for Web Pattern using the Fiori Horizon Design System, it is possible to select a set of attributes and/or variables (adjacent in a Grid) to group them and show a title that describes or categorizes those columns. The same can be done with several groups.

To achieve this, set the Title Header property with the desired title. This will show the title of the header above the titles of the fields belonging to the group.


Consider a Transaction object called Customer defined as follows:


Follow all the steps in Apply the Fiori for Web pattern for the first time.

After selecting Initialize Fiori Horizon, the checkbox "Apply this pattern on save", and the List Report floorplan, you will see the "List Report" tab (that corresponds to a Web Panel object):

Fiori for web pattern - List Report tab - v18u4

Under the Grid node, select CustomerId, CustomerName, and CustomerLastName. Go to the Properties window and find the Title Header property. Complete this property with the title you want to show above the grouped attributes. In this case, the title entered is "Customer Information"”:

Fiori for web pattern - show title header property v18u4

Save the changes (Ctrl + S).

Next, select the CustomerAddress, CustomerPhone, and CustomerEmail attributes and complete the Title Header property with "Customer Additional information":

Fiori for web Pattern - Tile header property - Second title, v18u4

Save the changes and run (F5).

The result will look as follows:

Fiori for web pattern - new feature - Grouping grid columns with a title v18u4 example


Since GeneXus 18 Upgrade 4 (GeneXus for SAP Systems - Fiori Horizon Pack).


Last update: November 2023 | © GeneXus. All rights reserved. GeneXus Powered by Globant