Flexible Column Layout App Tutorial

Flexible Column Layout App Tutorial

In this tutorial, we showcase how to structure your SAPUI5 app using the layout patterns that comply with the SAP Fiori design guidelines.

The app provides the following features:

  • An up-to-three-column layout based on the sap.f.FlexibleColumnLayout control. This layout has predefined layout types and defined routing between them that enables smooth navigation between the list-detail and list-detail-detail patterns of the app.

  • A list page based on the sap.f.DynamicPage control that lists the available products and has filtering and sorting options.

  • A detail page based on the sap.uxap.ObjectPageLayout control containing detailed information about the selected object from the list page:

    • It implements the dynamic header of the ObjectPageLayout control.

    • The sap.f.Avatar control is used in the title area to display an image of the selected product.

    • The header title area can be collapsed (snapped to the title) by scrolling down the content of the page or by clicking/tapping the title area. The header area can also be pinned so that it remains visible when the user scrolls down the content of the page.

    • The title area has a set of actions on the right. The title area can display specific content when the header is snapped.

    • The floating footer is positioned at the bottom of the page, on top of the page content. It holds finalizing actions on the right.

  • A detail-detail page based on sap.f.DynamicPage to display further details of the selected object from the detail page.

  • A simple about page based on sap.f.DynamicPage to display further details of the selected object from the detail-detail page.

Preview

list-detail-detail pattern with sap.f.FlexibleColumnLayout, sap.f.DynamicPage and sap.uxap.ObjectPageLayout

Tip

You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, and start there.

You can view and download the files for all steps in the Demo Kit at Flexible Column Layout App. Copy the code to your workspace and make sure that the application runs by calling the webapp/index.html file. Depending on your development environment you might have to adjust resource paths and configuration entries.

For more information check the Downloading Code for a Tutorial Step section of the tutorials overview page Get Started: Setup, Tutorials, and Demo Apps.

In this section:

  1. Step 1: Setting Up the Initial App
  2. Step 2: Creating an Empty Flexible Column Layout
  3. Step 3: Using Dynamic Page for the List View
  4. Step 4: Adding a Detail Page
  5. Step 5: Using Object Page Layout as a Detail Page
  6. Step 6: Adding a Floating Footer
  7. Step 7: Routing
  8. Step 8: Enhancing the Detail Page
  9. Step 9: Adding a Detail-Detail Page
  10. Step 10: Adding More Pages
  11. Step 11: Using the Flexible Column Layout Semantic Helper
  12. Step 12: Starting with Two Columns
  13. Step 13: Setting the List-Detail Pattern