In SAPUI5, you can also implement the so-called list-detail pattern. Apps following this pattern operate with a layout divided into two or three areas: a list area and two detail areas. The list area displays the items available to the user. The first detail area displays the details of an item selected in the list area. Sometimes this area contains, besides other data, a list of items. The user can select an item from this list to get more information in the second detail area.
In this unit, we will focus only on the design and implementation aspects that are different to the previous unit, Implementing Full-screen Application.
The sap.f.FlexibleColumnLayout
For some use cases, it is very important to have a fluid navigation between pages, above the usual page-by-page navigation. Consequently, SAPUI5 provides the sap.f.FlexibleColumnLayout. The flexible column layout offers different layouts with up to three columns. Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.
Take a look at the usage of sap.f.FlexibleColumnLayout with the three columns.
Using the List-Detail Pattern
- When to use the list-detail pattern:
- You need to review and process different items quickly with minimal navigation.
- When not to use the list-detail pattern:
You need to offer complex filters for the list of items.
You need to see different attributes for each item in the list, and compare these values across items.
You want to display a single object. Do not use the list to display different facets of the same object.