SAP Fiori elements is a framework that comprises the most commonly used floorplan templates and is designed to:

• Speed up development by reducing the amount of frontend code needed to build SAP Fiori apps.
• Drive UX consistency and compliance with the latest SAP Fiori design guidelines.

The articles in the “SAP Fiori Elements Framework” section of the guidelines cover all the design possibilities based on the current technical capabilities of the SAP Fiori elements framework and the version used to develop your application.

Video: What is SAP Fiori elements?

Versions

Ask your engineering colleagues what SAP Fiori elements version they will use to develop your app because there are differences in the design options that each version supports. The articles in this section of the guidelines indicate when such differences exist.

Each version of SAP Fiori elements supports a different version of OData (Open Data Protocol), as their names indicate:

• SAP Fiori elements for OData version 2 (V2)
• SAP Fiori elements for OData version 4 (V4)

Usage

Your use case should determine whether or not the application is developed with SAP Fiori elements:

• Do the SAP Fiori elements floorplans deliver all the features you need to provide to the users?
• If not, can you provide the features with extensions to the SAP Fiori elements floorplans?
• If not, can you provide the features by building a freestyle app within the SAP Fiori elements framework and using SAP Fiori elements OData V4 extension capabilities?

Although extensions require effort to develop and maintain, they also retain benefits of the SAP Fiori elements framework that save on other efforts.

Supported Floorplans

The following floorplans are available as SAP Fiori elements templates:

Each floorplan can be placed inside the flexible column layout, except the overview page. The overview page must always be implemented as a standalone application that pulls in data from a minimum of two other applications.

Supported Features

Both SAP Fiori elements for OData V2 and for OData V4 offer:

• Message handling
• The global edit flow, which includes draft handling
• Keyboard shortcuts for basic operations
• Custom shortcuts for application-defined actions. Note that custom shortcuts for inline actions on table rows are not supported.
• Seamless navigation across applications with the:
  • Inner app state that stores the state of the current page when the user leaves it, including such details as filter values, table and chart personalization, and the selected tab or section. The app state restores these details when the user returns.
  • Support of the SAP Fiori Launchpad feature called sap-keep-alive mode.
    With sap-keep-alive mode, the app page is restored to the same state it was in when the user left it, including scroll position and table selection. It also improves the performance of the page reload after back navigation.
    However, ensuring the page reflects changes that the user made in an external application before returning to it requires explicit configuration by the application developers.

Only SAP Fiori elements for OData V2 supports the local edit flow without draft handling.

Placeholder Texts

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

For more information, see: Replacing Placeholder Text.

Extensions

SAP Fiori elements may not deliver all the features required by your use case so application developers can create extensions to bridge the gaps. They can:

• Extend the SAP Fiori elements floorplans
• Extend the SAP Fiori elements application
• Build a freestyle application within the SAP Fiori elements framework with SAP Fiori elements for OData V4 options for extensions

Although extensions require efforts in development and maintenance in subsequent releases, they also retain benefits offered by the SAP Fiori elements framework that save on effort, such as navigation, binding, and usage of building blocks in the freestyle code.

Some extensions only take minutes of additional development time so ask application developers to evaluate the effort for the extensions required for a good user experience.

Extensions with SAP Fiori Elements for OData V4

SAP Fiori elements for OData V4 provides various ways to extend applications.

The flexible programming model makes it easy for application developers to implement customizations. They’re free to use SAPUI5 coding or controls in extension points and can also take advantage of building blocks and controller extensions.

Building Blocks

Building blocks result in low-maintenance and timeless software. They allow application developers to create a visual representation of application data in a convenient way.

Building blocks are reusable artifacts that are consistently orchestrated by the framework to ensure SAP Fiori compliance and standard application behavior like draft handling and side effects.

For more information and list of building blocks available, see Flexible Programming Model Explorer.

Related Links

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.