What is SAP Fiori?

SAP Fiori design language

The SAP Fiori design system is built on a standardized design language that has five core principles:

1. Role-based. Fiori apps are designed around the needs and workflows of specific job roles. In SAP, job roles define what a user can see and do in the system.
2. Responsive. Fiori apps use responsive design grids to ensure that apps automatically adapt to different screen sizes and orientations.
3. Simple. Fiori apps have a narrow focus, which can make the codebase smaller and easier to manage.
4. Coherent. Users can predict how to interact with a new Fiori app because it has the same look and feel as other Fiori apps.
5. Delightful. UX for Fiori apps should surprise and delight the end user.

It should be noted that AI is increasingly being used to support and enhance each of the five principles of the SAP Fiori design language. For example, AI can help personalize role assignments by analyzing historical user behavior and making predictions about future behavior. It can also support responsive design strategies by automating rules-based decisions and ensure simplicity and coherence by hiding irrelevant options. Arguably, conversational AI can also make UX delightful by minimizing the need for users to navigate hierarchical menus.

Fiori UI components

Fiori UI components are designed to be modular, responsive and reusable. Instead of creating UI elements from scratch each time, developers can assemble apps using prebuilt components that look and behave the same way across all apps. When UI components are modular, updates or bug fixes can be applied to a single component, and all apps that use the component receive the updated version. This simplifies version control and quality assurance (QA) testing.

Here is a list of popular UI elements that are often reused in the SAP Fiori design system:

• Buttons trigger actions or navigation.
• Input fields accept user-entered data.
• Tables display and manage structured data.
• Lists present related data or actions in a vertical format.
• Forms group input fields for data entry.
• Cards display summary information.
• Tiles provide app shortcuts on a Fiori launchpad.
• Dialog boxes display warnings or other types of messages.
• Breadcrumbs and navigation bars help users understand their logical location and move through app hierarchies.
• Micro charts provide small visualizations embedded within tables or cards.
• Icons and avatars visually represent actions, users or categories.
• Content templates provide predefined layouts that structure data or workflows.
• Charts and other types of visualizations present complex data patterns in easy-to-understand formats.
• Search and filter controls enable enterprise-level data discovery.
• Progress indicators and gauges communicate task or process status.

Fiori development frameworks

SAP Fiori development relies on a set of well-established frameworks and tools designed to help developers build modern, consistent and scalable enterprise applications. The following are the primary frameworks used in Fiori development.

SAPUI5

SAP UI for HTML5 (SAPUI5) is the core web application framework that powers most SAP Fiori apps. SAPUI5 is a JavaScript-based UI development toolkit that supports the creation of enterprise-grade web applications. The open source version of SAPUI5 is called OpenUI5. OpenU15 was released under an Apache 2.0 license and is available on GitHub.

SAP Fiori elements

SAP Fiori elements is a low-code enterprise development framework that is built on top of SAPUI5 and uses design templates called floorplans. Instead of coding every UI component manually, developers define app behavior using metadata extensions, and the framework automatically generates the front end.

SAP BAS

SAP Business Application Studio (BAS) is a cloud-based development environment that's optimized for SAP Fiori, SAPUI5 and full-stack app development on SAP Business Technology Platform (SAP BTP).

SAP BTP SDKs for Android and iOS

SAP provides native software development kits (SDKs) for Android and iOS. These SDKs follow the SAP Fiori design guidelines, while enabling native app development using Swift for iOS apps and Kotlin or Java for Android apps. BTP mobile apps offer prebuilt Fiori components and onboarding workflows, as well as integrated application programming interfaces (APIs) to back-end SAP Mobile Services.

SAP Fiori design guidelines

Fiori's design language, UI modules and development frameworks enable designers and developers to create SAP apps that behave in a consistent and predictable way. While Fiori design guidelines are primarily tailored to SAPUI5 and the SAP BTP SDKs for iOS and Android, the design strategies that support the guidelines can be adapted to other platforms as well. Essentially, they can be used for the following:

• Control the selection of visual design elements.
• Follow established interaction patterns.
• Maintain a cohesive and harmonized look and feel across all apps.
• Develop new applications and customize existing applications faster.
• Minimize the number of QA tests.
• Provide a common language and shared vocabulary for discussing application changes.

