SAPUI5
This specialist article describes what is behind SAPUI5, how the framework works and the advantages it provides. UI5 is a central UI development toolkit used by SAP for modern business applications, in particular for the implementation of Fiori user interfaces.
Solution Architect
What is UI5?
UI5 (the general short form) is the current user interface development toolkit for developing applications according to advanced Web standards (HTML5, JavaScript, CSS).
Broadly speaking, it is a JavaScript-based framework consisting of libraries with numerous predefined UI elements (buttons, tables, entry fields etc.) and development tools. UI5 is used to develop intuitive and visually appealing user interfaces without having to start “from scratch”. This applies to applications both on mobile devices and desktop systems.
SAPUI5 is above all used for the development of SAP Fiori apps, an advanced and role-based SAP UI, i.e. user interface, with simple operating concept. However, the UI5 framework is not only used in a Fiori environment: developers use it for individual Web applications based on jQuery and open standards, such as HTML5 and JavaScript.
For UI5, SAP provides a comprehensive SDK (Software Development Kit) with documentations, examples and tutorials where developers find any required information concerning UI5 components and programming models. This enormously facilitates the first steps and the answering of questions arising in the course of development. Since its implementation in 2013, SAPUI5 has established itself as a widely spread SAP user interface technology and is today a central component of the SAP strategy for a modern user interface.
How does SAPUI5 work?
SAPUI5 applications are based on a client-side architecture model: The app (consisting of HTML5/JS/CSS code) is downloaded from the server to the Web browser of the user and runs completely there.
During the call, the browser loads the UI5 libraries and the application code from the server – according to the scenario, these can be found, for instance, on an SAP NetWeaver server, in SAP Business Technology Platform or on a corporate Web server. In the browser, the defined views will then be rendered (e.g. as HTML5 contents) and a model initialized to provide business data from the back end.
Typically, the data exchange between the UI5 app in the browser and the back end takes place via OData services (the SAP standard version for RESTful services) or comparable logs. This architecture makes SAPUI5 apps very efficient and fast as only data (e.g. in the JSON or XML format) and not complete HTML pages are exchanged once the application has been initialized.
SAPUI5 supports different data formats and services out of the box.
Besides the SAP-typical OData standard version, it is also possible to connect, for instance, JSON files, XML data services and other formats as data source. Through the bilateral data binding installed, changes are either sent immediately to the back end or held locally according to the model type (OData for server-side data retention, JSON/XML for client-side data retention).
What is the difference between SAPUI5 and SAP Fiori?
SAPUI5 and SAP Fiori are often called in the same breath. However, they mean different things. SAP Fiori describes the user interface design and the interactive user guide, whereas SAPUI5 is the framework used to technically implement these user interfaces. Fiori defines the “What” and SAPUI5 provides the “How”.
SAP Fiori
More precisely, Fiori is the design concept and the user interface strategy by SAP implemented in 2013 to make SAP applications in enterprises more standardized, easier and more personalized. SAP Fiori comprises design guidelines (e.g. how user interfaces are to look like and behave) and over 1,000 standard apps for implementing these design principles. This means that Fiori can be understood as the new generation of SAP user interfaces aiming at high usability and cross device use.
SAPUI5
UI5, however, is the technical basis used to implement these Fiori user interfaces. As described above, this is the development toolkit by SAP used by developers to develop Fiori apps. Broadly speaking: Fiori defines how a modern SAP app must look like and feel and SAPUI5 provides the technical means for implementing this app. Consequently, SAPUI5 is the prerequisite for SAP Fiori applications.
In practice, this means that all Fiori apps (both the standard apps provided by SAP and individual developments) are built with SAPUI5.
What is the difference between SAPUI5 and OpenUI5?
SAP offers its UI toolkit in two variants: SAPUI5 and OpenUI5.
OpenUI5 is the open source variant of the SAPUI5 framework. Technically, both are based on the same kernel and have the same development status: OpenUI5 was released at the end of 2013 under the Apache 2.0 open source license. Developers can use OpenUI5 – exactly like SAPUI5 – to create business applications irrespective of the operating system.
A comparison between SAPUI5 and OpenUI5:
|
Criterion |
SAPUI5 (SAP-internal) |
OpenUI5 (open source) |
|---|---|---|
|
Availability |
Only for SAP customers (in the SAP system or via download) |
Freely available for all (e.g. via GitHub/CDN) |
|
Licensing |
Proprietary (license via SAP software, e.g. S/4HANA) |
Apache 2.0 Open Source license |
|
Functional scope |
All core functions + some UI components (SAP-specific) |
All core functions of the framework (no SAP amendment) |
|
Support & updates |
Through SAP (incl. maintenance, patches, bug fixes) |
Through Community / SAP (same core status but with Community enhancements) |
|
Purpose |
For productive SAP solutions with full SAP support |
For open development, tests, contributions, use not bound to SAP |
The main difference between SAPUI5 and OpenUI5 lies in licensing and delivery scope: As an open source variant, OpenUI5 is freely accessible, e.g. via GitHub, whereas SAPUI5 is only available for SAP customers in the context of SAP products, such as SAP Business Technology Platform. Both variants are based on the same technical core and include all core functions as well as the standard UI components. However, SAPUI5 in addition offers some proprietary controls that are missing in the open source version. This concerns mostly specific operating elements that are not mandatory for standard applications.
Both development toolkits enable the development of modern and browser-based user interfaces based on HTML5, JavaScript and CSS3. Those who wish to develop irrespective of SAP products can start with OpenUI5 – the basic structure of functions is identical. The use of SAPUI5 is recommended for SAP customers as it is already integrated in many products.
What benefits are provided by SAPUI5?
Compared to previous SAP user interfaces (such as the classical SAP GUI one), the implementation of Fiori provided numerous benefits. Overview of the most important advantages:
SAPUI5 applications are based on the Fiori design guidelines and modern UX principles. This ensures intuitive operability, standardized user interfaces and short initial job trainings for users – also without long training courses.
Web applications created via SAPUI5 adapt automatically to different screen sizes and terminals and guarantee a consistent operation on all devices from desktop computer to smartphone. One user interface for all devices.
SAPUI5 enables the flexible adjustment of contents, layouts and logics, which makes it ideal for mapping individual corporate processes. The classical SAP GUI application is thereby replaced.
The framework is based on open Web standards (HTML5, JavaScript, CSS3) and supports the connection to OData services, REST APIs and other data sources. Components of third-party providers can be integrated easily as well.
Reusable UI elements and predefined component bundles accelerate application development. Lower training and support efforts due to intuitive operating concepts reduce the operating costs for companies.
SAPUI5 is the strategic UI framework by SAP – in particular for SAP S/4HANA and Fiori. It remains open and flexible through the OpenUI5 open source variant. SAP continuously invests in further development.
How are SAPUI5 applications developed?
The development of an SAPUI5 app requires skills in Web technologies (especially JavaScript) and a basic understanding of the SAPUI5 framework (structure of an UI5 app, MVC pattern, OData connection etc.). It is an advantage that SAPUI5 is easy to learn for developers with Web experience as the concepts correspond to standard Web patterns and SAP provides many templates and tools. Here are the most important points for the access to the UI5 development:
Development toolkit (Business Application Studio & Visual Studio Code)
For SAPUI5 application development, SAP recommends the cloud-based Business Application Studio (BAS) solution on SAP Business Technology Platform. The environment includes all necessary tools for UI5 development and can directly be integrated into SAP systems. Alternatively, the Visual Studio Code solution and the SAP Fiori tools plug-in can be used locally. Both variants support project templates, debugging, code completion and deployment.
Project creation and framework
Usually, new SAPUI5 applications are created with templates in the Business Application Studio solution or via Easy UI5 Generator. The structure is based on the MVC framework (Model View Controller) with view files (XM/HTML), controllers (JavaScript) and data integration models. The MVC model enables the separation of data logic and design. Developers refer to predefined UI components such as sap.m or extend the framework by individual elements.
Data connection
In SAP scenarios, OData services are often used to integrate business data provided, for instance, via SAP Gateway. The OData model is integrated in the front end and the logic defined in the back end (often in ABAP). In addition to OData, JSON, REST or XML can also be used as data sources. The use of an SAP back end is optional.
Utilities and documentation
The official SAPUI5 SDK includes comprehensive documentation, the UI5 demo kit with API reference, sample applications and Best Practices and provides developers precious support in the field of SAP front end development. Additional contents and experiences can be called via SAP Community or partner blogs, which is ideal for getting started and finding quick answers to typical questions.
Conclusion
In conclusion, SAPUI5 is an UI framework that plays a central role in the SAP ecosystem. It is therefore an indispensable tool for the digital transformation of SAP systems. For developers, this means: relying on SAPUI5 (and Fiori) today will be an investment in advanced user experience and technologies that are actively developed further and supported by SAP.
