As customers increasingly adopt SAP Fiori apps, the topic of SAPUI5 comes up frequently. While React and Angular are fairly well understood, there is still some awareness lacking when it comes to SAPUI5. So, in this blog, we aim to demystify SAPUI5 based on our customer app development experience as well as information gleaned from ASUG sessions.
SAP SAPUI5 is an HTML5 framework for creating cross-platform, enterprise-grade web applications efficiently. It is a single app implementation for all browsers, platforms, and devices. It is used in various SAP products including SAP Fiori and S/4HANA.
As the reference UI technology for the SAP Fiori user experience, SAPUI5 provides:
- SAPUI5 Flexibility: SAPUI5 flexibility provides an easy and cost-effective way to extend apps to deliver a tailored experience to users. Adapting standard applications for specific use cases is more efficient in contrast to building custom UIs from scratch.
- Adaptation/Layering of Changes: There are 3 roles including Developer, Key User, End User that allows the adaptation of the standard apps. Customers can develop ‘standard’ apps and let their key users adapt these apps for individual LoBs/ teams. Adaptation projects allow a developer to create variants of existing applications.
- UI5 Web Components: These deliver SAP Fiori 3 design, enterprise-grade stability, accessibility, internationalization, and themes. They provide reusable controls without the full SAPUI5 framework, and in fact complement SAPUI5.
- Integration cards: These expose application content in a consistent and unified way.
- Smart Controls: These are the foundation of SAP Fiori Elements making UI development fast and easy with reduced TCO. Included are Metadata-driven ‘smart’ controls like the smart table and the smart filter bar.
- SAP Business Application Studio (BAS): BAS is the development environment for SAP Fiori/UI5 apps and is part of the SA{ Business Technology Platform (BTP).
Various resources can be accessed using the following links:
OpenUI5 is the open-source SAPUI5
Developing Web Apps with SAPUI5 | openSAP
Developing and Extending SAP Fiori Elements Apps | openSAP
Training: SAP Fiori Overview: Design, Develop and Deploy | openSAP
Pl. feel free to email us at sales@unvired.com or contact us here if you would like to discuss this topic.
Frequently Asked Questions
What is SAPUI5 used for?
SAPUI5 is a JavaScript library used for building web applications. It is part of the SAP Fiori product, a collection of design guidelines and technologies for creating user-friendly, modern web applications. SAPUI5 provides pre-built UI controls, a robust data model, and a flexible architecture for building and maintaining web apps. It is commonly used in enterprise environments for creating business-critical applications such as financial, logistics, and human resources management systems.
What is the difference between SAP Fiori and SAPUI5?
SAP Fiori is a collection of design guidelines and technologies for creating user-friendly, modern web applications. It includes a set of pre-built apps and a design system to create business-critical applications quickly. SAPUI5 is the development toolkit used to build these web applications. It is a JavaScript library that provides pre-built UI controls, a robust data model, and a flexible architecture for building and maintaining web apps. In short, SAP Fiori is a user interface design system, and SAPUI5 is a development toolkit for building web apps that follow SAP Fiori design principles.
What are the lifecycle methods of SAPUI5?
SAPUI5 provides a set of lifecycle methods called at specific points during the lifetime of a control, such as when initialized, rendered, or destroyed. These methods allow developers to perform particular actions at these points and include:
init()
onBeforeRendering()
onAfterRendering()
exit()
onBeforeExit()
onAfterExit()
onBeforeRendering()
onAfterRendering()
onPress()
onExit()
Some of these methods are mandatory, and some are optional; developers can choose to implement the ones they need based on their use case.
