Getting an Overview of SAP Fiori Elements for OData V4
Getting an Overview of SAP Fiori Tools
Understanding SAP Fiori Elements Templates
Configuring the General Features of List Reports and Object Pages
Configuring the List Report Filter Bar
Examining Actions Available on the List Report
Configuring the Content of Table Columns
Using Multiple Views in the List Report
Shaping the Header Area of the Object Page
Configuring the Body of the Object Page
Applying Dynamic Field Control and Validating User Input on the Object Page
Discovering the Flexibility of the Programming Model for SAP Fiori Elements for OData V4
Illustrating the Navigation Concept in SAP Fiori Elements for OData V4
Discovering the Analytical List Page

Configuring the Flexible Column Layout

Objective

After completing this lesson, you will be able to enable the flexible column layout on the UI for your app.

The Flexible Column Layout

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.

TwoColumnsBeginExpanded option of the flexible column layout

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.

ThreeColumnsMidExpanded option of the flexible column layout

The flexible column layout can be configured manually in the manifest.json file. You can also configure the layout using the Page Map. For more information, please refer to the SAP Fiori elements documentation: Enabling the Flexible Column Layout

Enable the Flexible Column Layout

In this exercise, you will first configure different options for the flexible column layout. Then, you will check the results on the UI.

Prerequisites

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.

Watch the Simulation and Perform the Steps

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.

ExerciseStart Exercise

Steps

  1. Open your project in SAP Business Application Studio.

  2. Open the Page Map.

    1. Right-click on travel_processor.

    2. Select Show Page Map.

  3. Configure the flexible column layout in the Page Map.

    1. Select the Flexible Column Layout option.

    2. Scroll down to Select Layout for 2 Columns and select Mid-Expanded.

    3. In Select Layout for 3 Columns, select End-Expanded.

  4. The flexible column layout is now enabled. Switch back to the app to see how it works.

    1. Select Travel to navigate to its object page.

    2. 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.

    3. 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.

Result

In this lesson, you have learned how to enable and configure the flexible column layout.

Note

Learning

SAP FacebookSAP YoutubeSAP LinkedIn