Master-Detail Template
The SAP Fiori Master-Detail Application template implements a typical split-screen layout, one of the design patterns that is specified by the SAP Fiori Design Guidelines.
The split-screen layout is optimized for displaying and processing a list of items. On the left side of the screen, users can quickly scan and navigate through the list. On the right side, they then see the details of the selected item, and can trigger related actions or edit the data. Use this template if the users need to review and process different items quickly with minimal navigation. For more information about split-screen floorplans and master-detail apps, see the Related Information section at the bottom of this topic.
-
If the app runs in FLP it also contains additional features like Save as Tile or Share in SAP Jam that depend on FLP at runtime. This app cannot be run standalone, meaning no index.html file is created but only files for testing the app in the FLP sandbox.
-
Only standalone apps contain an index.html file that is used to start the app.
The main control of this app is the sap.m.SplitApp control that displays the Master view with a list of objects on the left side and the Detail view on the right side. When the user presses an object in the master list, the detail page is updated with the context of the selected item.
The Master view shows the current number of items and a search field that can be used to search through the list items. The number of items are updated automatically and the search filters for a preconfigured field of the list. Functionality for sorting, filtering, and grouping the list is also included in the template as well.
The Detail page contains a simple object header displaying more details for the selected object, an empty sap.m.IconTabBar that can be enriched with custom app content, and a table of line items that are associated to the selected object in the data model.
The master list and the line item table are set to growing mode so that initially only the first few items are displayed for performance reasons. Using the scrollToLoad feature, the user can display more items by scrolling down or pressing the trigger at the end of the list.
We use the semantic MasterPage and DetailPage controls for the content aggregations of the sap.m.SplitApp control. A SemanticPage is an enhanced sap.m.Page that contains controls with a semantic meaning and displays them according to the SAP Fiori Design Guidelines. For more details about semantic controls, see the SemanticPage sample in the Explored app in the Demo Kit.
As the use cases for apps using a split-screen pattern differ greatly, the template only displays a minimum number of fields on the master and detail page and does not include a line item detail page. You can easily modify the app to add more functionality if needed.
The SAP Fiori Master-Detail Application template can be found in the SAP Web IDE and is also included as the Master-Detail app in the Demo Apps section of the Demo Kit. For more information about SAP Web IDE, see the corresponding section on the SAP Help Portal.
When creating a project from the template in SAP Web IDE, you can configure several parameters and choose a service endpoint for the app using wizard steps. When you use the demo app, you have to manually modify the code according to your needs.