SAPUI5 is a user interface development toolkit. First developed by SAP in 2010 under the code name Phoenix, the framework allows developers to create web applications for HTML5.
Table of Contents
SAPUI5 allows users to consume data from any service. It uses the model-view-controller (MVC) development concept, which consists of a three-part application: models, which contain data; views, which represent the data and the UI; and controllers, which handle the data and user interaction.
Models are containers for data and hold all the business data an application will work with. There are a handful of pre-defined model classes available in SAPUI5, including JSON and resource models.
Views are the front-end display of data by an application. Because this is the portion of the app that end-users work with, it’s important to incorporate design thinking and UI best practices when developing views.
Controllers implements the logic that bridges Models and Views.
Controls are the decision-makers in a line of code. Sometimes called widgets, components, or elements, they tell the app what to do whenever a choice has to be made. Currently, more than 200 controls exist with more in development.
Controls are accessible to developers via numerous libraries. Here’s a brief overview of key libraries and what they allow:
With the architecture of an SAPUI5 application in mind, here are features of SAPUI5 that make it an attractive framework for developers:
SAPUI5 allows developers to write code that can be accessed by all users with tools such as screen readers.
SAPUI5 is responsive to a number of factors, including device type, OS, browser, screen size, and more. Developers can create applications that automatically adapt to portrait or landscape views and adjust controls as necessary to maintain a pleasant UX.
SAPUI5 apps can be created to detect where a user is accessing it, and adapt data such as dates, currency, etc. in the local convention. Furthermore, if provided with a language translation of the content, apps will automatically translate it to the relevant language.
SAPUI5 is compatible with multiple open source technologies, including the jQuery framework, datajs library for connecting with OData, and the Handlebars templating language. The open source version of UI5 is called OpenUI5.
SAPUI5 allows developers to customize the look and feel of apps to meet client needs via a tool called the UI Theme Designer.
Extensive documentation for individual components is available at the SAPUI5 Software Development Kit. In addition, the SAP Fiori Design Guidelines show how the different components can best be used and combined to create the application types described below.
The UI5 Web Components toolkit allows developers to use predesigned SAP Fiori elements in their applications regardless of framework.
SAPUI5 is the basis for many of the applications in the current SAP ecosystem. As SAP S/4HANA matured in the mid-2010s, a new user interface called SAP Fiori emerged as the primary UI for those using SAP. With SAPUI5, developers can create and debug (using both SAP offerings and Google Chrome Developer Tools) all three different types of SAP Fiori apps:
Transactional apps perform activities such as creating, changing, and approving requests or orders via guided navigation.
Fact sheet apps are used to view essential contextual information or a 360-degree view of specific central objects used in business operations.
Analytical apps provide users with business information and have the ability to analyze and evaluate strategic or operational KPIs in real time.
SAPUI5 is constantly being retooled and updated by a worldwide team of developers working as part of the UI5 Evolution project. Under the team’s guidance, the current framework of SAPUI5 has evolved to orbit around four key areas: a modular core, rendering and controls, programming models, and build tooling.
The modular core of SAPUI5 reduces code down to a compact foundation. This not only streamlines and allows for more-organized code, but the code reduction makes apps more lightweight and therefore quicker for the user.
By making rendering and controls as small as possible while maintaining UI functionality, developers can reduce application complexity and make the framework faster.
As SAPUI5’s programming model has been updated, it can be used alongside other frameworks such as Angular or React.
The latest advancement of build tooling for SAPUI5 is compatible with Node.js, allowing developers to use SAPUI5 alongside the platform. Available build tooling packages include ui5-logger, ui5-fs, ui5-builder, ui5-project, ui5-server, and ui5-cli.
In 2013, SAP released a non-native version of SAPUI5 for developers who don’t work on SAP projects. Called OpenUI5, it is available under an Apache 2.0 license. It shares a code base with SAPUI5, so the framework is updated alongside its SAP sibling.
Versions of SAPUI5 and OpenUI5 are released on a monthly basis for SAP Business Technology Platform and biannual basis for AS ABAP. They follow the following format: {major release number.patch version}. For example, version 1.68.1 indicates the major release number of 1.68 on its first patch.
Public-facing releases are always even-numbered, while internal releases for SAP are odd-numbered.
SAP offers tools to foster quality in UI5 developments:
While we’ve laid out many of the important terminology you’ll run into when working with SAPUI5, there are a handful more that will be helpful to you.
Learn more SAP from our official Learning Center.
And to continue learning even more about SAPUI5, sign up for our weekly blog recap here:
On our website, we use cookies that enable certain website functionalities (such as the shopping cart), and cookies that help us improve your user experience and our service offerings. By clicking Agree and Continue, you confirm that you are at least 16 years old and that you give Rheinwerk Publishing and its third-party providers consent to set these cookies, and to process the respective personal information regarding your website visit. You can also make individual choices and select which cookies you allow. By clicking Decline, you decline all cookies that are not necessary for the full website functionality. You can withdraw, review, and change your consent at any time by clicking on the link „Change Privacy Options“ in the website footer. You can find more information in our privacy policy.
Name | Technology | Collected Data | Retention Period | Purpose |
---|---|---|---|---|
csrftoken | Cookie | UUID | 364 days | Security token for transmitting forms |
inc_sessionid | Cookie | UUID | 28 days | Cookie for log in and shopping carts |
bo_sessionid | Cookie | UUID | Session | Cookie for log in |
oscar_open_basket | Cookie | Integer (Basket-ID) + Hash | 7 days | Cookie for shopping carts |
list_style | Cookie | String | Session | Storage of layouts selected |
bg_consent | Cookie | true/false | 180 days | Consent Microsoft Advertising ("Bing") |
ga_consent | Cookie | true/false | 180 days | Consent Google Analytics |
gt_consent | Cookie | true/false | 180 days | Consent Google Ads Tags |
hj_consent | Cookie | true/false | 180 days | Consent Hotjar |
hs_consent | Cookie | true/false | 180 days | Consent HubSpot |
sa_consent | Cookie | true/false | 180 days | Consent ShareASale |
ws_consent | Cookie | true/false | 180 days | Consent necessary website functionality |
yt_consent | Cookie | true/false | 180 days | Consent YouTube |