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

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

Full screen layout

Flexible column 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.

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.

style

column-section-1-1, no-footprint

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.

The following frameworks are also used to design pages:

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)

BTP eXperience Toolkit

For business intelligence (BI), planning, and predictive analytics. Design framework for the SAP Integration and Extension Suite (formerly known as SAP Cloud Platform)