Objective
After completing this lesson, you will be able to Enable the flexible column layout on the UI for your app.
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 first configure different options for the flexible column layout. Then, you will check the results on the UI.
You have completed the exercise Adjust the Object Page of the Display Customers App in the unit Getting an Overview of SAP Fiori Tools (lesson: Creating a Second App using the Application Generator). Alternatively, you can check out its solution branch: configure-object-page-customer-app.
This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.
Open your project in SAP Business Application Studio.
Open the Page Map.
Right-click on travel_processor.
Select Show Page Map.
Configure the flexible column layout in the Page Map.
Select the Flexible Column Layout option.
Scroll down to Select Layout for 2 Columns and select Mid-Expanded.
In Select Layout for 3 Columns, select End-Expanded.
The flexible column layout is now enabled. Switch back to the app to see how it works.
Select Travel to navigate to its object page.
Note how the object page opens next to the list report on the same screen. As you've selected the Mid-Expanded layout, the object page is wider than the list report.
Select a Booking to navigate to its subobject page. The subobject page opens next to the object page. As you've selected the End-Expanded layout, the last column is wider than the first two columns.
In this lesson, you have learned how to enable and configure the flexible column layout.
Note
Log in to track your progress & complete quizzes