SAPUI5

SAPUI5

Get Started

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.

Learn about SAPUI5

Enterprise-ready web toolkit

SAPUI5 comes with all features needed to cover most current application requirements, with standards high enough to be delivered in standard SAP solutions.

Powerful development concepts

The SAPUI5 core offers a solid foundation that simplifies development by managing many aspects of modern development behind the scenes. It comes with built in support for architectural concepts like MVC, message handling, data binding, routing and many more.

Feature-rich UI controls

More than 400 UI controls are included in SAPUI5, ranging from basic elements to complex UI patterns. You can use them straight out of the box, or extend and tweak them so they meet your requirements.

Consistent user experience

SAPUI5 applications benefit from a consistent design language and predefined UX patterns across all frontend features. Use a predefined theme or the UI theme designer to create your own one.

Adaptive UI for any size

No need to worry about device specifics - SAPUI5 applications run on smartphones, tablets, and desktops. The UI controls automatically adapt themselves to each device`s capabilities and make the most of the real estate available.

Simple to use

Familiar with JavaScript and common web standards? Then it’s super-easy for you to get started with SAPUI5. Make use of the ready-to-use app templates as a starting point for your app developing. They include generic application functionality and tests that can be easily extended with custom functionality if needed.

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 Cloud Platform, and business data can be accessed, for example, using the OData model through a SAP Gateway.

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 Cloud Platform. SAP HANA XS does not support the cache buster concept.

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.

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.

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

A model in SAPUI5 holds the data and provides methods to retrieve the data from the database and to set and update
data.

SAPUI5 provides the following predefined models: OData, JSON, XML, and resource model. It is also possible to create a
custom model implementation for data sources that are not yet covered by the framework or are domain-specific.

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.

The HTML templating concept in SAPUI5 enables you to bind text against properties in the model. If the property in
the model changes, the text is updated accordingly.

The XML templating concept enables you to use an XML view as a template. This template is transformed by an XML
preprocessor on the source level, the XML DOM, at runtime just before an SAPUI5 control tree is created from the XML source.

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.

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

Try it now

SAPUI5 on SAP Cloud Platform

Sign up to the free SAP 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.