Overview – Floorplans, SAP Fiori Elements and Frameworks (2024)

Dynamic Page Layout

Dynamic page layout

Thedynamic pageis a new layout control and it is designed in a way to support various floorplans and use cases. Thelayout is full responsive and will be the successor of the full screen layout with additional functionality to have a coherent and consistent snapping header concept that can be adapted throughout all floorplans.

Full Screen Layout

Full screen layout

Thefull screen layoutuses the full width of the screento display the app content. This layoutprovides maximum flexibility while maintaining the look and feel of SAP Fiori.The full screen layout is ideal for displaying wide tables with four or more columns, and for showing various typesof information on one page. However, it is difficult to ensure that the layout is responsive due to the immense differences between a widescreen desktop and a mobile phone.

The new layoutfor displaying pages in full screen is the dynamic page layout. The dynamic page layoutoffers moreflexibilityand integrates features like the snapping header.Itis the successor of the full screen layout. Please, check if you could use the dynamic page layoutinstead. From wave 1.44 (1702) on the full screen layoutwill be deprecated.

Split-Screen Layout

Thesplit-screen layoutis one of the most widely used and stable layouts in SAP Fiori. Use this layoutif the userneeds to switch easilybetween different work items. Themaster liston the left showskeyinformation for each item, while the content area on the right shows the details and available actions. This layout lets the user workdown the list without additional navigation. On a phone (or when the screen becomes too narrow), the master list and the details are split into two separate pages and the user navigates between the two.

Dynamic Side Content

Dynamic side content layout

The dynamic side content layout is a control that allows additional content – such asa timeline, chat, and additional information – to be displayed in a way that flexibly adapts to different screen sizes. The behavior of the control on smaller screen sizes can be configured by app development following the guidelines.

Object Page Floorplan

Object page floorplan

The object page floorplan is the new way to represent objects in SAP Fiori. The object page replaced theflat object view floorplanand the object view floorplan. New features in the object page, such as flexible headers, an alternative anchor, tab navigation, and a flexible responsive layout,enable you to adapt itfor a wide range of use cases.

Initial Page Floorplan

Initial page floorplan

Use theinitial page floorplanif the user has tonavigatedirectly to oneobjecttoview or edit it. 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 (for example, value help and search as you type). If you need to display more than one object, use the list report floorplan instead.

List Report Floorplan

List report floorplan

The list report floorplan allows the user to work with large lists of items and take action. This floorplan combines powerful filtering capabilities for large amounts of data with diverse and useful ways to display the resulting item list. This floorplancan only be used in thefull screen layout.

Worklist Floorplan

Worklist floorplan

Wizard Floorplan

Wizard floorplan

The wizard floorplan guides users through long and/or unfamiliar tasks by dividingthe task into sections and guiding the users through the different sections. The wizard comprises awalk-through screen, where the form sections are sequentially revealed as they are completed, and asummary page, where the form is displayed in read-only mode for assessment and final submission. This floorplan can be used in bothfull screenandsplit screen layouts.

Create Page Floorplan

Create page floorplan

Object View Floorplan

Object view floorplan

SAP Fiori elementsprovide a framework for generatingUIs at runtime based on metadata annotations and predefined templates for the most used application patterns.For more information, see the introduction to SAP Fiori elements.

List Report

List report - SAP Fiori element

The SAP Fiori elementlist report is an instanceof the general list report floorplan implemented as a reusable template. Therefore, the guidelines for thelist report generally apply.The list report floorplan allows the user to work with large lists of items and take action.

Object Page

Object page – SAP Fiori element

The object page floorplan is used to view, edit, and create objects. The object page can alsobe implemented as a SAP Fiori element. For details aboutthe general floorplan and the SAP Fiori element, see theobject pageguidelines.

Overview Page

Overview page - SAP Fiori element

Based on a specific domain or role, the overview page (OVP) is a new data-driven SAP Fiori app that providesall the information a user needs to view, filter, and react to data in a one-stop-shop page. The OVP employs cards (containers of content) based on smart template technology as a UI framework for organizing large amounts of information on an equal plane within the page.

Analysis Path Framework

SAP Smart Business Framework