Intro

The master-detail app allows the user to quickly scan through a list of items and take action. The main actions are creating and editing list items. This app type has already been used in multiple occasions within SAP Fiori and is well established and mature.

The master-detail app is based on the split-screen layout and also uses the master list.

Master-detail app on desktop
Master-detail app on desktop

Responsiveness and Adaptiveness

The master-detail app works well on any form factor. It inherits the responsive behavior from the split-screen layout.

Master-detail app on tablet
Master-detail app on tablet
Master-detail app on smartphone
Master-detail app on smartphone
Master-detail app on smartphone
Master-detail app on smartphone

Behavior and Interaction

Please use the master-detail app to display a number of items in the master list and further information to that item in the details area. This allows the user to quickly get an overview of the items. The user is able to select an existing item in order to edit it or can create a new one without navigating.

The possibility to use the multi-select functionality in order to edit several items at the same time also exists (read more in master list article “select multiple items“).

Note: The edit page floorplan and the create page floorplan offer multiple variants to edit and create an item to support different use cases.

The master-detail app consists of the following components:

No items available:

On startup, the first work item should be selected and displayed in the details area. If there are no items in the list, the details area should show an empty page.

If an item is saved as tile and cannot be shown the next time, then the details area should also show an empty page (see picture below).

Item is no longer available
Item is no longer available