SAPUI5

SAPUI5

 

SAPUI5 is a user interface development toolkit. First developed by SAP in 2010 under the code name Phoenix, the framework allows developers to create web applications for HTML5.

 

Table of Contents

  1. SAPUI5 Architecture
    1. Models
    2. Views
    3. Controllers
    4. Controls
    5. Libraries
  2. SAPUI5 Features
    1. Accessibility
    2. Cross-Browser Compatibility
    3. Localization
    4. Open Source
    5. Theming
    6. SDK and Documentation
    7. UI5 Web Components
  3. Application Development
    1. Transactional Apps
    2. Fact Sheet Apps
    3. Analytical Apps
  4. UI5 Evolution
    1. Modular Core
    2. Rendering and Controls
    3. Programming Models
    4. Build Tooling
  5. OpenUI5
  6. UI5 Releases
  7. Testing
  8. Other Key SAPUI5 Terms
  9. Additional Resources
    1. Blog Posts
    2. Books by SAP PRESS

 

SAPUI5 Architecture

SAPUI5 allows users to consume data from any service. It uses the model-view-controller (MVC) development concept, which consists of a three-part application: models, which contain data; views, which represent the data and the UI; and controllers, which handle the data and user interaction.

Models

Models are containers for data and hold all the business data an application will work with. There are a handful of pre-defined model classes available in SAPUI5, including JSON and resource models.

Views

Views are the front-end display of data by an application. Because this is the portion of the app that end-users work with, it’s important to incorporate design thinking and UI best practices when developing views.

Controllers

Controllers implements the logic that bridges Models and Views.

Controls

Controls are the decision-makers in a line of code. Sometimes called widgets, components, or elements, they tell the app what to do whenever a choice has to be made. Currently, more than 200 controls exist with more in development.

Libraries

Controls are accessible to developers via numerous libraries. Here’s a brief overview of key libraries and what they allow:

    • ui.core: core functionality; essential to all SAPUI5 apps
    • m: main library; includes most basic and important controls for mobile and desktop devices
    • ui.layout: structure controls for element display
    • ui.unified: mobile and desktop controls
    • ui.table: data controls for large-volume data
    • viz: different types of charts
    • ui.comp: smart content such as SmartField, SmartTable, etc.
    • suite: a set of three libraries that contain types and templates
    • ushell: shell, service-related functionality
    • uxap: controls such as breadcrumbs
    • ui.suite: controls for new SAP Business Suite (SAP ERP) apps
    • ui.vk: functionality and controls for 3D modeling

 

SAPUI5 Views

(Back to ToC.)

SAPUI5 Features

With the architecture of an SAPUI5 application in mind, here are features of SAPUI5 that make it an attractive framework for developers:

Accessibility

SAPUI5 allows developers to write code that can be accessed by all users with tools such as screen readers.

Cross-Browser Compatibility

SAPUI5 is responsive to a number of factors, including device type, OS, browser, screen size, and more. Developers can create applications that automatically adapt to portrait or landscape views and adjust controls as necessary to maintain a pleasant UX.

Localization

SAPUI5 apps can be created to detect where a user is accessing it, and adapt data such as dates, currency, etc. in the local convention. Furthermore, if provided with a language translation of the content, apps will automatically translate it to the relevant language.

Open Source

SAPUI5 is compatible with multiple open source technologies, including the jQuery framework, datajs library for connecting with OData, and the Handlebars templating language. The open source version of UI5 is called OpenUI5.

Theming

SAPUI5 allows developers to customize the look and feel of apps to meet client needs via a tool called the UI Theme Designer.

 

SAPUI5 Theme Designer

SDK and Documentation

Extensive documentation for individual components is available at the SAPUI5 Software Development Kit. In addition, the SAP Fiori Design Guidelines show how the different components can best be used and combined to create the application types described below.

UI5 Web Components

The UI5 Web Components toolkit allows developers to use predesigned SAP Fiori elements in their applications regardless of framework.

