Intro

SAP Fiori elements (formerly known as smart templates) provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns. The goals are to ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of frontend code for building SAP Fiori apps.

SAP Fiori elements use annotations that add semantics and structures to the data provided by the user.

SAP Fiori elements are part of the SAPUI5 delivery.

Currently Available

The following floorplans are currently available with SAP Fiori elements:

All floorplans support the dynamic page layout for full screen layouts. In addition, the new flexible column layout is available for the list report and object page.

Where applicable, SAP Fiori elements use the global edit flow, which includes draft handling, or the local edit flow without draft handling. SAP Fiori elements also offer message handling.

SAP Fiori elements – The production line for UIs
SAP Fiori elements – The production line for UIs

Responsiveness and Adaptiveness

The responsiveness of SAP Fiori elements depends on the responsiveness of the controls used.

SAP Fiori elements generally use priority annotation on fields and actions to control responsiveness. This annotation supports the values high, medium, and low. Annotating actions with a priority level helps to control the overflow behavior of the toolbar. In the responsive table, the priorities also define the pop-in behavior of columns.

Adjustments

The behavior and interaction generally follows the guidelines for the respective floorplan or concept. If the guideline offers choices, SAP Fiori elements implement the most generic option or, where possible, provide different options to choose from. The application can adjust the application via annotation, Web IDE, or UI adaptation.

Deviations from the guidelines are sometimes necessary due to current technical limitations, which are listed on the respective pages. These limitations are usually short term and will be solved in future releases.

The templates offer breakout scenarios at page level, where it’s possible to add, remove, or replace whole pages, and at section/control level.

Mandatory Adjustments

Some UI texts provided by the SAP Fiori element contain generic placeholders. Always replace the default placeholders with an application-specific text. For more information about placeholder texts in SAP Fiori elements, see Replacing Standard UI Texts.

Examples of generic and adjusted texts:

Default Text Adjusted Example
List Report Create Object Create Sales Order
Object Page New Object New Sales Order
Overview Page Could not perform action Unable to approve the request

Resources

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

Elements and Controls

Implementation

  • No links.