SAPUI5: UI Development Toolkit for HTML5

What's New in SAPUI5

What's New in SAPUI5 1.38

What's New in SAPUI5 1.36

What's New in SAPUI5 1.34

What's New in SAPUI5 1.32

What's New in SAPUI5 1.30

What's New in SAPUI5 1.28

What's New in SAPUI5 1.26

Read Me First

SAPUI5 vs. OpenUI5

Versioning of SAPUI5

Upgrading

Upgrading from a Version Below 1.38

Upgrading from a Version Below 1.30

Upgrading from a Version Below 1.20

Compatibility Rules

Supported Library Combinations

Deprecated Themes and Libraries

Browser and Platform Support

sap.ui.core, sap.ui.layout, sap.ui.unified

sap.m, sap.ui.table, sap.uxap, sap.tnt

Device-Specific Policies

Visual Degradations

sap.ui.comp

sap.viz

sap.ui.vbm

sap.ui.vk

sap.suite.ui.commons

Device-Specific Policies

sap.suite.ui.microchart

Device-Specific Policies

sap.ushell

sap.makit

sap.ui.commons, sap.ui.ux3

sap.gantt

Demo Kit and Platform-Specific Documentation

Development Environment

App Development Using OpenUI5

App Development Using SAP Web IDE

Get a Trial Account and Access SAP Web IDE

Start SAP Web IDE

Create a neo-app.json Project Configuration File

Create an index.html File

Run the App

Create a Northwind Destination

App Development Using SAPUI5 Tools for Eclipse

Installing SAPUI5 Tools for Eclipse

Using SAPUI5 Tools for Eclipse

Create an SAPUI5 Application Project

Add a Control to Your View

Implement a Method in the Controller

Create an Additional View

Integrate a New View

JavaScript Code Completion

Linking your Eclipse Editor to the Demo Kit

Use JavaScript and XML Templates

SAPUI5 Snippets

Running an App in the Application Preview

Use a SimpleProxyServlet for Testing to Avoid Cross-domain Requests

Node.js-Based Development Environment

Installing the Node.js-Based Development Environment

Testing SAPUI5

Common Installation Issues

Development for Hybrid Web Containers

SAPUI5 Runtime Installation (SAP NetWeaver 7.3 EHP1 or Lower)

Tutorials

Hello World!

Step 1: Create an HTML Page

Step 2: Initialize the App

Step 3: Add Content Pages

Summary

Walkthrough

Step 1: Hello World!

Step 2: Bootstrap

Step 3: Controls

Step 4: XML Views

Step 5: Controllers

Step 6: Modules

Step 7: JSON Model

Step 8: Translatable Texts

Step 9: Component Configuration

Step 10: Descriptor for Applications

Step 11: Pages and Panels

Step 12: Shell Control as Container

Step 13: Margins and Paddings

Step 14: Custom CSS and Theme Colors

Step 15: Nested Views

Step 16: Dialogs and Fragments

Step 17: Fragment Callbacks

Step 18: Icons

Step 19: Reuse Dialogs

Step 20: Aggregation Binding

Step 21: Data Types

Step 22: Expression Binding

Step 23: Custom Formatters

Step 24: Filtering

Step 25: Sorting and Grouping

Step 26: Remote OData Service

Step 27: Mock Server Configuration

Step 28: Unit Test with QUnit

Step 29: Integration Test with OPA

Step 30: Debugging Tools

Step 31: Routing and Navigation

Step 32: Routing with Parameters

Step 33: Routing Back and History

Step 34: Custom Controls

Step 35: Responsiveness

Step 36: Device Adaptation

Step 37: Content Density

Summary

Data Binding

Step 1: No Data Binding

Step 2: Creating a Model

Step 3: Create Property Binding

Step 4: Two-Way Data Binding

Step 5: One-Way Data Binding

Step 6: Resource Models

Step 7: (Optional) Resource Bundles and Multiple Languages

Step 8: Binding Paths: Accessing Properties in Hierarchically Structured Models

Step 9: Formatting Values

Step 10: Property Formatting Using Data Types

Step 11: Validation Using the Message Manager

Step 12: Aggregation Binding Using Templates

Step 13: Element Binding

Step 14: Expression Binding

