Skip to Content
Previous

Official SAPUI5


tutorials and resources

 

The UI development toolkit for HTML5 (SAPUI5) provides everything you need to build enterprise-grade web apps with modern, rich user interfaces. It’s available for the main SAP platforms. Also, as large parts of SAPUI5 have been open sourced via OpenUI5, you can use it outside SAP’s ecosystem

Here we provide official resources to learn SAPUI5 - tutorials, community, and other information.

Next

SAPUI5 in a nutshell

Enterprise-ready web toolkit

SAPUI5 comes with all features needed to build enterprise-grade Web apps. It offers a solid foundation that simplifies development by managing many aspects behind the scenes. At the same time you maintain the freedom to do whatever you want to do. 

Powerful UI flexibility

SAPUI5 Web apps can be adapted further in an upgrade-safe and partially code-free manner. This not only enables you to set up an app for multiple use cases but also allows personalization capabilities out of the box.

Consistent user experience

Apps created with SAPUI5 benefit from a consistent design language and predefined user experience patterns across front-end features, SAP solutions, and even beyond. SAPUI5 is tailor-made for any device, browser, and accessibility.

Under the hood: SAPUI5

SAPUI5 core serves as foundation that simplifies Web application development by managing many aspects of modern development behind the scenes.

A variety of UI controls, ranging from basic elements to complex UI patterns, are ready to be combined for an appealing layout. All UI controls benefit from a consistent design language and coherent UX patterns.

SAPUI5 flexibility services provide capabilities to easily adapt the UI of an app and store the changes in a layered repository.

The packaging is rounded off by various tools. They assist in building and testing apps as well as diagnosing and resolving issues during development and in maintenance.

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 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 Cloud Platform, developer edition

The SAP Cloud Platform, developer edition is a fast, easy and FREE way to get started in a shared environment so you can quickly learn how to create SAPUI5 apps. It also includes a trial instance of SAP Web IDE, our recommended development environment for SAPUI5.

SAPUI5, developer edition

SAPUI5, developer edition is a no-charge no-support packaging of the SAPUI5 runtime respectively of its full SDK. It allows you to build applications targeting the SAPUI5 framework using your preferred local development environment (editor and Web server).

Open source version, OpenUI5

OpenUI5 is the open source variant of SAPUI5 and is available for free under the Apache 2.0 license on GitHub. Both variants, OpenUI5 and SAPUI5, share exactly the same core features. Also the UI control libraries are the same, except that there are a few less in in 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