docs

Flexible Column Layout App Tutorial

In this tutorial, we showcase how to structure your OpenUI5 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.

1. Step 1: Setting Up the Initial App
   We start by setting up a basic OpenUI5 app for this tutorial.
2. Step 2: Creating an Empty Flexible Column Layout
   In this step, we add an instance of the sap.f.FlexibleColumnLayout control in the main view of the app.
3. Step 3: Using Dynamic Page for the List View
   In this step, we create the list view of the app using sap.f.DynamicPage control.
4. Step 4: Adding a Detail Page
   In this step, we add an empty detail page.
5. Step 5: Using Object Page Layout as a Detail Page
   In this step, we add sap.uxap.ObjectPageLayout to the detail page to display more information about each product.
6. Step 6: Adding a Floating Footer
   In this step, we add a floating footer to the detail page.
7. Step 7: Routing
   In this step, we utilize the sap.f.routing.Router.
8. Step 8: Enhancing the Detail Page
   With routing implemented, the model of the detail page is updated for each product. In this step, we enhance the detail page to show information specific for the selected product.
9. Step 9: Adding a Detail-Detail Page
   In this step, we create a detail-detail page using sap.f.DynamicPage, which is opened by choosing a supplier from the detail page.
10. Step 10: Adding More Pages
    In this step, we create an additional page that is displayed in a separate fullscreen column.
11. Step 11: Using the Flexible Column Layout Semantic Helper
    In this step, we use the sap.f.FlexibleColumnLayoutSemanticHelper class to implement the recommended UX patterns for layout changes in the app.
12. Step 12: Starting with Two Columns
    In this step, we set up the app to start with an initial layout of two columns.
13. Step 13: Setting the List-Detail Pattern
    In this step, we set up the app to follow the list-detail pattern.

This site is open source. Improve this page.