Step 15: Aggregation Binding Using a Factory Function

Navigation and Routing

Step 1: Set Up the Initial App

Step 2: Enable Routing

Step 3: Catch Invalid Hashes

Step 4: Add a Back Button to Not Found Page

Step 5: Display a Target Without Changing the Hash

Step 6: Navigate to Routes with Hard-Coded Patterns

Step 7: Navigate to Routes with Mandatory Parameters

Step 8: Navigate with Flip Transition

Step 9: Allow Bookmarkable Tabs with Optional Query Parameters

Step 10: Implement Lazy Loading

Step 11: Assign Multiple Targets

Step 12: Make a Search Bookmarkable

Step 13: Make Table Sorting Bookmarkable

Step 14: Make Dialogs Bookmarkable

Step 15: Reuse an Existing Route

Step 16: Handle Invalid Hashes by Listening to Bypassed Events

Step 17: Listen to Matched Events of Any Route

Summary

Testing

Step 1: Overview and Testing Strategy

Step 2: A First Unit Test

Step 3: Adding the Price Formatter

Step 4: Testing a New Module

Step 5: Adding a Flag Button

Step 6: A First OPA Test

Step 7: Changing the Table to a Growing Table

Step 8: Testing Navigation

Step 9: Adding the Post Page

Step 10: Test Suite and Automated Testing

Step 11: Testing User Interaction

Step 12: Adding Tabs

Step 13: Writing a Short Date Formatter Using TDD

Step 14: Adding the Date Formatter

Summary

Mock Server

Step 1: Initial App Without Data

Step 2: Creating a Mock Server to Simulate Data

Step 3: Handling Custom URL Parameters

Step 4: Calling a Function Import

Summary

Worklist App

Step 1 (Option 1): Creating the Initial App with an App Template in SAP Web IDE

Step 1 (Option 2): Downloading the Code

Step 1 (Result): The Initial App

Step 2: Custom Mock Data

Step 3: Extending the Worklist Table

Step 4: Quick Filter for the Worklist

Step 5: Adding Actions to the Worklist

Step 6: Extending the Detail Page

Step 7: Adding a Comments Section

Summary

Smart Controls

Prerequisites

Step 1: Smart Field

Step 2: Smart Field with Value Help

Step 3: Smart Field with Smart Link

Step 4: Smart Form

Step 5: Smart Filter Bar and Smart Table

Step 6: Table Personalization

Step 7: Variant Management

Step 8: Page Variant Management

Step 9: Smart Chart with Chart Personalization and Variant Management

Summary

3D Viewer

Prerequisites

Step 1: 3D Viewer With Single File Loading

Step 2: 3D Viewer With Multiple File Loading

Step 3: 3D Viewer Using the Viewport Control

Step 4: Adding a Scene Tree

Step 5: Adding Step Navigation

Essentials

Bootstrapping: Loading and Initializing

Standard Variant for Bootstrapping

Variant for Bootstrapping from Content Delivery Network

noJQuery Variant for Bootstrapping

Preload Variant for Bootstrapping

sap-ui5 Variant for Bootstrapping

Initialization Process

Loading of Additional Resources During Bootstrap

Dynamic Loading of Libraries

Configuration of the SAPUI5 Runtime

Configuration Options

Compatibility Version Information

Structuring: Components and Descriptor

Components

Component.js File

Component Metadata

Methods Controlling the Initial Instantiation

Component Containers

Using UI Components in Applications

Registering Component Resources

Handling IDs in UI Components

Advanced Concepts for SAPUI5 Components

Descriptor for Applications, Components, and Libraries

Migrating from Component Metadata to Descriptor

Descriptor for Libraries

Descriptor for Components (Inside Libraries)

Resources.json File

Creating a Descriptor File for Existing Apps

Migration Information for Upgrading the Descriptor File

Model View Controller (MVC)

Models

OData V2 Model

Meta Model for OData V2

OData V4 Model

Model Instantiation and Data Access

Bindings

Binding Events

OData Operations

Batch Control

Meta Model for OData V4

OData V4 Metadata JSON Format

Performance Aspects

Unsupported Superclass Methods and Events

Changes Compared to OData V2 Model

JSON Model

Sorting and Filtering in JSON Models

Binding Path Syntax for JSON Models

