HowTo: Group grid columns with a title with Fiori Pattern

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.

Sample

Consider a Transaction object called Customer defined as follows:

{
    CustomerId*
    CustomerName
    CustomerLastName
    CustomerAddress
    CustomerPhone
    CustomerEmail
}    

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

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"”:

Save the changes (Ctrl + S).

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

Save the changes and run (F5).

The result will look as follows:

Availability

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