Your golden path to SAP Fiori Applications

SAP Fiori is the brand for SAP’s User Experience (UX) to ensure a seamless, consistent experience and common functions throughout the entire SAP ecosystem. It provides a modern, intuitive, and responsive design targeting enterprise-level applications. SAP Fiori apps can be run on both desktop and mobile devices and can be easily customized to meet specific business requirements.
When developing new applications, the objective is to adhere to this standard by building SAP Fiori applications according to the SAP Fiori Design Guidelines. There are various options available to achieve this. The best approach depends on the specific use case, and Syskoplan Reply can assist you with selecting the most suitable path. A detailed explanation of the possible solution approaches follows.

SAPUI5

SAPUI5 is a UI development library and framework for building enterprise-level web applications based on open web standards, including HTML5, CSS, and JavaScript. It is used to create user interfaces (UIs) for SAP Fiori applications. SAPUI5 provides a comprehensive set of UI controls and allows developers to build UIs with a consistent look and feel. It supports both desktop and mobile devices and offers a rich set of features for developing responsive, high-performance UIs. Deploying a SAPUI5 application to the SAP Business Technology Platform (BTP) is simple and the provisioning is possible via SAP Build Workzone. Furthermore, seamless integration with other SAP systems is achievable through OData/REST interfaces. APUI5 gives you the flexibility to create a tailored application that covers custom process flow, layout, backend connections, offline functionality, and more. This allows for easy customization to meet specific business needs. However, this increased flexibility brings with it the challenge of increased complexity, leading to higher development and maintenance costs. You are also responsible for keeping the application up-to-date concerning the evolving guidelines of SAPUI5 and SAP Fiori.

SAP Fiori Elements

SAP Fiori Elements is a UI development library of pre-configured templates or floorplans for building SAP Fiori applications. It enables developers to create SAP Fiori apps faster and with a consistent look and feel adhering to the latest SAP Fiori design guidelines. SAP Fiori Elements is built on top of SAPUI5 and SAP Web Components. Similar to SAPUI5 deployment to the SAP BTP is easy and the app can be provisioned via SAP Build Workzone. It provides a simplified low-code development experience, reducing the need for complex coding and increasing productivity. It comes with pre-built logic for application behavior, reducing the need for coding, or eliminating it altogether. The requirement for this is for the backend to provide data through an OData Service with annotations defining the data. With this setup, SAP Fiori Elements can dynamically generate the user interface from the metadata at runtime. The limitations of Fiori Elements come into play when the standard floorplans don’t align with business requirements. To maintain upgrade stability, Fiori Elements should only be enhanced through designated extension points. However, there is a risk that some requirements may not be attainable through the available extension API. Additionally, adding too many extensions to a Fiori Elements app may result in more development time than creating a custom SAPUI5 app.

SAP Web Components / UI5 Web Components

UI5 Web Components are a set of reusable, enterprise ready, open-source UI components. They can be used in form of a custom HTML tag to build web applications. The components are modular and can be easily reused and combined to fit specific business requirements. They follow the guidelines of SAP Fiori to provide a consistent look and feel across different applications. In addition, they are lightweight with minimal footprint as they allow you to only include the components necessary for your application. They work seamlessly with SAP BTP and any HTML-based UI framework, including Angular, React, UI5, and Vue. Furthermore are the UI5 Web Components increasingly reused in SAPUI5 itself during its evolution. SAP Web Components are powered by UI5 Web Components and bring together generic and business-specific components for specific business use cases. SAP has announced that SAP Web Components will be the standard for reusability across SAP solutions and offers enterprise support for them.

Architectural classification SAP Fiori technologies

In the following diagram, the individual technologies for creating SAP Fiori applications are classified architecturally.

Summary

SAP provides various options for building SAP Fiori applications to meet the needs of your SAP landscape. However, there is no one-size-fits-all solution. To determine the best approach, it is important to thoroughly evaluate your business and technical requirements. We from Syskoplan Reply are specialized in the field of UI/UX design as well as the development and integration of SAP Fiori Applications into SAP landscapes. Our expertise allows us to guide you in building new SAP Fiori applications and selecting the ideal solution that meets your requirements.