Skip to Content

SAPUI5

Previous

 

 


Get Started

1. Learn about SAPUI5

2. Experience it

3. Build great apps

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.

Next

Learn about SAPUI5

SAPUI5 is built up on the following principles:

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

Previous

SAPUI5 is a client UI technology based on JavaScript, CSS and HTML5.

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.

Next

Summary matrix

Features Details
Accessibility
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.

App Templates
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.
Cache Buster

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.

Component
Components are independent, reusable parts used in SAPUI5 applications.
Controls

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.

Binding
Types

SAPUI5 supports three different binding types: Property binding, aggregation binding, and element binding.
Data Binding

Data binding is used to bind two data sources or information sources together to keep them in synch: All changes in
one data source are also reflected in the other data source.

SAPUI5 supports binding with OData, JSON, XML and other data formats.

Descriptor
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.
Device Adaptation
SAPUI5 supports several functions to adapt to operating systems and devices.
Extensibility
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.
Fragment
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.
Flexibility
SAPUI5 provides a central management of UI and server messages.
Message Management
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
Mock Server
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.
Model

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.

 
Model View
Controller
The Model View Controller (MVC) concept is used in SAPUI5 to separate the representation of information from the user interaction.    
Modularization and Dependency
Management
The SAPUI5 framework has built-in support for modularizing comprehensive JavaScript applications.    
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.
 
Routing Pattern
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.    
Templating

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 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.

 
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
platform.
 
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  

Try it now

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.

There is a list of all available online versions you can refer to.
In case this is not clear yet how this works, see this simple example for using the CDN.

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.

Download the latest stable OpenUI5 Runtime, the OpenUI5 SDK containing all documentation, or go to the download page for more options.

Help us making OpenUI5 better.
  • 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.

Previous
Blogs
Questions

Ask the SAPUI5 Community

Search for answers. Post your questions. Share your knowledge.
Next
image
Have questions or feedback? Contact us
Back to top