SAP Fiori Elements

Discover / Frameworks / SAP Fiori Elements

Intro

SAP Fiori elements is a framework that lets teams build enterprise apps quickly using proven page types known as floorplans. Instead of designing every screen from scratch, you assemble an app from standardized pages that are automatically filled with your business data and actions. The result is a consistent, responsive, and accessible UX that follows SAP Fiori guidelines with far less custom design and code.

The articles below introduce the SAP Fiori elements framework and outline the design options based on the current technical capabilities.

Get Started

SAP Fiori Elements - Overview

Get the big picture, including supported floorplans, key features, versioning, and extensions.

Terminology for SAP Fiori Elements

Familiarize yourself with the terms used by designers and developers.

List Report / Worklist

List Report Header

Supported features for the list report header.

List Report Content Area

Supported content layouts.

Worklist

Supported features based on a simplified list report.

Object Page

Object Page - Overview

Global features for the object page.

Object Page - Header

Supported features for the object page header.

Object Page - Content Area

Supported features for the object page content area and subsections.

Object Page – Footer Bar

Supported footer bar actions.

Table / List

Table Types

Supported features for the different table types.

Table Features

General table features for the list report and object page.

Table Toolbar

Table toolbar features for the list report and object page.

Table Rows

Supported features for table rows and inline items.

List

Supported list item types in a list report.

Analytical List Page / Overview Page

Both the analytical list page floorplan and overview page floorplan are implemented as SAP Fiori elements templates.

To explore the design capabilities of SAP Fiori elements for OData V4 for these floorplans, and to experiment with their behavior, in the SAP Fiori Development Portal see:

All the design options are described in the guidelines below.

Analytical List Page

Analyze data from different perspectives and drill down to the details.

Overview Page

Entry page for a specific task or role.