Developing Apps with SAP Fiori Elements

This section contains information about developing SAP Fiori apps using SAP Fiori elements, and how to use them to save time and development costs.

SAP Fiori elements provide designs for UI patterns and predefined templates for commonly used application patterns. App developers can use SAP Fiori elements to create SAP Fiori applications based on OData services and annotations requiring no JavaScript UI coding. The resulting app uses predefined views and controllers that are provided centrally, so no application-specific view instances are required. The SAPUI5 runtime interprets metadata and annotations of the underlying OData service and uses the corresponding views for the SAP Fiori app at startup.

The predefined views and controllers ensure UI design consistency across similar apps. Also the metadata-driven development model significantly reduces the amount of front-end code for each app, so the developer can focus on the business logic.

SAP Fiori elements offer the following main features:

• Reuse functionality that does not require specific programming

• A common look and feel and UI behavior for all apps

• Edit mode control, switching between display and edit, and submitting changes

• Message handling

• SAP Fiori launchpad integration

• Support for SAPUI5 Flexibility Services

• SAP Web IDE wizard for app creation (plug-in available for overview pages)

• Control of the UI using OData annotations, which semantically enrich the OData metadata

• Multi-device support

• Status colors and icons to indicate criticality

• Header facets to define which information is displayed in the header

• Value help

• Handling of draft documents (draft saving is available)