(Back to ToC.)

Application Development

SAPUI5 is the basis for many of the applications in the current SAP ecosystem. As SAP S/4HANA matured in the mid-2010s, a new user interface called SAP Fiori emerged as the primary UI for those using SAP. With SAPUI5, developers can create and debug (using both SAP offerings and Google Chrome Developer Tools) all three different types of SAP Fiori apps:

Transactional Apps

Transactional apps perform activities such as creating, changing, and approving requests or orders via guided navigation.

Fact Sheet Apps

Fact sheet apps are used to view essential contextual information or a 360-degree view of specific central objects used in business operations.

Analytical Apps

Analytical apps provide users with business information and have the ability to analyze and evaluate strategic or operational KPIs in real time.

(Back to ToC.)

UI5 Evolution

SAPUI5 is constantly being retooled and updated by a worldwide team of developers working as part of the UI5 Evolution project. Under the team’s guidance, the current framework of SAPUI5 has evolved to orbit around four key areas: a modular core, rendering and controls, programming models, and build tooling.

Modular Core

The modular core of SAPUI5 reduces code down to a compact foundation. This not only streamlines and allows for more-organized code, but the code reduction makes apps more lightweight and therefore quicker for the user.

Rendering and Controls

By making rendering and controls as small as possible while maintaining UI functionality, developers can reduce application complexity and make the framework faster.

Programming Models

As SAPUI5’s programming model has been updated, it can be used alongside other frameworks such as Angular or React.

Build Tooling

The latest advancement of build tooling for SAPUI5 is compatible with Node.js, allowing developers to use SAPUI5 alongside the platform. Available build tooling packages include ui5-logger, ui5-fs, ui5-builder, ui5-project, ui5-server, and ui5-cli.

(Back to ToC.)

OpenUI5

In 2013, SAP released a non-native version of SAPUI5 for developers who don’t work on SAP projects. Called OpenUI5, it is available under an Apache 2.0 license. It shares a code base with SAPUI5, so the framework is updated alongside its SAP sibling.

 

openUI5 SDK

(Back to ToC.)

UI5 Releases

Versions of SAPUI5 and OpenUI5 are released on a monthly basis for SAP Business Technology Platform and biannual basis for AS ABAP. They follow the following format: {major release number.patch version}. For example, version 1.68.1 indicates the major release number of 1.68 on its first patch.

 

Public-facing releases are always even-numbered, while internal releases for SAP are odd-numbered.

(Back to ToC.)

Testing

SAP offers tools to foster quality in UI5 developments:

  • The SAPUI5 library comes with test automation libraries: qUnit & OPA (designed for respectively unit testing and component testing).
  • UIveri5 is a recently released tool that enables end-to-end automation testing of UI5 applications.

(Back to ToC.)

Other Key SAPUI5 Terms

While we’ve laid out many of the important terminology you’ll run into when working with SAPUI5, there are a handful more that will be helpful to you.

  • CRUD Operations: Create, Read, Update, and Delete operations.
  • Event handlers: Functions that are assigned to controls and execute commands when the controls are invoked.
  • JavaScript Object Notation (JSON): A data format written in text that allows for easy access and analysis by humans and machines.
  • Open Data (OData): An open HTTP-based protocol for consuming, querying, and exposing data on the web that provides common access to data without learning new APIs.
  • Representational State Transfer (REST) Programming: A programming paradigm typically applied to web services.
  • SAP Web IDE: A cloud-based development environment for SAPUI5 applications.
  • UI5 Inspector: A Google Chrome plugin that provides debugging assistance.

(Back to ToC.)

Additional Resources

Want to learn more about SAPUI5? Additional information can be found in the blog posts and books listed below.

Blog Posts

Books by SAP PRESS

What Next?

Learn more SAP from our official Learning Center.SAP PRESS Learning Center

And to continue learning even more about SAPUI5, sign up for our weekly blog recap here: