SAP Fiori — Modern UX & Launchpad Guide

In this tutorial, you'll learn about SAP Fiori. We cover key concepts, practical examples, and best practices.

SAP Fiori is the modern user experience layer for SAP systems — a web-based, responsive interface that replaces the traditional SAP GUI with role-specific apps designed for occasional users, managers, and mobile workers.

What You'll Learn

You will learn about the Fiori Launchpad, the three app types (transactional, analytical, fact sheet), SAPUI5 development, and how to deploy Fiori with S/4HANA or ECC.

Why It Matters

SAP GUI requires training, memorizing transaction codes, and desktop installation. Fiori is intuitive — any employee who can use a website can use Fiori. Adoption rates jump from 30% to 80% when companies switch to Fiori.

Real-World Use

A plant manager opens her Fiori Launchpad on an iPad and sees four tiles: "Open Purchase Requisitions," "Maintenance Orders Overdue," "Production Output Today," and "Quality Alerts." She taps "Quality Alerts" and sees real-time inspection failures sorted by severity — no transaction codes, no SAP GUI training.

Learning Path

flowchart LR
  A["SAP Overview"] --> B["SAP S/4HANA"]
  B --> C["SAP Fiori
You are here"]
  C --> D["SAP BTP"]
  D --> E["SAP Security"]
  style C fill:#f90,color:#fff

Fiori Architecture

flowchart TD
  A["Fiori Launchpad
Browser / Mobile"] --> B["SAP Gateway
OData Services"]
  B --> C["SAP Backend
S/4HANA / ECC"]
  B --> D["SAP BTP
Cloud Extensions"]
  C --> E["HANA Database"]
  A --> F["Mobile
Apps"]

Core Components

Fiori App Types

Transactional Apps

The most common type. They perform business transactions — create a purchase order, approve a leave request, post a goods receipt.

Example: My Purchase Requisitions (Fiori App ID: F2002)
  - View pending requisitions
  - Approve or reject with one click
  - See full requisition details
  - Available on desktop and mobile

Analytical Apps

Display charts and KPIs using SAP HANA's real-time processing power.

Example: Overdue Receivables (Fiori App ID: F0777)
  - Bar chart of overdue amounts by customer
  - Aging analysis (30/60/90+ days)
  - Drill down to individual invoices
  - Real-time data from ACDOCA

Fact Sheets

Show a 360-degree view of a business object — vendor, customer, material, equipment.

Example: Material Fact Sheet
  - Material number, description, base unit
  - Current stock across plants
  - Open purchase orders and production orders
  - Last goods movements with dates

SAPUI5 Development

SAPUI5 is the HTML5 framework used to build Fiori apps. It uses MVC (Model-View-Controller) architecture:

// SAPUI5 controller example
sap.ui.define([
  "sap/ui/core/mvc/Controller]
], function (Controller) {
  "use strict";

  return Controller.extend("myapp.controller.App", {
    onInit: function () {
      var oModel = new sap.ui.model.odata.v2.ODataModel(
        "/sap/opu/odata/sap/ZMY_SERVICE/"
      );
      this.getView().setModel(oModel);
    },

    onPressApprove: function () {
      var oContext = this.getView().getBindingContext();
      oContext.update({ Status: "Approved" });
    }
  });
});

Fiori Elements

For standard apps, Fiori Elements generates the UI automatically based on annotations — no manual UI5 coding needed:

<annotation:Annotation xmlns:annotation="http://www.w3.org/2000/01/rdf-schema#">
  <Annotation Term="UI.HeaderInfo">
    <Record>
      <PropertyValue Property="TypeName" String="Purchase Order" />
      <PropertyValue Property="TypeNamePlural" String="Purchase Orders" />
    </Record>
  </Annotation>
</annotation>

Fiori Launchpad Configuration

The Launchpad is configured in transaction /UI2/FLPD_CONF:

Configuration Steps:
1. Create catalog (T-code: PFCG) — group related apps
2. Create role — assign catalogs to roles
3. Assign users to roles
4. Configure target mapping — link tile to app URL
5. Assign groups — organize tiles on the launchpad

Tiles

Fiori Deployment Options

Real-World Scenario: Manager Approval Flow

1. Manager opens Fiori Launchpad on phone
2. Tile shows "3 Pending Approvals"
3. Manager taps tile → "My Approvals" app opens
4. List shows: PR 100001 ($12,000), Leave request, Travel expense
5. Manager taps PR 100001 → sees item details and budget status
6. Manager taps "Approve" → confirmation dialog appears
7. PR is approved — backend updates from Fiori via OData
8. Manager returns to Launchpad — tile now shows "2 Pending Approvals"

Common Errors

1. OData Service Not Activated

Fiori apps cannot load data if the OData service is inactive. Use /IWFND/MAINT_SERVICE to activate it.

2. User Role Missing Catalog

Users see an empty launchpad if no catalog is assigned in PFCG. Check role configuration.

3. Cross-Origin Resource Sharing (CORS) Blocked

When Fiori is on a different domain than the backend, CORS errors block data. Configure CORS in SAP Gateway.

4. App Not Found in Catalog

An app that exists on the system may not appear if the target mapping is missing in /UI2/FLPD_CONF.

5. Performance Issues with Large Data

Analytical apps on large datasets without proper HANA views perform poorly. Create HANA calculation views or CDS views.

6. Launchpad Groups Not Assigned

Even with the correct catalog, users need group assignments to see tiles. Configure groups in the PFCG role menu.

Practice Questions

1. What is SAP Fiori? A modern web-based user interface for SAP with responsive design, role-based apps, and mobile support.

2. What are the three Fiori app types? Transactional (perform tasks), Analytical (charts and KPIs), Fact Sheet (360-degree view of business objects).

3. What framework is used to build Fiori apps? SAPUI5 — SAP's HTML5 framework. Fiori Elements generates apps automatically from annotations.

4. What is the role of SAP Gateway in Fiori? It exposes SAP backend data as OData services that Fiori apps consume via REST.

5. What transaction configures the Fiori Launchpad? /UI2/FLPD_CONF — for configuring target mappings, catalogs, and groups.

Challenge: A company has 2000 warehouse workers who need to confirm transfer orders and 200 managers who need approval dashboards. Design a Fiori deployment with separate catalogs, roles, and device strategies for both groups.

FAQ

What's Next

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro. Updated 2026-06-24.