SAP Fiori Elements – Overview

Discover / Frameworks / SAP Fiori Elements / SAP Fiori Elements – Overview

Intro

The UI-development framework of choice for all projects, the SAP Fiori elements framework:

Drives UX consistency across applications with common layout and interaction patterns in building blocks that align with SAP's design principles and user-centric approach.
Offers flexibility to adapt the applications for specific solutions within the framework.
Speeds development by reducing the frontend code required to build SAP applications.

This article introduces you to the SAP Fiori Elements framework and links to other sources of information about its capabilities so you can optimize your collaboration as an application team.

information

To explore the design capabilities of SAP Fiori elements for OData V4 and the various options for the building blocks, and to experiment with their behavior – both standalone and when used in standard floorplans or custom pages, see: the SAP Fiori Development Portal.
For resources on getting started and staying current with SAP Fiori Elements, see: Find Information and Get Help.

information

To explore the design capabilities of SAP Fiori elements for OData V4 and the various options for the building blocks, and to experiment with their behavior – both standalone and when used in standard floorplans or custom pages, see: the SAP Fiori Development Portal.

SAP Fiori Elements Framework

SAP Fiori Elements Building Blocks

To create SAP Fiori applications, at runtime, the SAP Fiori elements framework generates the UI based on OData service metadata, annotations, and application-specific configurations.

New applications are developed with SAP Fiori elements for OData V4, based on the OData (Open Data Protocol) version 4.

Building Blocks

Visual layout patterns that range from basic patterns like the field to complex patterns like tables. Building blocks can be used in standard floorplans, custom pages, or a combination of the two, as best fits your application requirements.

See: Building Blocks.

Global Patterns

Non-visual building blocks as common interaction patterns like side effects or draft handling.

See: Global Patterns.

Standard Floorplans

Standard floorplans combine the most common building blocks and patterns in predefined layouts with added optimizations for component interaction at the floorplan level. They provide for the most efficient application development and can be extended for use-case-specific deviations.

The most common floorplans are list report and object page with their variations.

Through extension points, these standard floorplans can be adjusted if needed.

See: Standard Floorplans

Custom Pages

Custom pages flexibly combine building blocks to achieve custom layouts that benefit from the framework capabilities.

Additional SAPUI5 coding can be used to complement the custom layout.

See Custom Pages.

Usage

Your use case determines how your project team develops the application with SAP Fiori elements:

Do the SAP Fiori elements floorplans deliver all the features you need to provide to the users?
If the SAP Fiori elements floorplans offer a close fit, your project team can explore the extension options to include building blocks or SAPUI5 in a floorplan.
If your SAP Fiori application requires a custom layout, choose the building blocks and global patterns that developers add to a custom page and retain the benefits of the SAP Fiori elements framework.
You can combine standard floorplans and custom pages within an application to satisfy the user’s needs.

Extensions

Although extensions require effort to develop and maintain, they also retain benefits of the SAP Fiori elements framework that save on other efforts. Check out the extension options for each floorplan or explore the custom layout options with custom pages in the SAP Fiori Development Portal.

Placeholder Texts

Some UI texts that the SAP Fiori elements framework provides are generic placeholders. Always replace them with text that is meaningful to your user, for example:

<div> <div>Floorplan</div> <div>Placeholder Text</div> <div>Replacement Text</div> </div> <div> <div>List Report</div> <div><em>Create Object</em></div> <div><em>Create Sales Order</em></div> </div> <div> <div>Object Page</div> <div><em>New Object</em></div> <div><em>New Sales Order</em></div> </div> <div> <div>Overview Page</div> <div><em>Could not perform action</em></div> <div><em>Unable to approve</em></div> </div>

For more information, see: Replacing Placeholder Text.

hint

For more information about placeholder texts in SAP Fiori elements, see Replacing Standard UI Texts.

For Application Developers

SAP Fiori elements is shipped with SAPUI5 and supports both SAP Fiori elements for OData V4 and SAP Fiori elements for OData V2.

Build new applications with SAP Fiori elements for OData V4.
Refer to the SAP Fiori Development Portal provides all capabilities for SAP Fiori elements for OData V4.
For an overview of all available SAPUI5 versions and their maintenance status, see SAPUI5 Versions Maintenance Status.

Elements and Controls

UI Text Guidelines for SAP Fiori Apps (guidelines)
SAP Fiori Development Portal (central source for all project team members)