Get Started

SAP Fiori

What is SAP Fiori?

Learn about the new user experience for SAP software.

A Beginner's Guide to the SAP Fiori Design Guidelines

Your brief introduction to everything you need to know about working with the guidelines.

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.

Mobile First

Discover the benefits of putting mobile scenarios at the center of SAP Fiori design.

Theming

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

Learn More

To learn more, check out the foundation category in the navigation menu on the left.

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.

Learn More

To learn more, check out the general concepts category in the navigation menu on the left.

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.