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:
{
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):
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.
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).
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:
Leave the option selected ("Based on a Transaction").
Select the Customer Transaction.
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:
Parm(CustomerId);
In this way, the filter is solved.
Since GeneXus 18 Upgrade 4 (GeneXus for SAP Systems - Fiori Horizon Pack).