SAPUI5
SAPUI5 is SAP's enterprise JavaScript UI framework for building SAP Fiori apps that run in the browser, using a model-view-controller structure and data binding to OData services. SAPUI5 is the SAP-licensed distribution of the same core as open-source OpenUI5, plus additional libraries, such as charts and annotation-driven smart controls, that ship only with SAP products.
Quick facts
- Type
- JavaScript UI framework (MVC, data binding, control libraries)
- Layer
- UI applications
- Delivered with
- SAP BTP (content delivery network), ABAP platform / SAP Fiori front-end server, SAP S/4HANA Cloud
- Open-source core
- OpenUI5 (Apache 2.0 license)
- Release rhythm
- Monthly minor versions on SAP BTP; long-term maintenance versions for on-premise front-end servers
- Who works with it
- SAP Fiori developers, UI architects, basis teams planning upgrades
- Applies to
- SAP S/4HANA (all deployment options), SAP BTP
Layer: UI applicationsWhere it sits ▾
Layer: UI applications
Open the architecture map →How does SAPUI5 work?
An SAPUI5 app is a set of files that the browser loads and runs. The main building blocks are:
- Component — the app's entry point, which the SAP Fiori Launchpad or another container instantiates.
- App descriptor (manifest.json) — declares data sources, models, routing, dependencies and navigation inbounds.
- Views — usually XML, declaring which controls appear on screen, mostly from libraries such as
sap.m. - Controllers — JavaScript or TypeScript code that reacts to user events.
- Models — OData V2 or V4 models for backend data, JSON models for local state, resource models for translated texts.
Data binding connects controls to model properties, so a field updates when the data changes without hand-written plumbing. Themes such as SAP Horizon style every control consistently. SAPUI5 is therefore an application framework, not just a widget library: it prescribes how an app is structured, loaded and connected to data.
Where does SAPUI5 sit in the SAP Fiori architecture?
SAPUI5 runs in the UI applications layer, inside the user's browser. Above it, the SAP Fiori Launchpad or SAP Build Work Zone provides the shell, navigation and roles. Below it, OData services built with the ABAP RESTful application programming model, SAP Gateway or other backends deliver the data and enforce business rules.
Both main development approaches produce SAPUI5 apps. SAP Fiori elements generates the UI at runtime from OData annotations, using SAPUI5 controls underneath. A freestyle SAPUI5 app is written by hand with the same controls. The SAP Fiori Design Guidelines describe the intended user experience; SAPUI5 is one of the technologies that implements it in code. SAPUI5 is the common runtime underneath both SAP Fiori elements apps and freestyle apps, whichever way the app was built.
How is SAPUI5 different from OpenUI5?
The main difference is the license. OpenUI5 is open source under the Apache 2.0 license and developed publicly on GitHub. SAPUI5 is delivered as part of SAP products such as SAP BTP and the ABAP platform.
The core runtime and the most used control libraries, for example sap.m, sap.ui.layout and sap.ui.unified, are identical in both. SAPUI5 adds further libraries: charts (sap.viz, sap.chart, sap.suite.ui.microchart), smart controls that configure themselves from OData annotations (sap.ui.comp), SAP Fiori elements (sap.fe) and the launchpad shell (sap.ushell). The list changes per release; in SAPUI5 1.154, no library ships only with OpenUI5. Technical names and APIs are shared, so code written for OpenUI5 runs on SAPUI5 when the runtime is switched. Version numbers can differ at patch level, because the SAPUI5 distribution bundles an OpenUI5 core.
For teams building on SAP products, SAPUI5 is the relevant distribution; OpenUI5 matters for open-source tooling and for apps that must run without an SAP license.
Which SAPUI5 version does your system run?
The answer depends on the deployment option:
- SAP BTP: SAP describes SAP BTP as the primary channel for SAPUI5. Several versions are available on the content delivery network, and each app chooses its version when it bootstraps. New minor versions appear roughly monthly, and versions are removed from the network at the latest one year after their release; check the version overview for the status of long-term maintenance versions.
- On-premise and Private Edition: SAPUI5 ships with the UI technology component of the ABAP platform. Each SAP Fiori front-end server release brings one long-term maintenance version; for example, front-end server 2023 corresponds to SAPUI5 1.120 and front-end server 2025 to SAPUI5 1.136.
- SAP S/4HANA Cloud Public Edition: SAPUI5 comes with the product, and its maintenance follows the product's documentation rather than the SAP BTP strategy.
Decision criterion: develop and test against the lowest SAPUI5 version among the systems the app will run on. The technical information dialog (Ctrl+Alt+Shift+P) shows the version actually loaded. Knowing the SAPUI5 version is the first step in every compatibility question.
What are common mistakes with SAPUI5?
- Building against a newer version than production runs. A feature available on SAP BTP may not exist in the on-premise front-end server. Check the version overview before using a new control or API.
- Relying on deprecated APIs. Synchronous loading and other legacy patterns still work but are deprecated; SAP's modernization guide lists their replacements, and the UI5 linter detects them.
- Pinning SAP BTP apps and forgetting them. An app tied to a version that leaves the content delivery network stops loading. Schedule version upgrades like any other maintenance task.
- Hard-coding texts. Labels belong in resource models, otherwise translation becomes a code change.
- Writing everything freestyle by habit. SAP's own guidance recommends SAP Fiori elements wherever a floorplan fits and freestyle code where it does not.
Most SAPUI5 problems are lifecycle problems — versions, deprecations and ownership — rather than coding problems.
SAPUI5 vs. SAP Fiori Design Guidelines vs. UI5 Web Components: what is the difference?
| SAPUI5 | SAP Fiori Design Guidelines | UI5 Web Components | |
|---|---|---|---|
| What it is | Application framework with controls, models and routing | Design-system documentation: principles, floorplans, patterns | Framework-independent web components with SAP Fiori styling |
| Question it answers | How is the app built and run? | How should the app look and behave? | How do I use SAP Fiori controls in another web framework? |
| Who uses it | SAP Fiori developers | UX designers, product owners, developers | Web developers using standard HTML or other JavaScript frameworks |
| Typical use | Freestyle and SAP Fiori elements apps in SAP S/4HANA and SAP BTP | Design reviews and app specifications | Web apps outside the SAPUI5 programming model that should look like SAP Fiori |
SAPUI5 implements the experience the SAP Fiori Design Guidelines describe, while UI5 Web Components offer the same visual language without the SAPUI5 application framework.
FAQ
Is SAPUI5 free to use?
SAPUI5 is licensed as part of SAP products such as SAP BTP and the ABAP platform, so its use is covered by those licenses. OpenUI5, which shares the same core and most common control libraries, is free and open source under the Apache 2.0 license.
Is SAPUI5 the same as SAP Fiori?
No. SAP Fiori is the user experience standard defined by the SAP Fiori Design Guidelines. SAPUI5 is the JavaScript framework most SAP Fiori web apps are built with. An SAPUI5 app is only an SAP Fiori app if it follows those guidelines.
Does SAP Fiori elements replace SAPUI5?
No. SAP Fiori elements is built on SAPUI5 and generates SAPUI5 user interfaces from OData annotations. Developers still need SAPUI5 knowledge for extensions, custom pages and any requirement the floorplans do not cover.
Can SAPUI5 apps be written in TypeScript?
Yes. SAPUI5 supports TypeScript development, and the SAPUI5 SDK includes TypeScript tutorials and type definitions. Controllers and custom controls can be written in TypeScript and are transpiled to JavaScript at build time.
How do I find out which SAPUI5 version an app uses?
Open the app and press Ctrl+Alt+Shift+P to show the technical information dialog, which lists the SAPUI5 version and the libraries loaded. For SAP BTP apps, the version is also set in the bootstrap configuration of the app.
Sources
- SAPUI5 SDK: SAPUI5 vs. OpenUI5
- SAPUI5 SDK: Versioning and maintenance of SAPUI5
- SAPUI5 version overview (maintenance status and front-end server mapping)
- SAPUI5 SDK: Developing apps with modern concepts — guidance for developers
- SAPUI5 version file: libraries delivered with the current SAPUI5 release
- Applies to
- SAP S/4HANA on-premise · SAP S/4HANA Cloud Private Edition · SAP S/4HANA Cloud Public Edition · SAP BTP
- Last reviewed