Pathlock

What is SAP Fiori? Applications, Elements, Launchpad & Design

SAP Fiori is SAP's next-generation, role-based UI design system that delivers a simplified, coherent, and intelligent user experience across all SAP products through responsive, task-focused applications enhanced with AI and machine learning, unified visual language, and seamless integration to provide consumer-grade usability tailored to user roles and devices.

What is SAP Fiori?

SAP Fiori is a next-generation UI design system from SAP that provides an intelligent user experience (UX) across all SAP products. It moves away from traditional, function-driven, and complex interfaces, such as SAP GUI, to a role-based user experience. At its core, SAP Fiori is a design system built on tools, principles, and guidelines that define interaction patterns, visual language, and the overall UX of SAP applications. It provides a unified look and feel, regardless of the underlying system used.

Core Features of SAP Fiori

  • Simplified and harmonized user interfaces: Fiori replaces complex SAP GUI screens with a clean, task-focused visual design, ensuring uniformity across SAP modules and systems.
  • Role-based relevance & access: Applications are tailored to user roles, showing only relevant data and hiding unnecessary functions. Access is managed via SAP security roles and catalogs.
  • Responsive & adaptive design: Fiori apps adjust layouts and elements for smartphones, tablets, and desktops, supporting touch interactions and higher data density on desktops.
  • Machine-learning augmentation: SAP Fiori 3 integrates AI and machine learning, offering recommendations, insights, and a conversational assistant (Joule copilot) for personalized data and workflow automation.

Design and Experience Pillars

  • Simple: Follows the 1-1-3 UX rule (one user, one use case, max three screens).
  • Coherent: Consistent visual language and interaction patterns across SAP applications.
  • Delightful: Efficient, enjoyable user experience.
  • Intelligent: Displays relevant insights and recommendations, leveraging AI and machine learning.
  • Consistent: Predictable, unified experience across SAP products.
  • Integrated: Seamless integration between SAP modules and third-party systems.
  • Collaborative: Tools for sharing information and collaborating on business processes.

Goal: Consumer-grade UX across SAP products

SAP Fiori aims to provide a consumer-grade UX, similar to popular web and mobile applications, to drive user adoption, productivity, and satisfaction.

Supported UI Technologies

  • SAPUI5 framework: JavaScript UI library for building responsive, enterprise-grade web applications.
  • UI5 Web Components: Reusable UI elements for use in any web application framework.
  • Mobile SDKs for iOS & Android: Enable development of Fiori-compliant native mobile apps.

SAP Fiori Benefits

  • Consumer-grade UX on any device: Consistent, intuitive experience across smartphones, tablets, and desktops, supporting a mobile workforce.
  • Low-code, rapid app development & customization: Tools like SAPUI5, Fiori elements, and SAP Build enable quick app creation and customization with minimal coding.
  • Accessibility Boost via SAP’s “72” Typeface: Modern, accessible font designed for Fiori, aligned with accessibility guidelines.
  • Workflow Redefinition for Digital Transformation & AI: Streamlines processes, integrates AI and machine learning for automation and predictive analytics.

Fiori Design System and Resources

SAP Fiori Design System: Templates, Components, Patterns

  • Templates (Floorplans): Predefined layouts for common business scenarios (List Report, Object Page, Worklist, Overview Page, Analytical List Page).
  • Components (UI Elements): Reusable controls (input fields, tables, buttons, cards, charts) designed for accessibility and consistency.
  • Patterns: Best practices for combining components to solve interaction challenges (e.g., Filter Bar, list report patterns).

SAP Design System Portal and “What’s New” Hub

Central platform for Fiori design resources, documentation, and updates on new features and standards.

UI Kits (Figma), Icon Explorer, Mentor app, Theme Designer

  • UI kits on Figma: For prototyping and designing Fiori applications.
  • Icon Explorer: Search and use SAP Fiori icon library.
  • Mentor app: Insights into Fiori component behavior on mobile devices.
  • Theme Designer: Customize Fiori app appearance to match corporate branding.

User-research & Design Thinking Communities

SAP fosters communities for user research, feedback, and collaborative design, enabling continuous improvement of the Fiori user experience.

Fiori Development Approaches and Tools

SAP Fiori Elements: Efficiency & UX Consistency

Framework providing predefined UI templates (floorplans) to build Fiori applications with minimal coding, using OData services and metadata.

Key Floorplans

  • Analytical List Page: Combines transaction processing with analytics.
  • List Report: Displays collections of items (e.g., sales orders).
  • Object Page: Detailed view of a business object.
  • Overview Page: High-level overview with key information using cards.
  • Worklist: List of items/tasks requiring user action.

Freestyle App Development with Fiori Design Guidelines

For complex requirements, developers can build apps from scratch using SAPUI5, adhering to Fiori design guidelines for maximum flexibility.

Tooling Accelerators

  • SAP Fiori Tools, SAP Web IDE, SAP UI5: Project wizards, editors, guides, preview and deployment tools to boost productivity.
  • SAP Business Application Studio: Modern IDE for Fiori app development.

SAP Fiori Launchpad

Central entry point for all applications, providing a personalized, role-based homepage.

  • Tiles: Represent business objects/apps, display live data.
  • Groups: Organize tiles for personalized launchpad.
  • App Finder: Catalog of available Fiori apps.
  • Me Area: Quick access to personal settings and recently used apps.
  • Target mapping & shell header bar: Backend configuration and global navigation features.

Application Types

  • Transactional Apps: For creating, changing, approving business processes (e.g., sales orders, purchase approvals).
  • Fact Sheet Apps: 360° view of business objects (e.g., customer, product, sales order).
  • Analytical Apps: Real-time KPI insights with charts, graphs, and tables.

Fiori Development Technology Stack

  • ABAP Programming Model for SAP Fiori (CDS, BOPF): Data modeling and business logic in ABAP layer, using Core Data Services (CDS) and Business Object Processing Framework (BOPF).
  • ABAP RESTful Programming Model (RAP): Cloud-ready OData services for Fiori apps, using Entity Manipulation Language (EML) for CRUD operations.
  • SAP Gateway and OData services: Connects SAP backend systems to Fiori UIs via OData services.
  • SAP HANA XS and KPI modeling: Application server within SAP HANA for exposing OData services and modeling KPIs for analytical apps.

SAP Fiori Architecture and Deployment

  • On-premises ABAP front-end server components: Dedicated ABAP Front-end server (FES) for on-premises/private cloud, with options for embedded or hub deployment.
  • Cloud Products (S/4HANA Cloud, SuccessFactors, Ariba): Different approach for user interfaces, leveraging cloud-native technologies.

Note: The content continues with further details on SAP Fiori architecture, deployment, history, roadmaps, integration with S/4HANA, related SAP technologies, additional resources, and future outlook, which may be present in the full article.