Updated: June 28, 2023

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

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.

Related Links

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)