XML Model

Sorting and Filtering in XML Models

XML Namespace Support

Binding Path Syntax for XML Models

Resource Model

Binding Path Syntax for Resource Models

Binding Texts to a Resource Bundle

Custom Model

Assigning the Model to the UI

Binding Path

Binding Controls to the Model

Setting the Default Binding Mode

Views

XML View

Namespaces in XML Views

Aggregation Handling in XML Views

Using Native HTML in XML Views

Using CSS Style Sheets in XML Views

Handling Events in XML Views

Preprocessing XML Views

JSON View

JS View

HTML View

Instantiating Views

View Cloning

Controller

File Names and Locations (View and Controller)

Typed Views and Controllers

Support for Unique IDs

Data Binding

Element Binding

Aggregation Binding

Property Binding

Using the Data Binding Type System

Example: Using Data Types

Handling Wrong User Input

Simple Types

sap.ui.model.type.Boolean

sap.ui.model.type.Date

sap.ui.model.type.DateTime

sap.ui.model.type.Float

sap.ui.model.type.Integer

sap.ui.model.type.String

sap.ui.model.type.Time

OData Types

Formatter Classes

sap.ui.core.format.DateFormat

sap.ui.core.format.NumberFormat

Calculated Fields for Data Binding

Custom Formatter Functions

Expression Binding

Complex Syntax for Calculated Fields

Using Complex Syntax to Define a Formatter

Using Complex Syntax to Add Filters and Sorters

Using Complex Syntax in XML and HTML Views

Using Data Binding for Data Export

Property Metadata Binding

Reusing UI Parts: Fragments

HTML Fragments

XML Fragments

JS Fragments

Instantiation of Fragments

Programmatically Instantiating JS Fragments

Programmatically Instantiating XML Fragments

Programmatically Instantiating HTML Fragments

Instantiating Fragments in Declarative Views

Using Other Objects Instead of Controllers

Inline Definition and Instantiation of Fragments

Unique IDs

IDs in Declarative XML or HTML Fragments

IDs in JS Fragments

IDs of Fragments in Views

Retrieving Control Instances by Their ID

Example: JS Fragments Used in XML Views

Dialogs and other Popups as Fragments

Defining Dialogs as Fragments

Using Dialogs Defined as Fragments

Fragments with Multiple Root Nodes

HTML and XML Templating

HTML Templating

Expressions and Helpers for HTML Templating

Example: Use of HTML Templating in SAPUI5

XML Templating

Preprocessing Instructions

with

repeat

if

alias

require

Replacement of Bindings

XML Fragments

Extension Points

Annotation Helper

Debugging

Working with Controls

Custom Data - Attaching Data Objects to Controls

Writing Data to the HTML DOM as DATA-* Attribute

Using Predefined CSS Margin Classes

Using Container Content Padding CSS Classes

CSS Classes for Theme Parameters

List of Supported CSS Classes

Field Groups

Declarative Support

Enabling Declarative Support

Defining Controls

Declarative Support: Properties

Declarative Support: Associations

Declarative Support: Events

Declarative Support: Aggregations

Declarative Support: Data Binding

Compiling Declarative HTML

Managing UI and Server Messages

UI Messages

Server Messages

Message Model

Message Parser

Routing and Navigation

Routing Configuration

Method and Events for Navigation

Initializing and Accessing a Routing Instance

Working with Multiple Targets

Working with Nested Components

Optimizing Applications

Modularization and Dependency Management

Loading a Module

Multiple Module Locations

Dependency Resolution Tools

Avoiding Duplicates

Why not Simply Concatenating Modules?

Loading jQuery.sap.require

Cyclic Dependencies

Resource Handling: Modularization and Localization

SAPUI5 Library Location Used for Testing

Cache Buster for SAPUI5

Application Cache Buster

Application Cache Buster: Index File

Application Cache Buster: Configuration

Application Cache Buster: Request Flow

Application Cache Buster: Enhanced Concept

Adapting to Operating Systems And Devices

The Device API

Controls with Built-In Device Adaptation

Checking the Operating System your Application is Running on

Content Densities

How to Use the Compact Density for Controls

Options for Further Adaptation

SAPUI5 Accessibility Features

Keyboard Handling for SAPUI5 UI Elements

