What is SAPUI5?
SAPUI5 is a UI technology that provides everything you need to build enterprise-ready web apps. It comes with all main SAP platforms but can also be used outside the SAP ecosystem because a large part of SAPUI5 had been open sourced with OpenUI5.
Get to know SAPUI5/OpenUI5 and learn how you can build first-class web apps with it.
SAPUI5 is built up on the following principles:
Simple to use
Under the hood
Apps developed with SAPUI5 run in a browser on any device (mobile, tablet or desktop PC).
When users access an SAPUI5 app, a request is sent to the respective server to load the application into the browser. The view accesses the relevant libraries. Usually the model is also instantiated and business data is fetched from the database.
Depending on the environment in which SAPUI5 is used, the libraries or your applications can be stored, for example, on an SAP NetWeaver Application Server or an SAP HANA Cloud Platform, and business data can be accessed, for example, using the OData model through a SAP Gateway.
||In an ongoing approach, SAPUI5 controls aim to comply with various product standards such as screen reader support,
high-contrast theming and keyboard handling.
|Application Cache Buster
The Application Cache Buster (short AppCacheBuster) is similar to the Cache Buster but is used for application resources.
SAPUI5 supports the application cache buster on SAP NetWeaver AS for ABAP only.
||The app templates incorporate SAP’S latest recommendations and can be used for example as a starting point for developing apps according to the SAP Fiori design guidelines. They include generic application functionality and tests that can be easily extended with custom functionality if needed.
A cache buster allows SAPUI5 to notify the browser to refresh the resources only when the SAPUI5 resources have been changed. As long as they are not changed, the resources can always be fetched from the browser's cache.
SAPUI5 supports the cache buster concept for Java and ABAP servers and for SAP HANA Cloud Platform. SAP HANA XS does not support the cache buster concept.
||Components are independent, reusable parts used in SAPUI5 applications.
Controls are used to define the appearance and behavior of screen areas.
More than 200 UI controls are included in SAPUI5, ranging from basic elements to complex UI patterns.
|SAPUI5 supports three different binding types: Property binding, aggregation binding, and element binding.
Data binding is used to bind two data sources or information sources together to keep them in synch: All changes in
SAPUI5 supports binding with OData, JSON, XML and other data formats.
||The descriptor is inspired by the Web Application Manifest concept introduced by the W3C and provides a central, machine-readable and easy-to-access location for storing metadata associated with an application, an application component, or a library.
||SAPUI5 supports several functions to adapt to operating systems and devices.
||You can extend a SAPUI5 app to your specific requirements. For example, you can extend or replace views, extend or
replace controllers, or change language-specific text.
||Fragments are light-weight UI parts (UI sub-trees) which can be reused, defined similar to views, but do not have any
controller or other behavior code involved. SAPUI5 provides XML, HTML and JS fragments.
||SAPUI5 provides a central management of UI and server messages.
||SAP Web IDE relies on HANA Cloud Platform infrastructure for authentication and secure connectivity to different systems or other components. SAP Web IDE could use any Identity provider (IdP) including customer defined IdPs, or use the SAP HANA Cloud connector for secure connection to on premise systems|
||The mock server provides mock services and also mock data. It supports randomly generated data based on the service
metadata, as well as mock data provided in JSON files.
A model in SAPUI5 holds the data and provides methods to retrieve the data from the database and to set and update
SAPUI5 provides the following predefined models: OData, JSON, XML, and resource model. It is also possible to create a
|The Model View Controller (MVC) concept is used in SAPUI5 to separate the representation of information from the user interaction.|
|Modularization and Dependency
|Navigation||SAPUI5 offers hash-based navigation, which allows you to build single-page apps where the navigation is done by
changing the hash.
|Performance Measurement||SAPUI5 contains tools to measure the performance of an app.|
|Resource Handling||The handling of resources in SAPUI5 is divided in a client-side and a server-side part. The two parts are complementary and do not depend on each other.|
|Right-to-Left Support||SAPUI5 supports Right-to-Left (RTL) directionality. When enabled, the overall page direction is set to RTL and all
SAPUI5 content is displayed in RTL mode. Self-written controls and content must be tested separately.
||SAPUI5 provides the following kinds of patterns: Hard-coded patterns, route with mandatory parameter, route with optional parameter, route with query parameter, and “rest as string" parameter|
|Support Tools||SAPUI5 features several different support tools that help you troubleshoot and solve any issues that may occur.|
SAPUI5 supports HTML templating and XML templating.
The HTML templating concept in SAPUI5 enables you to bind text against properties in the model. If the property in
The XML templating concept enables you to use an XML view as a template. This template is transformed by an XML
|Testing||SAPUI5 provides several testing options, such as unit and integration tests and the Mock Server.|
|Text Localization||The framework concepts for text localization in SAPUI5 are aligned with the general concepts of the Java
|Theming||SAPUI5 supports to create and use different visual designs - called themes - that can be used alternatively and
switched on the fly, thus allowing for the same application to have a very different look, depending on the user's design preference, or on accessibility requirements.
|UI Adaptation||See flexibility|
|Views||The view in SAPUI5 is responsible for defining and rendering the UI. The following predefined view types are supported by SAPUI5: XML, JSON, JS, and HTML|
SAPUI5 on SAP HANA Cloud Platform
Sign up to the free SAP HANA Cloud Platform, developer edition and get a trial instance of SAP Web IDE, our recommended development environment for SAPUI5. Use it to build your first SAPUI5 apps and test the platform on the SAP global cloud network.
Completely free for developer use only.
SAPUI5 from Content Delivery Network (CDN)
There is a network of distributed servers that automatically provides SAPUI5 from the closest location to the user. This allows to simply load SAPUI5 in your app by referring to:
- A specific SAPUI5 version to manage updates on your own (for example: SAPUI5 1.40.9)
- The "latest stable“ version which is updated without prior notice.
Open Source Version, OpenUI5
Get OpenUI5, the open source version of SAPUI5. It’s available for free under the Apache 2.0 license on GitHub.
- Found a bug? Report it!
- Want to contribute a bug fix or some new features? Even better!
Read this to know all about contributing to OpenUI5.