Page Layouts and Floorplans

Intro

This article provides an overview of how SAP Fiori layouts and floorplans are used to build application pages.

Page Layouts vs. Floorplans

The standard page layout in SAP Fiori is the dynamic page, which is made up of a header, content area, and footer toolbar.

Floorplans are usually based on the dynamic page. Floorplans serve specific use cases and therefore come with a specific combination of UI elements in the header, content area, and footer toolbar.

The following visual shows the composition of the dynamic page layout and how the elements of a list report floorplan are built into it. Never insert a whole floorplan into just the content area of the dynamic page layout.

Page - Dynamic page - Floorplan

Full Screen vs. Flexible Column Layout

You can decide whether your app uses a full screen layout (one page at a time) or a flexible column layout for list-detail relationships (up to three pages side by side). The flexible column layout enables fast and fluid navigation between pages.

Full screen layout

Flexible column layout

More Information

For a general introduction, see Get to know the information architecture: Layouts, floorplans, UI elements.
For a description of all floorplans, their characteristics, and when to use them, see When to use which floorplan.
For structuring business data in the page header and content areas, SAP Fiori offers a variety of layouts and containers. Examples are forms and the dynamic side content.
Find more in the UI Elements section Form / Layout / Container.

Information

To control and optimize the left and right spacing between header and content area and between UI elements (such as tables and forms), we offer a responsive spacing system.

Additional Layouts

The following layouts have been designed for special use cases:

Layout	Use Case
Comparison	Allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.
Multi Instance	Allows users to open multiple documents in a tabular view. After selecting items from a list, the user opens them in a tab container.

Framework	Characteristics
SAP Fiori elements	Generates the user interface automatically, thus making app development more efficient, available for nearly all floorplans (besides Wizard and Initial Page)
Analysis Path Framework	For creating interactive, chart-oriented analytical drilldown apps by configuration
SAP Smart Business	For viewing and analyzing the data for one key performance indicator (KPI)