Screen Reader Support for SAPUI5 Controls

High-Contrast Black (HCB) Theme for SAPUI5 Controls

Localization

Identifying the Language Code / Locale

Resource Bundles

Use of Localized Texts in Applications

Testing and Performance Measurement

Unit Testing with QUnit

QUnit Testing Fundamentals

How to Test SAPUI5 Controls with QUnit

Integration Testing with One Page Acceptance Tests (OPA5)

Getting Started with OPA5

Cookbook for OPA5

Simulating User Interactions on Controls

Pitfalls and Troubleshooting

Performance Measurement Using jQuery.sap.measure

Interaction Tracking for Performance Measurement

Mock Server

OData Features Supported by Mock Server

Mock Server: Frequently Asked Questions

Using Mock Data

Troubleshooting

Support Tools

Diagnostics Window

Technical Information Dialog

UI5 Inspector

Debugging

Debug Mode (internal)

Browser Debugging for ABAP Developers

Logging and Tracing

Troubleshooting: Common Issues

Theming

Setting Themes

Loading External Custom Themes

Enhanced Theming Concepts

Theming FAQ

Creating Themable User Interfaces

Developing Apps

App Templates: Kick Start Your App Development

Worklist Template

Navigation

Busy Indication

Model Instantiation

Send Email

Testing

Performance

Security

Device Adaptation

Stable IDs

Master-Detail Template

Navigation

Busy Indication

Model Instantiation

Master List Filtering

Send Email

Testing

Performance

Security

Device Adaptation

Stable IDs

App Overview: The Basic Files of Your App

App Initialization: What Happens When an App Is Started?

Folder Structure: Where to Put Your Files

Device Adaptation: Using Device Models for Your App

Performance: Speed Up Your App

Stable IDs: What? When? Why?

Coding Issues to Avoid

JavaScript Code Issues

CSS Styling Issues

Performance Issues

Securing Apps

Browser Security

Transport Security

Server Security

Third-Party Libraries

Secure Programming Guide

Securing the SAPUI5 Repository

Security Concepts

Cross-Site Scripting

URL Whitelist Filtering

HTML5 Sanitizer

Whitelist Service

Frame Options

SAPUI5 Flexibility Services

UI Adaptation at Runtime

Layered Repository

Right-to-Left Support

API Properties for Right-to-Left Support in Text-Displaying Controls

Accessibility

General Recommendations

Text Size and Fonts

Colors and Theming

Keyboard Handling

Fast Navigation

Screen Reader Support

The SAPUI5 ABAP Repository and the ABAP Back-End Infrastructure

Big Picture: How Does it All Work?

Technical Remarks

Design Time Aspects

View and Change Content of the SAPUI5 ABAP Repository

Virus Scan During Uploads to the SAPUI5 ABAP Repository

SAPUI5 Tools for Eclipse

Synchronization of SAPUI5 Apps Created with SAPUI5 Tools for Eclipse

Sharing Eclipse Projects with the SAPUI5 ABAP Repository

Submitting Content to the SAPUI5 ABAP Repository

Retrieving Files From a Single SAPUI5 Repository

Handling Conflicts

Using the ABAP Communication Log for Troubleshooting

Server Version Check for SAPUI5 Runtime Libraries

Creating a Login Screen

Using the SAPUI5 Repository Upload and Download Reports to Synchronize

Runtime Aspects

Cache Behavior for Application Resources

Cache Buster for SAPUI5 Application Resources

SAPUI5 Text Repository

Translation of Texts of SAPUI5 Apps

How the SAPUI5 Text Repository Works

Text Classification

Example for a Properties File

How Translated Texts Are Accessed at Runtime

Information for Translators

Placeholder Handling in Transaction SE63

SAPUI5 Application Index

Control-Specific Information

Tables: Which One Should I Choose?

Busy Indicators

sap.m

App and Nav Container

Events Fired Centrally by the App or the NavContainer

Events Fired on the Pages

Passing Data when Navigating

Facet Filter

Facet Filter: Simple Type

Facet Filter: Light Type

Facet Filter List and Facet Filter Item

Events for Facet Filters

Data Binding for Facet Filters

Filter Search

Facet Filter Selection

Dependent Facets

Feed Input

