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 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 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 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 implements the logic that bridges Models and Views. 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. Controls are accessible to developers via numerous libraries. Here’s a brief overview of key libraries and what they allow: (Back to ToC.) With the architecture of an SAPUI5 application in mind, here are features of SAPUI5 that make it an attractive framework for developers:SAPUI5
SAPUI5 Architecture
Models
Views
Controllers
Controls
Libraries
SAPUI5 Features
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.
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.
(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
- "15 SAPUI5 Concepts to Know for the SAP Fiori Exam"
- "Clean Code for SAPUI5: Error Handling Help"
- "Clean SAPUI5 Code Conventions"
- "Clean SAPUI5 Code Quality"
- "Clean SAPUI5: Refactoring SAPUI5 Code"
- "Creating an SAPUI5 Application Using Eclipse"
- "How to Disable Google Chrome Web Security for SAPUI5"
- "Learn SAPUI5: Controls, Aggregations, Associations, and Event Handlers"
- "A Look at SAPUI5 Control Structure"
- "An Overview of SAPUI5 Libraries"
- "Project Components in SAPUI5"
- "SAPUI5 Coding Guidelines"
- "SAPUI5 Questions and Answers with Paul Modderman"
- "Video: Paul Modderman on SAPUI5: The Comprehensive Guide"
Books by SAP PRESS
- SAPUI5: The Comprehensive Guide
- ABAP to the Future
- Clean SAPUI5: A Style Guide for Developers
- Full Stack Development with SAP
- Hands On with SAPUI5 and the SAP Web IDE
- JavaScript: The Comprehensive Guide
- SAP Build: Prototyping and Design
- SAP Cloud Platform: Cloud-Native Development
- SAP Fiori and SAPUI5: Debugging the User Interface
- SAP Fiori Certification Guide: Development Associate Exam
- SAP Gateway and OData
- SAPUI5 and SAP Fiori: The Psychology of UX Design
- Testing SAPUI5 Applications
What Next?
Learn more SAP from our official Learning Center.
And to continue learning even more about SAPUI5, sign up for our weekly blog recap here:
