Find the answers you need

SAP Fiori Elements (Smart Templates)

Smart templates, also known as SAP Fiori Elements, provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most-used application patterns.

About Smart Templates (SAP Fiori Elements)

Smart Templates ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of front-end code for building SAP Fiori apps. The template is smart because the annotations add semantics and structures to the data that is provided, and the template understands these semantics. Smart Templates are part of the SAPUI5 delivery.

The controls that you use in the context of a Smart Template prototype are limited to the ones supported by the template, therefore, only the UI5 controls used by Smart Templates are available. You can drag these controls onto the canvas or into the Outline to add them to the page. The canvas displays a preview of your page.

You must create and upload a data model to provide data for your prototype before you can use Smart Templates.

For more information see the Introduction to SAP Fiori ElementsInformation published on non-SAP site and Developing Apps with SAP Fiori Elements

SAP Fiori Element Prototype Pages

An SAP Fiori Element prototype consists of a list report page and one or more object pages.

Before you get started using SAP Fiori Elements to create list reports and object pages, take a few minutes to familiarize yourself with the interface.

The templates contain the following sections:
  • Data tab: Lets you access the Data Editor where you upload objects or add objects to the data model. After you have uploaded or added data to the data model, you can view the properties of each object under this tab.
  • Controls tab: Where you select the UI controls that you want to use in the template.
  • Images tab: Displays the images that you want to use in your template.
  • Outline: Displays the structure of the page. Drag controls to the outline to add content to the page. You can reorder and delete items in the outline.
  • Properties: Where you enter text or choose properties of the selected control.
  • Discussion: Where you post comments and read comments by others.
Figure 120. SAP Fiori Element Prototype