Feed List Item

Flex Box

Getting Started With FlexBox

Important FlexBox Layout Concepts

Generic Tile

Image

List, List Item, and Table

Lists

Custom List Item

Swipe for Action

Aggregation

Events

Methods

Properties

Creating Tables

Configuring Responsive Behavior of a Table

Defining Column Width

Table Design

List and Table Events

Growing Feature for Table and List

Grouping in a Table

Table Personalization

Performance of Lists and Tables

Message Handling

Message Popover

Personalization Dialog

Scrolling

Scrolling: Implementation Details

Scrolling: Pull to Refresh

Split App

Upload Collection

URL Helper

Examples for Triggering Telephone, Text and E-Mail Applications

sap.tnt

sap.suite.ui.commons

Process Flow

sap.suite.ui.microchart

Radial Micro Chart

sap.ui.comp

Filter Bar

Smart Chart

Smart Field

Smart Filter Bar

Smart Form

Smart Link

Smart Micro Chart

Smart Bullet Micro Chart

Smart Area Micro Chart

Smart Table

Smart Variant Management

sap.ui.core

Icon and Icon Pool

sap.ui.vk

Native Viewport

Scene Tree

Step Navigation

Viewer

Viewport

sap.uxap

Object Page Layout

Object Page Header

Anchor Bar

Object Page Blocks

Creating Blocks: A Step-by-Step Guide

Object Page Scrolling

Developing Apps with Smart Templates

Which Smart Templates Are Available?

List Report View

Actions in List Report

Smart Tables

Editing Status

Object Page View

Display of Actions

Editing Status in Header

How To Use Smart Templates

Preparing OData Services

Preparing UI Annotations

Annotations Relevant for List Reports and Object Pages

Value Help as a Dropdown List

Status Colors and Icons

Tables

Smart Table Header

Default Sort Order

Line Item Actions in Tables

Rating Indicator in Tables

Progress Indicator in Tables

Navigation

Annotations Relevant for List Reports

Smart Filter Bar

Enable the Search Function

Render Fields

Actions in List Report View

List Report Table

Table Types

Line Items

Images

Smart Controls

Annotations Relevant for Object Pages

Object Page Header

Header Facets

Plain Text Facet

Contact Facet

Header Field Group

Data Points

Actions in Object Page Header

Smart Controls in Object Page Header

Sections

Contact Facet

Address Facet

Smart Chart Facet

Hide a Facet on the UI

Building UI Applications Using Smart Templates

Creating a Smart Template Project

Folder Structure and Project Artifacts

Post-Generation Steps

Maintaining Facet Texts

Replacing Standard UI Texts

Setting Up General Features

Navigation to Object Page

Adapting the List Report

Table Type

Multiple Selection in Table

Variant Management

Editing Status Filter

Setting Up Object Pages

Subpages

Related Apps

Editable Header Fields

Extending Generated Apps

Pointing to a Different Component in the App Descriptor

Extension Points for Facets

Adding A Section To An Object Page

API for Developers of Smart Template Extensions

Custom Fields in the Smart Filter Bar

Adding Filterable Field to the Smart Filter Bar

Troubleshooting

Overview Pages: Create Interactive Overviews of a Subject Area

Building an Overview Page Application Instance

Configuring Application Header Properties

Configuring Data Sources and Models

Configuring Dependencies to SAPUI5 Libraries

Configuring the Global Filter

Configuring Cards

Cards Used in Overview Pages

Table and List Cards

Table Cards

List Cards

Stack Cards

Quick View Cards

Analytic Cards

Configuring Charts

Configuring an EntitySet with Input Parameters

Configuring Card Navigation

Configuring Card Filters

Configuring Sort Properties

Adding the OData Select Parameter

Formatting Numbers

Setting Units of Measure

Color Highlighting for Numeric Values

Navigation Properties in the Annotation Document

Annotations Used in Overview Pages

Runtime Capabilities

Extending Apps

Handling Localized Texts for Extended Applications

Example: Component Configuration

View Extension

View Modification

View Replacement

Controller Extension

Providing Hooks in the Standard Controller

Controller Replacement

I18n Resource Text Customization

Limitations

Caveats Regarding Stability Across Application Upgrades

Supportability

Developing Content

