Updated: December 15, 2021

SAPUI5 Version 1.86

Get Started

SAP Fiori

What is SAP Fiori?

Learn about the new user experience for SAP software.

Introduction to the SAP Fiori Design Guidelines

Find out how the SAP Fiori design guidelines are used and learn about the benefits.

Best Practices for Designing SAP Fiori Apps

The must-know essentials for anyone designing SAP Fiori apps.

Foundation

Design Principles

Learn about the five core principles that make up the design philosophy of SAP Fiori.

SAP Fiori Design-Led Development Process

Get to know the SAP Fiori design-led development process.

Responsiveness

SAP Fiori apps work on a multitude of devices. Check out SAP Fiori's focus on responsive and adaptive design.

Theming

SAP Fiori user interfaces are constructed using SAPUI5 control sets that are meticulously styled with CSS.

Accessibility in SAP Fiori

Learn how SAP Fiori supports you in designing accessible products.

Designing Intelligent Systems

Situation Handling

Help users identify critical business situations in context as they work.

Explainable AI

Make the underlying logic of your intelligent algorithms transparent using progressive disclosure techniques.

Matching

Help users match related objects using AI methods and ranked proposals.

Ranking

Simplify complex decisions for business users by showing the best options first.

Recommendations

Help users by recommending appropriate content or suggesting an action or input.

General Concepts

SAP Fiori Launchpad

The SAP Fiori launchpad is the main entry point to SAP Fiori apps on mobile and desktop devices.

Draft Handling

Learn about the draftling handling concept of SAP Fiori, including auto-save, locking, and data loss prevention.

Navigation

Navigation in SAP Fiori follows the standard navigation paradigms of various web applications.

Manage Objects

Find out about the different interaction flows for managing objects, including create, edit, and delete.

Message Handling

Find out how to display messages to the user such as errors, warnings, success messages, confirmation, and information.

Layouts, Floorplans & Frameworks

Page Layouts

Most app designs are based on one of these basic page layouts, which can be used with a range of different floorplans.

Dynamic Page Layout

Dynamic Page – Semantic Page

Flexible Column Layout

Floorplan is an umbrella term that covers the different layout types, the structure of the controls used, and how to handle different use cases. An application contains normally several pages, with each page showing a single floorplan.

Analytical List Page

Initial Page

List Report

Multi-Instance Handling

SAP Fiori Elements

SAP Fiori elements provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns. They ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of frontend code for building SAP Fiori apps.