Official Content

When applying the Fiori for Web Pattern using the Fiori Horizon Design System, Grids allow expanding or collapsing each line to show more or fewer data.


Consider a Transaction object called Customer that is 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

First, select the CustomerAddress, CustomerPhone, and CustomerEmail attributes and set their Visible property to False (because the idea isn't to show these attributes in the Grid lines but when expanding a line).

Next, right-click on the Grid node, and in the contextual menu select Add > Standard Action. From the new Standard Action, select the ExpandGridLine event for the Name property.

For the GXObject property, enter the name of a Web Component object (that you must have previously defined) which will display the data you want to show when pressing the selector to expand a line.

GeneXus for SAP Systems-Expanding/collapsing data in lines of a Grid-Properties

Finally, add the parameter to be sent to the Web Component. To do so, right-click on the Standard Action(ExpandGridLine) node and select Add > Parameters. Then, right-click on the Parameters node and select Add > Parameter. Complete the Name property with the parameter to be sent (CustomerId).

GeneXusforSAPSystems-Expanding/collapsing data in lines-StandarActionParameter

Web Component definition guides

After creating the Web Component object, go to its Patterns tab and select the Fiori for Web tab.

Select the "Apply this pattern on save" checkbox and save.

Click on the "Select floorplan…" link.

Select the List For Grid Expanded Line option under the List floorplans node.

The following options are displayed:

GeneXusforSAPSystems-Expanding/collapsing data in lines-FloorplanAppliedToWebComponentOptions

Leave the option selected ("Based on a Transaction").

Select the Customer Transaction.

GeneXusforSAPSystems-Expanding/collapsing data in lines- selecting attributes in WC

Select the CustomerId, CustomerName, and CustomerLastName attributes and set their Visible property to False (because the idea is not to show them when expanding a line).

Note that a grid was automatically added when the floorplan based on a Transaction was applied. The objective is to display additional information about only one customer, so a filter is needed. Remember that this Web Component is called from a Grid Line with the CustomerId parameter. Therefore, in the Web Component Rules section you have to define the following:


In this way, the filter is solved.

Runtime screenshot

GeneXusforSAPSystems-Expandingcollapsing data in lines- example in runtime v18u4


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


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