Development Conventions and Guidelines

JavaScript Coding Guidelines

JavaScript Namespaces

Example for Defining a Class

Common Pitfalls in JSDoc

SAPUI5 Control Development Guidelines

Product Standards and Acceptance Criteria

File Names and Encoding

Tools

ESLint Code Checks

ESLint Configuration File

Developing SAPUI5 Controls

Defining the Control Metadata

Object Metadata and Implementation

Defining Control Properties

Adding Method Implementations

Normal Methods

init() Method

exit() Method

Event Handler Methods

Browser Events

Mobile Events

Windows 8 Support

Windows 8 Support - Known Issues

Distinguish Control Behavior between Mobile and Desktop

Adapting Event Handling to Support Windows 8 Devices

Renderer Methods

Distinguish Control Behavior between Mobile and Desktop

Examples for Creating and Extending Controls

Creating a Simple Control

Creating a Simple Square Control

Creating a Simple Container Control

Extending Buttons with Additional Events

Extending TextField Rendering

Writing a Control Renderer

Prevention of Cross-site Scripting

Implementing Focus Handling

Convenience Functionality

Item Navigation - Supporting Keyboard Handling in List-like Controls

Integrating the ItemNavigation in your Control

Right-to-Left Support in Controls

Right-to-Left Support Guidelines for Control Development

Programmatic Access to RTL

Troubleshooting Common RTL Issues

Defining Groups for Fast Navigation (F6)

Composite Controls

Accessibility Aspects for SAPUI5

Keyboard Handling for SAPUI5 Controls for Developers

Keyboard Handling for Basic Navigation

Keyboard Handling for One-Dimensional Navigation

Keyboard Handling for Two-Dimensional Navigation

Keyboard Handling for Triggering Actions on Item Level

Keyboard Handling for Item Selection

Keyboard Handling for Value Help and Auto-Complete

Screen Reader Support for SAPUI5 Controls

ARIA Attribute Mapping

Keyboard Usage of ARIA Role Mapped Controls

ARIA Mapping for Tooltips and Textual Alternatives

ARIA Event Handling

ARIA Labeling

Best Practices for ARIA Labeling

Writing a Control: FAQ

Glossary

Analysis Path Framework (APF)

What's New in Analysis Path Framework

Analytical Applications Based on APF

Setting Up APF and the APF Configuration Modeler

Data Sources

Implementation Information for SAP Business Suite powered by SAP HANA and SAP BW on SAP HANA

Implementation Information for SAP S/4HANA, On-Premise Edition

Authorization Concept

Authorization Information for SAP Business Suite powered by SAP HANA

Authorization Information for SAP S/4HANA

Enhancing an APF-Based Application

Creating Your Own Application

APF Configuration Modeler

Adding an Application

Creating a Configuration

Creating Categories

Creating Steps

Creating Representations

Configuring Filters

Individually Configured Filters

Filter Dependencies

Use Cases for Configuring Filters

Use Case 1: Filter Independent of Smart Business

Use Case 2: Filter Determined by Smart Business Context Only

Use Case 3: Filter with Default Values Determined by Smart Business Context

Use Case 4: No Filter

Erroneous Filter Configuration

Smart Filter Bar

Creating Navigation Targets

Executing a Configuration

Deleting Objects

Text Pool Cleanup

Import

Export

Translation

Launching APF-Based Applications

Configuring the Smart Business KPI Tile

Configuring the Fiori App Launcher Tile

APF Modules

The Core Module (sap.apf.core)

The UI Module

The Analysis Step Container

The Step Toolbar

The Analysis Path Display

The Analysis Step Gallery

The Analysis Path Gallery

Predefined Representation Types

Rendering of Charts

Concepts

Analysis Path Processing

Consuming APF in SAPUI5 1.28 and Prior Releases

Consuming APF as of SAPUI5 1.30

Advanced Configuration Information

Application Configuration in SAPUI5 1.28 and Prior Releases

Descriptor (manifest.json) as of SAPUI5 1.30

Analytical Content Configuration

The Configuration Root Object

The Step Object

The Request Object

The Binding Object

The Representation Object

The Representation Type Object

The Facet Filter Object

The Navigation Target Object

The Category Object

The Label Object

The Thumbnail Object

API Reference