Fiori design guidelines are updated with every release of the SAPUI5 development framework. The latest version of the SAP Fiori guidelines, which was released in October 2024 as version 1.128, introduced several enhancements, including the following:

• Additional fonts and Web UI kits.
• Carousels that use responsive design.
• Removal of alternative text for noninformational images.
• A new color palette for popover components.
• Enhancements to the table toolbar in SAP Fiori elements templates.

Types of SAP Fiori apps

Fiori apps are typically categorized by whether their main function is transactional, analytical or informational. In planning meetings, the categorizations can help stakeholders quickly understand a specific app's purpose, for example:

• Transactional apps enable users to perform a business transaction, such as creating a purchase order or approving a vacation request. This type of Fiori app mirrors an existing business process and can run on any type of database -- unless the app is specifically designed for SAP S/4HANA's in-memory database.
• Analytical apps collect and display key performance indicators.
• Fact sheet apps display read-only information about customers, suppliers and other business objects. Fact sheet apps are commonly used to explore data in depth and often include navigation links to related transactional apps for follow-up actions.

SAP Fiori launchpad

An SAP Fiori launchpad is a web-based entry point that enables authorized users to access specific SAP Fiori apps and other SAP resources through a browser. Key features and functions of a Fiori launchpad include the following:

• Personalized homepage. Users only see the Fiori tiles, cards, links, spaces and pages that have been assigned to their roles. Fiori launchpad homepages can be personalized by rearranging apps or customizing spaces and pages within the SAP Fiori launchpad, version 3 and later.
• Search capability. Fiori launchpads' integrated enterprise search function lets users find apps, business objects and content across SAP systems.
• Single sign-on. Fiori launchpads support SSO and can integrate with identity and access management (IAM) software to streamline user access across systems.
• Overview page. In SAP Fiori, an overview page is a special type of app built using the SAP Fiori Elements framework. The main purpose of an overview page is to facilitate decision-making by surfacing the most important data without requiring the user to search through multiple apps or reports.
• Integration of multiple app types. Besides native Fiori apps, Fiori launchpads can also host SAP GUI transactions, Web Dynpro applications and custom-built apps. It should be noted that Web Dynpro apps and custom-built apps are often referred to as Fiori apps even if they are not issued by SAP and are not listed in SAP's Fiori Apps Reference Library. That's because, in everyday conversation, the term Fiori app often refers to any app that can be accessed from Fiori launchpads.

SAP launchpad vs. SAP Build Work Zone

SAP Build Work Zone is a cloud-based service that unifies access to SAP Fiori apps, SAP GUI transactions, custom apps, third-party tools and business content. Essentially, Build Work Zone is designed to improve productivity and user engagement by creating a personalized digital workspace that unifies access across SAP and third-party systems. In SAP BTP environments, SAP has positioned the standard edition of Build Work Zone as the successor to SAP Fiori launchpads.

Benefits of SAP Fiori

SAP Fiori offers a wide range of benefits that can simplify and personalize SAP app development and deployment. From a business perspective, SAP Fiori can improve productivity and enable better decision-making by providing users with intuitive, role-based applications that streamline workflows and surface important data points. From a technical perspective, development tools, like SAP Fiori elements, enable development teams to accelerate development and deployment by using low-code software development templates to enforce design consistency, reduce manual coding and simplify integration with back-end services.

Another benefit is that Fiori's alignment with SAP's Intelligent Enterprise strategy makes it easier for organizations to embed AI-driven recommendation engines and predictive modeling capabilities directly into business processes. For example, a procurement specialist using a Fiori app might receive real-time suggestions for alternative suppliers based on delivery performance data.

Key features of SAP Fiori

To fully appreciate the benefits that SAP Fiori provides, it can be useful to examine the design system's key features in greater detail:

• Reusable UI components speed up development time and ensure more consistent UX.
• The consistent UIs that Fiori apps provide can reduce the learning curve for new SAP apps and users.
• Role-based access helps ensure that users aren't distracted by irrelevant apps or data.
• Responsive design guidelines enable Fiori apps to automatically adjust layouts to accommodate different screen sizes.
• Launchpads' homepages provides a single, personalized entry point to all assigned SAP applications and tools.
• Fiori apps can connect to back-end SAP systems, like SAP S/4HANA through Open Data Protocol (OData) services.
• Overview pages can consolidate data from various sources and help users monitor key metrics from one dashboard.
• Fiori's enterprise search capabilities help users find apps, business objects and content across connected SAP systems faster.

