SAP Fiori, SAP Fiori Elements, and SAP UI5 are interconnected components within the SAP ecosystem, each playing a distinct yet crucial role in delivering a modern user experience for SAP applications.
SAPUI5
SAPUI5 (SAP User Interface 5) is a robust toolkit and framework for creating user interfaces, specifically HTML5 online applications. It can be seen as a set of JavaScript libraries that enable developers to build responsive web applications for various devices.
- Development Framework: It’s a framework for building web applications based on the Model-View-Controller (MVC) architecture, which separates the application’s logic (Model), presentation (View), and user interaction (Controller).
- Web Technologies: SAPUI5 applications are built using standard web technologies like HTML, CSS, and JavaScript. It is SAP’s proprietary development toolkit that also incorporates features from OpenUI5, a free open-source framework.
- Responsive Capabilities: SAPUI5 inherently supports responsive design, allowing applications to run on smartphones, tablets, and desktops with minimal adaptation effort.
SAP Fiori
SAP Fiori is fundamentally a design language and user experience (UX) approach developed by SAP for its business applications. It is not a technology itself, but rather a set of guidelines and criteria that dictate how an SAP application should look and behave in terms of user experience.
- Intuitive and Consistent UX: Its primary goal is to create an intuitive, easy-to-use, and consistent user interface across all SAP applications, reducing complexity and saving users time by eliminating the need to navigate through complex interfaces.
- Modernization: Fiori was developed to overcome the complexity of traditional SAP GUI (Graphical User Interface) transactions, providing a more pleasant and modern visual design.
- Role-Based: Fiori apps are designed to be role-based, meaning users like a sales manager will only see sales activities, simplifying their interaction with the system.
- Responsive Design: It ensures that applications are responsive across various devices (smartphones, tablets, PCs), adapting their user interface seamlessly, often referred to as “one code line for all screen sizes”.
- End Product: SAP Fiori can be thought of as the end product – a collection of smart apps.
- Why it emerged: SAP identified a global shift where users expect business interactions to be as simple and feature-rich as their personal applications (e.g., Amazon, Twitter). Fiori is SAP’s response to this demand for a “smart SAP”.
Fiori Elements
Fiori Elements is a framework provided by SAP that utilizes SAPUI5 and Core Data Services (CDS) Views to generate Fiori applications efficiently. It operates through templates (such as list report, worklist, overview page, analytical list page, and object page) that provide a fixed skeleton and automatically comply with the latest SAP Fiori design specifications.
- Development Knowledge: Developers need knowledge of annotations, specifically CDS (Core Data Services) UI annotations, rather than extensive web development knowledge. You can create apps with little knowledge of SAPUI5 development.
- Coding Effort: Fiori Elements boosts development efficiency by writing very little UI code or almost negligible UI code. The UI is auto-created by SAP based on annotations defined at the CDS level.
- Design Requirements: Fiori Elements applications use templates and adhere to SAP’s design guidelines.
- Templates: Fiori Elements leverages predefined templates or “floorplans” which provide a fixed skeleton for the application’s look and feel. And prioritizes efficiency and user experience.
- Built on SAPUI5: Fiori Elements is a framework provided by SAP that utilizes SAPUI5 and CDS Views to generate Fiori applications efficiently. While it minimizes direct UI5 coding, it still relies on the SAPUI5 framework underneath.
Conclusion
SAP Fiori is the design philosophy and user experience goal. SAP UI5 is the core technological toolkit used to build applications that embody the Fiori design principles. SAP Fiori Elements is a development framework that accelerates the creation of Fiori-compliant SAPUI5 applications by providing ready-to-use templates and relying heavily on metadata-driven development through annotations and CDS Views, minimizing manual UI coding and ensuring consistency.
Sources
Understanding SAP Fiori Architecture: A Guide to its Three Key Layers
SAPUI5 VS FIORI
Fiori 101
Design decision between sap fiori elements vs sap fiori freestyle app
