SAP Fiori – meaning ‘flowers’ in Italian – represents SAP’s intent to deliver consumer-grade user experience to our most broadly and frequently used business transactions. Delivered with a fresh and modern user interface, SAP Fiori apps adhere to a consistent and responsive design that allows users to seamlessly experience the apps across various interaction channels – desktop, tablet, and mobile. The apps follow a simple and intuitive interaction pattern that enables users to accomplish their tasks quickly and effortlessly.
SAP Fiori focuses on a simple and consistent user experience on many devices. This section introduces the design philosophy which all SAP Fiori apps are based on.
Additionally, a prototyping kit provides you with templates for various controls and patterns. Using those stencils allows you to easily create UI mock-ups in Microsoft PowerPoint.
From Transactions to Apps
Classical enterprise software is structured along transactions. The SAP Fiori design paradigm consciously breaks with the transactional approach. Instead, SAP Fiori is centered on people and their goals.
Learn how to design apps for SAP Fiori that are visually compelling while always deferring to the user’s context.
The user’s personal collection of Fiori apps is accessed via the Fiori Launchpad. Its main function is to contain the Homepage which groups and displays various tiles that not only function as entry points to the apps but also display selected app-specific data for immediate review. Launchpad also takes care of user identification (login/logout), navigation, and Global Search, which is located within the Shell Bar.
The App Framework describes the foundation of any SAP Fiori App. The basis of all apps is formed using the Page Header and the Footer Toolbar. The Page Header focuses on navigation services while the Footer Toolbar primarily contains all currently available actions. Those two patterns are part of every SAP Fiori app that is based on either the Master/Detail or the Full Screen template.
So, when creating a new SAP Fiori app, try use the Master/Detail or Full Screen template including the Page Header and Footer Toolbar as a base. Then you can add further UI elements such as Patterns and Controls to best support your future users.
Interaction design patterns are re-usable user interface objects that are somewhat more complex than simple controls. They describe recommended best practices for common use cases, and when followed throughout the design of your app, provide a consistent user experience across all SAP Fiori apps.
Date & Number Formats
SAP Jam Integration
In this section you will find recommended templates for different types of apps. Each template is designed with a specific use case in mind. For instance, a Process App guides users through a step-by-step procedure and allows jumping between all the required steps for process completion.
Most application types make use of either the Master/Detail or the Full Screen template. The only exceptions are the Fact Sheets and the News App.
The key capabilities of UI5 are:
- Rich control set including charts for all devices
- Application development environment for all platforms
- OData integration for timeless software
- Extensibility concepts for “custom controls”
- Modern theming and branding concepts
- Embraces “open source” framework(s) and web standards
- Targets developers with web development skills (HTML, CSS3, JS)
The benefits of UI5 are enormous: it provides business agility through the availability on any device and on any platform. Hence, user productivity and satisfaction are increased through flexibility, openness, and pixel perfect design.