SAP Fiori Elements

Core Concepts

Definition

SAP Fiori Elements is a framework for developing SAP Fiori applications based on pre-defined templates, allowing rapid development with minimal coding.

Detailed Description

SAP Fiori Elements provides developers with an efficient way to create SAP Fiori applications by using standardized floorplans for common application patterns. It leverages OData services and annotations to generate the user interface at runtime, reducing the need for UI coding. This accelerates development, ensures design consistency, and adherence to SAP Fiori UX guidelines.

Key Features

Accelerates application development
Ensures consistent SAP Fiori UX design
Minimal UI code required for development
Pre-defined floorplans for common application patterns
Supports multiple floorplan types like List Report, Object Page, Worklist, Analytical List Page, and Overview Page
Supports OData services and annotations

Common Modules

OData Services

Protocol used to exchange data between SAP systems and SAP Fiori applications.

SAP Business Application Studio

Development environment for building SAP Fiori applications and extensions.

SAP S/4HANA

SAP's next-generation ERP suite that extensively uses SAP Fiori applications for user interaction.

SAPUI5

A JavaScript UI library used for building SAP Fiori applications.

Examples

Manifest.json Configuration for a List Report

An example of a manifest.json file configuring a List Report application using SAP Fiori Elements.

{
  "sap.app": {
    "id": "com.example.listreport",
    "type": "application",
    "i18n": "i18n/i18n.properties"
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.76",
      "libs": {
        "sap.suite.ui.generic.template": {}
      }
    },
    "models": {
      "": {
        "dataSource": "mainService",
        "preload": true,
        "settings": {
          "synchronizationMode": "None",
          "operationMode": "Server"
        }
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.f.routing.Router",
        "viewType": "XML",
        "async": true,
        "viewPath": "com.example.listreport.view"
      },
      "routes": []
    }
  }
}

Popular Implementations

Creating an Analytical List Page

Using SAP Fiori Elements to build an Analytical List Page that provides insights through analytical charts and tables.

Developing a List Report Application

An implementation of a List Report application using SAP Fiori Elements to display and filter business data from an OData service.