Objective
In SAP Fiori elements, the flexible column layout allows you to view both the list report and the object page in the same screen, without navigating back and forth between them.
You can also display two object pages next to a list report. Each page is displayed in its own column, and you can adjust the column width if necessary.
The flexible column layout can be configured manually in the manifest.json file. You can also configure the layout using the Page Map.
In this exercise, you will enable the flexible column layout for your Manage Travels application.
You have completed the exercise Create the Manage Travels App in the unit Getting an Overview of SAP Fiori tools (lesson: Creating an SAP Fiori Elements App Using the Application Generator).
This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.
Open SAP Business Application Studio.
You have the EXPLORER tab open.
Right-click webapp from your travels project.
Select the Show Page Map option.
The SAP Fiori tools page map opens. You can configure different settings for your app using this tool.
Choose the Flexible Column Layout option from the right-hand side menu.
Select a layout from the following two options:
Offers a layout if a list report and an object page are opened.
Offers a layout if a list report, an object page, and a subobject page are opened.
Select the Mid-Expanded option from the 2 column layout.
Select the End-Expanded option from the 3 column layout.
You have now configured the Flexible Column Layout with Mid-Expanded for 2 column layout and End-Expanded for 3 column layout.
Switch to the app preview in your browser.
Select the Go option from your list report.
Select a travel. The object page for that travel opens. You can see that the object page opens next to the list report on the same screen.
Select the chevrons present between the list report and object page to expand either of them.
Select the Close option for the object page from the right-hand side.
You successfully configured the flexible column layout.
Log in to track your progress & complete quizzes