If you are just getting started designing SAP Fiori apps, you might be asking yourself what a floorplan is. The term floorplan is used differently in different design contexts. In relation to SAP Fiori, when we talk about floorplans we are referring to predefined layouts for common use cases. These layouts can be used to compose a simple and responsive user interface based on SAP Fiori Design Guidelines.
The designer can choose between one of the basic page layouts: e.g. the split screen layout or full screen layout. These basic page layouts can be used with a range of different SAP Fiori floorplans (see below). Each of them contain a shell bar with global search and other app-specific actions like navigation and personalization. One layout should be chosen within an app in order to create a consistent and responsive design that offers users a seamless experience across multiple form factors.
Split Screen Layout with Object View Floorplan – Example
Full Screen Layout with List Report Floorplan – Example
SAP Fiori floorplans:
- Create Page – full screen or part of a split screen layout
The create page floorplan is for creating new objects. The main pattern of the create page is a form.
- Edit Page – full screen or part of a split screen layout
The edit page floorplan offers various options for editing an existing object or page and contains forms and numerous other controls.
- Initial Page – full screen layout
The initial page floorplan is used when users need to navigate to only one object to view or edit. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible.
- List Report – full screen layout
The list report floorplan is used for apps that need to create a list of items from a large database. A filter bar in the header part of the page allows the user to control the list content by setting various filters.
- Object View – full screen or split screen layout
The object view floorplan offers optimal support for multiple devices and is suitable for both simple objects and more complex, multi-faceted objects with minimal navigation.
- Flat Object View – full screen or split screen layout
The flat object view floorplan displays all the information for an object on one long scrollable page while the layout stays the same in both display and edit mode.
- Worklist – full screen layout
The worklist floorplan displays a collection of items to be processed by the user either to complete a work item or delegate it.
I hope this introduction to SAP Fiori floorplans was helpful. For much more detailed information, please have a look at the SAP Fiori Design Guidelines.
If you have feedback about the SAP Fiori floorplans or the guidelines, let us know. We’d like to hear from you!