SAP BTP SDKs for Android and iOS

SAP provides SDKs for building native Android and iOS apps under the SAP BTP umbrella. This helps simplify the development, configuration and management of native and micro mobile apps for both Android and iOS. The Android SDK, which is officially known as SAP BTP SDK for Android, includes the following:

• Prebuilt design components based on the SAP Fiori design language for Android OS.
• UI elements that align Google's Material Design guidelines with SAP Fiori guidelines.
• SAP BTP SDK Wizard for Android, a plugin for Android Studio that simplifies app scaffolding and setup.
• Comprehensive APIs for accessing SAP data services and back-end systems.
• Offline and online OData support through an object-oriented data service layer.
• Integration with SAP Mobile Services to handle push notifications, logging and analytics.
• Extensive documentation and sample apps to accelerate development and adoption.
• Security and onboarding tools, including authentication, secure storage and session management.

The iOS SDK, officially known as SAP BTP SDK for iOS, is a comprehensive toolkit for building enterprise-grade, native iOS apps for iPhone, iPad and Mac using the Swift programming language. Built on the SAP Fiori design language, the iOS SDK includes reusable UI components that extend standard iOS frameworks and help ensure consistency with SAP applications. It also provides APIs for seamless integration with SAP systems through SAP BTP services.

SAP BTP SDK for iOS includes the following:

• Prebuilt design components and modular frameworks based on the SAP Fiori for iOS design language.
• An extensible and configurable UI library for building consistent, native experiences.
• A UI kit that implements the SAP Fiori design language in full compliance with Apple's Human Interface Guidelines.
• A Swift-based API for integration into Apple's Xcode integrated development environment.
• The SAP BTP SDK Assistant for iOS, which helps developers bootstrap iOS apps.
• An API that supports both online and offline access to SAP back-end data services.

Role-based design and security features

The SAP Fiori design system emphasizes the importance of role-based access. Once a user is assigned a role, they automatically gain access to relevant apps, data and tools in their SAP Fiori launchpad. Behind the scenes, role-based access control is implemented through roles that are mapped to business catalogs and catalogs that define which apps are assigned to the user's launchpad.

In addition to supporting role-based access, SAP Fiori also delivers extensive security features through the SAP BTP SDKs for Android and iOS. Both SDKs have a foundation layer that provides essential enterprise-grade security services, such as encryption, secure storage and integration with IAM systems. These built-in capabilities help ensure that SAP Fiori apps meet stringent security requirements, while simplifying the mobile app development process.

Implementing Fiori apps

SAP provides extensive documentation for the Fiori design system, and its detailed guidelines describe how Fiori apps should look and behave from the user's perspective. While SAP recommends using technologies like SAPUI5 and Fiori elements to develop and implement Fiori apps, organizations technically have the flexibility to implement Fiori-like UX using other front-end frameworks, such as Angular or React.

Angular and React are two of the most popular JavaScript frameworks and libraries for building interactive web applications. Angular is good for large-scale enterprise applications where structure and consistency are important. React is ideal for dynamic, high-performance apps that have frequent user interactions.

SAP Fiori Cloud for SAP S/4HANA

SAP Fiori Cloud for SAP S/4HANA was a cloud-based subscription service that allowed customers to run SAP Fiori's front end -- the UI layer -- in the cloud, while keeping the SAP S/4HANA back end -- the business logic and data -- on-premises. This hybrid model was designed to simplify Fiori app delivery by offloading the UI layer to the cloud, where updates could be managed more efficiently.

SAP Fiori Cloud is currently being phased out as SAP consolidates its cloud-based UX services. Organizations running SAP S/4HANA -- on-premises or cloud -- are encouraged to use SAP BTP and Build Work Zone services to personalize UX going forward.

Transitioning to SAP S/4HANA carries risks but provides a valuable chance for digital transformation. Explore key insights and best practices for SAP S/HANA migration success. Also, check out our short guide to primary SAP S/4HANA modules and lines of business, and read about some real-world S/4HANA deployment experiences.