SAPUI5: UI Development Toolkit for HTML5
What's New in SAPUI5
What's New in SAPUI5 1.85
What's New in SAPUI5 1.84
Previous Versions
What's New in SAPUI5 1.82
What's New in SAPUI5 1.81
What's New in SAPUI5 1.80
What's New in SAPUI5 1.79
What's New in SAPUI5 1.78
What's New in SAPUI5 1.77
What's New in SAPUI5 1.76
What's New in SAPUI5 1.75
What's New in SAPUI5 1.74
What's New in SAPUI5 1.73
What's New in SAPUI5 1.72
What's New in SAPUI5 1.71
What's New in SAPUI5 1.70
What's New in SAPUI5 1.69
What's New in SAPUI5 1.68
What's New in SAPUI5 1.67
What's New in SAPUI5 1.66
What's New in SAPUI5 1.65
What's New in SAPUI5 1.64
What's New in SAPUI5 1.63
What's New in SAPUI5 1.62
What's New in SAPUI5 1.61
What's New in SAPUI5 1.60
What's New in SAPUI5 1.58
What's New in SAPUI5 1.56
What's New in SAPUI5 1.54
What's New in SAPUI5 1.52
What's New in SAPUI5 1.50
What's New in SAPUI5 1.48
What's New in SAPUI5 1.46
What's New in SAPUI5 1.44
What's New in SAPUI5 1.42
What's New in SAPUI5 1.40
What's New in SAPUI5 1.38
What's New in Analysis Path Framework
Change Log
Read Me First
Compatibility Rules
Browser and Platform Support
Visual Degradations
Keyboard Shortcuts for SAPUI5 Tools
Supported Library Combinations
Supported Combinations of Themes and Libraries
Versioning of SAPUI5
Upgrading
Upgrading from a Version Below 1.82
Upgrading from a Version Below 1.40
Upgrading from a Version Below 1.38
Deprecated Themes and Libraries
SAPUI5 vs. OpenUI5
Get Started: Setup, Tutorials, and Demo Apps
Development Environment
App Development
App Development Using SAP Business Application Studio
Developing OpenUI5
Other Environments
Development for Hybrid Web Containers
Former Environments
App Development Using SAP Web IDE
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
Quick Start
Step 1: Ready...
Step 2: Steady...
Step 3: Go!
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
Step 38: Accessibility
Troubleshooting
Step 1: Browser Developer Tools
Step 2: Technical Information Dialog
Step 3: Support Assistant
Step 4: Diagnostics Window
Step 5: UI5 Inspector
First-Aid Kit
An Empty Page Comes Up
Content or Control Is Not Visible
Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)
App or Control Looks Odd
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
OData V4
Step 1: The Initial App
Step 2: Data Access and Client-Server Communication
Step 3: Automatic Data Type Detection
Step 4: Filtering, Sorting, and Counting
Step 5: Batch Groups
Step 6: Create and Edit
Step 7: Delete
Step 8: OData Operations
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
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 Input
Step 12: Adding a Search
Step 13: Testing User Interaction
Step 14: Adding Tabs
Step 15: Writing a Short Date Formatter Using TDD
Step 16: Adding the Date Formatter
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
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
SAP Fiori 2.0 App
Step 1: Setting Up the Initial App
Step 2: Creating an Empty Flexible Column Layout
Step 3: Using Dynamic Page for the Master View
Step 4: Adding a Detail Page
Step 5: Using Object Page Layout as a Detail Page
Step 6: Adding a Floating Footer
Step 7: Routing
Step 8: Enhancing the Detail Page
Step 9: Adding a Detail-Detail Page
Step 10: Adding More Pages
Step 11: Using the Flexible Column Layout Semantic Helper
Step 12: Starting with Two Columns
Step 13: Setting the Master-Detail Pattern
Rule Builder Control
Decision Table
Features
Step 1: Creating an Initial Rule Control
Step 2: Associating the Expression Language
Step 3: Changing the Decision Table Configuration
Text Rule
Features
Step 1: Creating a Rule Control
Step 2: Associating the Expression Language
Step 3: Changing the Text Rule Configuration
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: View Management
Step 8: Page Variant Management
Step 9: Smart Chart with Chart Personalization and View 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
Ice Cream Machine
Step 1: Initial Application
Step 2: KPI Tile and Chart Tile on the Start Page
Step 3: Launch Tile and Slide Tile
Step 4: Generic Tiles in Line Mode
Step 5: Navigating from the Start Page to Other Pages
Step 6: Chart Container
Step 7: Header Container and Radial Micro Chart
Step 8: Comparison Micro Chart
Step 9: Delta Micro Chart
Step 10: Line Micro Chart
Step 11: Process Flow
Step 12: Timeline
Step 13: Optimizing the Process Flow Layout
Demo Apps
Best Practices for App Developers
Load Only What You Really Need
Use the MVC Concept
Keep Your Views Short and Simple
Use Stable IDs
Make Your App CSP Compliant
Use Asynchronous Loading
Is Your Application Ready for Asynchronous Loading?
Performance Checklist
Essentials
Bootstrapping: Loading and Initializing
Standard Variant for Bootstrapping
Variant for Bootstrapping from Content Delivery Network
noJQuery Variant for Bootstrapping
Initialization Process
Loading of Additional Resources During Bootstrap
Dynamic Loading of Libraries
Configuration of the SAPUI5 Runtime
Configuration Options and URL Parameters
Compatibility Version Information
Structuring: Components and Descriptor
Components
Component.js File
Component Metadata
Methods Controlling the Initial Instantiation
Using and Nesting Components
Declarative API for Initial Components
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)
The resources.json File
Creating a Descriptor File for Existing Apps
Migration Information for Upgrading the Descriptor File
Descriptor Dependencies to Libraries and Components
Manifest Model Preload
Enabling the Automatic SAP Fiori 2.0 Header Adaptation in the Descriptor
Model View Controller (MVC)
Models
Views
XML View
Namespaces in XML Views
Aggregation Handling in XML Views
Control Properties and Associations in XML Views
Using Native HTML in XML Views
Using CSS Style Sheets in XML Views
Handling Events in XML Views
Preprocessing XML Views
XML View Cache
Require Modules in XML View and Fragment
JSON View
JS View
HTML View
Instantiating Views
View Cloning
Controller
Using Controller Extension
Support for Unique IDs
Data Binding
Binding Types
Property Binding
Context Binding (Element Binding)
List Binding (Aggregation Binding)
Using Factory Functions
Sorting, Grouping, and Filtering for List Binding
Lifecycle of Binding Templates
Extended Change Detection
Binding Syntax
Binding Path
Composite Binding
Expression Binding
Property Metadata Binding
Examples for Data Binding in Different View Types
Formatting, Parsing, and Validating Data
Simple Data 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
sap.ui.model.type.DateTimeInterval
Formatter Classes
Date Format
Number Format
File Size Format
Unit Formatting
Currency Formatting
Models
OData V2 Model
Creating the Model Instance
Service Metadata
Adding Additional URL Parameters
Custom HTTP Headers
Addressing Entities: Binding Path Syntax
Accessing Data from an OData Model
Creating Entities
CRUD Operations
Concurrency Control and ETags
XSRF Token
Refreshing the Model
Batch Processing
Two-Way Binding
Binding-specific Parameters
Optimizing Dependent Bindings
Function Import
Language
Meta Model for OData V2
OData V4 Model
Model Instantiation and Data Access
Bindings
Creating Bindings
Path Syntax
Initialization and Read Requests
Parameters
Binding Collection Inline Count
Type Determination
Binding Modes
Suspend and Resume
Context API
Accessing Data in Controller Code
Automatic determination of $expand and $select
Data Reuse
Binding Events
Filtering
Sorting
Value Lists
OData Operations
Batch Control
Meta Model for OData V4
OData V4 Metadata JSON Format
Additional Annotation Files
Performance Aspects
Unsupported Superclass Methods and Events
Changes Compared to OData V2 Model
Creating an Entity
Deleting an Entity
Consuming OData V2 Services with the OData V4 Model
Extension for Data Aggregation
Server Messages in OData V4 Model
Currencies and Units
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
Setting the Default Binding Mode
Using Data Binding for Data Export
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
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
Enabling Responsive Paddings According to the Control Width
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
Error, Warning, and Info Messages
Validation Messages
OData V2 Messages
Message Model
Implementing Your Own OData V2 Message Parser
Routing and Navigation
Routing Configuration
Methods and Events for Navigation
Initializing and Accessing a Routing Instance
Working with Multiple Targets
Using the title Property in Targets
Enabling Routing in Nested Components
Navigate with Nested Components
Navigate with Dynamic Targets
Modules and Dependencies
Loading a Module
Multiple Module Locations
Best Practices for Loading Modules
Troubleshooting for Loading Modules
Adapting to the Modularization of the Core
Legacy jQuery.sap Replacement
Legacy Factories Replacement
Troubleshooting
Optimizing Applications
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 Densities for Controls
Options for Further Adaptation
SAPUI5 Flexibility: Adapting UIs Made Easy
Layering Concept
Example: Layering of UI Changes
Bootstrapping SAPUI5 Flexibility
Testing
Unit Testing with QUnit
Creating a QUnit Test Page
Executing a QUnit Test
Code Coverage Measurement
Sinon.JS: Spies, Stubs, Mocks, Faked Timers, and XHR
How to Test SAPUI5 Controls with QUnit
Cookbook for Testing Controls with QUnit
Integration Testing with One Page Acceptance Tests (OPA5)
Getting Started with OPA5
Cookbook for OPA5
Retrieving Controls
Structuring OPA Tests With Page Objects
Using the autoWait Parameter
Extensions for OPA5
Test Libraries for OPA5
Simulating User Interactions on Controls
Using OpaBuilder
Pitfalls and Troubleshooting
Mock Server
OData Features Supported by Mock Server
Mock Server: Frequently Asked Questions
Using Mock Data
Test Automation
Installing Karma for Automated Testing
Continuous Integration With Headless Chrome
Code Coverage
Behavior-driven Development with Gherkin
Feature Files
Additional Options for Feature Files
Basic Example How to Use Gherkin
Gherkin and OPA Page Objects
Code Coverage
Logging
Frequently Asked Questions
Test Recorder
Theming
Setting Themes
Enhanced Theming Concepts
Creating Themable User Interfaces
CSS Classes for Theme Parameters
List of Supported CSS Classes
Theming FAQ
Localization
Identifying the Language Code / Locale
Resource Bundles
Supported Locales and Fallback
Use of Localized Texts in Applications
Terminologies
Accessibility
Keyboard Handling for SAPUI5 UI Elements
Screen Reader Support for SAPUI5 Controls
High Contrast Themes for SAPUI5 Controls
Drag and Drop
Drag-and-Drop Configuration
Drag-and-Drop Metadata
Drag-and-Drop Restrictions
Spreadsheet Export
Spreadsheet Export Configuration
Data Types for Spreadsheet Export
SAP Gateway Export versus Client Export
Spreadsheet Export Restrictions
Troubleshooting
Debugging
Loading Debug Sources
Switching the SAPUI5 Version
Setting Breakpoints
Breakpoints on the Class Level
Breakpoints on the Object Level
Logging and Tracing
Technical Information Dialog
Loading Debug Sources
Technical Information Dialog on Mobile Devices
Diagnostics
Technical Information
Control Tree
Breakpoints on the Object Level
Debugging
Switching the SAPUI5 Version
Breakpoints on the Class Level
XML View and Templating Support Tools
Visualizing User Interaction
SAP Fiori Launchpad Configuration
Back-End Infrastructure
Flexibility
SAP Fiori Elements
Support Assistant
Using the Support Assistant
Rules Management
Results and Analysis
Execution Scope
Analysis Report
Integrating the Rules in OPA Tests
Support Assistant API
Running the Support Assistant on an Older SAPUI5 Version
Troubleshooting the Support Assistant
Rule Development Guide
Create a Ruleset for a Library
Create a Rule
Test a Rule
Common Rule Patterns
Guidelines and Best Practices
Test Recorder
UI5 Inspector
Performance Measurement Using sap/ui/performance/Measurement Module
Interaction Tracking for Performance Measurement
First-Aid Kit
An Empty Page Comes Up
Content or Control Is Not Visible
Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)
App or Control Looks Odd
Developing Apps
Continuous Integration: Ensure Code Quality
App Templates: Kick Start Your App Development
Worklist Template
Navigation
Busy Indication
Model Instantiation
Send Email
Testing
Device Adaptation
Stable IDs
Master-Detail Template
Navigation
Busy Indication
Model Instantiation
Master List Filtering
Send Email
Testing
Device Adaptation
Stable IDs
Basic Template
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: All You Need to Know
Reacting on User Input Events
SAPUI5 Flexibility: Enable Your App for UI Adaptation
Enabling UI Adaptation: Other Things to Consider
Troubleshooting
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 Aspects
Cross-Site Scripting
URL List Validation
Allowlist Service
Frame Options
Content Security Policy
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
Control-Specific Behavior
Dialog Controls
User Action Controls
User Input Controls
Container Controls
Display Controls
List Controls
Composite Controls
sap.ui.core.InvisibleMessage
Labeling and Tooltips
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
Perform Static Checks on SAPUI5 Apps
Using an OData Service to Load Data to the SAPUI5 ABAP Repository
Using the SAPUI5 ABAP Repository Upload and Download Reports to Synchronize
Runtime Aspects
Cache Behavior for Application Resources
Cache Buster for SAPUI5 Application Resources
Fallback: Translating Apps Using the SAPUI5 Text Repository
Text Classification
How Translated Texts Are Accessed at Runtime
Information for Translators
Placeholder Handling in Transaction SE63
Securing the SAPUI5 ABAP Repository
SAPUI5 Application Index
How is the Index Calculated?
Calculation Report - Automatic Run vs. Manual Scheduling
Component IDs - Are They Unique and Valid?
Calculation Issues
Monitoring
Creating a Login Screen
Browser Debugging for ABAP Developers
Developing Apps with SAP Fiori Elements
SAP Fiori Elements Feature Map
How To Use SAP Fiori Elements
Preparing OData Services
Working With UI Annotations
Building an App
Creating a Project
Checking Folder Structure and Project Artifacts
Replacing Standard UI Texts
Support for Terminologies
Maintaining Section Texts for the Object Page
Maintaining Standard Text for Smart Tables on List Report and Object Page
Maintaining Standard Texts for Smart Charts
Adding Cards to an Overview Page
Further Post-Generation Steps
Using the Extension Wizard
Configuring Navigation
Configuring External Navigation
Navigation from an App (Outbound Navigation)
Navigation to an App (Inbound Navigation)
Multi-Selection for Intent-Based Navigation
Enabling Quick Views for Smart Link Navigation
Configuring Quick Views for Navigation Links
Quick Views for Smart Link Navigation: Further Configuration Examples
Passing Variant IDs as URL Parameters
Configuring Internal Navigation
Changing Navigation to Object Page
Extending SAP Fiori Elements-Based Apps
Extending Generated Apps Using App Extensions
Read Before Extending a Generated App
Using the extensionAPI
Using the SecuredExecution Method
Adding Custom Messages
Adapting Transient Messages that Come from the Back End
Adapting Logic Before Save Operation
Extending the Bookmark Function to Save Static Tiles to the SAP Fiori Launchpad
Modifying Startup Parameters Using an Extension
Creating an Extension to Remove Properties from the Link for External Navigation
Extending Delivered Apps Using Adaptation Extensions
Extending Apps Using a Canvas Page
Adapting the UI
General Concepts and Configuration
Actions
Field Representations
Using Messages
Enabling the Flexible Column Layout
Adapting the Application Header
Managing Variants
Store/Restore of the Application State
Responsiveness Options: Example
Value Help as a Dropdown List
Using Images, Initials, and Icons
Keyboard Shortcuts
Initial Expansion Level for Tables in List Reports & Analytical List Pages
"Share" Functionality
Configuring Filter Bars
Enabling the Search Function
Enabling Semantic Date Range on Filter Bar
Setting Default Filter Values
Defining Filter Facets
List Report and Object Page
List Report Elements
Object Page Elements
How-To Videos
General Concepts
Tables
Editing Status
Draft Handling
Non-Draft Apps
Handling Inconsistent Input
Using Analytical Parameters from the Back End
Handling of the preferredMode Parameter
Navigation to the Next Level
Confirmation Popups for Actions
Configuring List Report Features
Enabling Variant Management
Creating a List Report Without Variant Management
Actions in the List Report
Enabling Object Creation Through Dialog in the List Report
Defining Determining Actions in List Reports
Multiple Views on List Report Tables
Defining Multiple Views on a List Report Table - Single Table Mode
Defining Multiple Views on a List Report Table - Multiple Table Mode
Defining Multiple Views on a List Report with Different Entity Sets and Table Settings
Disabling the Editing Status Filter
Adapting the Filter Bar
Configuring the Delete Dialog Box
Configuring Key Annotations that Influence the Content
Configuring Object Page Features
Defining the SmartForm Column Layout
Displaying Actions on the Object Page
Setting up the Object Page Header
Adapting the Object Page Header Title and Description
Header Facets
Enabling Simple Header Facets
Plain Text Facet
Contact Facet
Micro Chart Facet
Area Micro Chart
Bullet Micro Chart
Radial Micro Chart
Line Micro Chart
Column Micro Chart
Harvey Micro Chart
Stacked Bar Micro Chart
Comparison Micro Chart
Header Field Group
Data Points
Rating Indicator Facet
Progress Indicator Facet
Key Value Facet
Form Facet
Address Facet in the Object Page Header
Enabling Actions in Object Page Header
Navigation from Header Facets
UI Controls in Object Page Header
Enabling Editable Header Fields
Adding Subpages
Enabling the Related Apps Button
Defining and Adapting Sections
Controlling the Editability of Sections
Adding a Contact Facet
Address Facet in Sections
Chart Facet
Defining Actions in the Chart Toolbar
Hiding and Showing Reference Facets Using See More and See Less Links
Adding Action Buttons to Forms in Sections
Displaying Fields in Smartforms on Small Devices
Defining Determining Actions
Defining the Loading Behavior of Object Page Headers
Defining the Loading Behavior of Object Page Subsections
Hiding Features Using the UI.Hidden Annotation
Displaying Text and ID for Value Help Input Fields
Save and Navigation Options on the Object Page
Enabling Sub-object Creation Through Dialog on a Non-draft Object Page
Using the Smart MultiInput Control on the Object Page
Enable Variant Management for Tables and Charts in Object Page
Validating Currency and UoM Fields
Including Reuse Components on an Object Page
Placing Reuse Component Instances on the Object Page
Developing Reuse Components
Configuring Tables
Setting the Table Type
Setting the Table Header
Defining the Default Sort Order
Table Groupings
Enabling Multiple Selection in Tables
Adding Actions to Tables
Highlighting Line Items Based on Criticality
Adding a Rating Indicator to a Table
Adding a Progress Indicator to a Table
Adding a Micro Chart to a Table
Adding a Contact Quick View to a Table
Adding Multiple Fields to One Column in Responsive Tables
Using the Condensed Table Layout
Settings for List Report Tables
Defining Line Items
Displaying Images in Tables
Displaying the Editing Status
Settings for Object Page Tables
Adding Titles to Object Page Tables
Adding Segmented Buttons to a Table Toolbar
Enabling Inline Creation of Table Entries on Object Page
Generic Action Buttons in Tables on the Object Page: Additional Considerations
Rebinding a Table with Each Instance Change on an Object Page
Using the 'Export to Spreadsheet' Feature
Copying and Pasting from Microsoft Excel to Editable Tables
Adapting Texts for Confirmation Dialog Box When Deleting Lines in a Table
Configuring Further Common Features
Using Action Control for Context-Dependent Actions
Adding Action-Specific Messages to Confirmation Dialog Boxes
Adding Confirmation Popovers for Actions
Setting the Criticality for Actions
Prefilling Fields When Creating a New Entity
Status Colors and Icons
Side Effects
Side Effect Annotations: Examples
Using the Global Side Effect
Changing Default Titles for Unnamed Objects
Enabling Buttons to Display Draft / Saved Values
Providing Editable Key Fields
Configuring the Delete Confirmation Dialog Box
Extending List Reports and Object Pages Using App Extensions
Extension Points for Object Page Header Facets
Extension Points for Sections on the Object Page
Adding a Section to an Object Page
Adding Dynamic Side Content to Object Page Sections
Extension Points for Subsections on the Object Page
Extension Points for Forms on the Object Page
Finding the Right Key for the Anchor
Extension Points for Tables
Example: Applying Custom Logic When a Table is Loaded or Refreshed
Example: Adding Columns to a Responsive Table in the List Report
Example: Replacing Standard Navigation in a Responsive Table in the List Report
Example: Replacing Standard Navigation in a Responsive Table on the Object Page
Example: Enable Internal Navigation for a List Report to Object Pages of Different Entity Sets
Example: Adding Columns to a Responsive Table on the Object Page
Example: Adding Columns to a Grid Table in the List Report
Example: Adding Columns to a Grid Table in the Object Page
Example: Adding Columns to an Analytical Table on the Object Page
Example: Adding Columns to a Tree Table in the List Report
Example: Adding Custom Filter Fields in Table Toolbar
Adding Custom Actions Using Extension Points
Display of Actions Added Using Extension Points
Adding Custom Fields to the Filter Bar
Adding Filterable Field to the Smart Filter Bar
Adapting Texts in the Delete Dialog Box Using Extensions (List Report)
Adapting Texts in the Delete Dialog Box (Object Page Header)
Adapting Texts in the Delete Dialog Box (Object Page with Nested Smart Table)
Prefilling Fields When Creating a New Entity Using an Extension Point
Custom State Handling for Extended Apps
Example: Custom State Handling
Adaptation Extension Example: Adding a Button to the Table Toolbar in the List Report
Adapting the UI: List Report and Object Page
Creating a Binding Change
Referrable Content: List Report and Object Page
Worklist
Analytical List Page
Descriptor Configuration
Configuring the Title Area
Creating Key Performance Indicator Tags
Choosing Filter Modes
Configuring the Filter Area
Compact Filter Setup
Visual Filter Setup
Defining ValueList Annotation
Configuring the Content Area
Table-Only View
Chart-Only View
Hybrid View
Configuring Analytical List Page App Extensions
Refresh API
Smart Table Extensions
Chart Extensions
Creating Custom Filter
Defining Custom Actions
Adapting the UI: Analytical List Page
Overview Pages
Descriptor Configuration
Configuring Dependencies to SAPUI5 Libraries
Configuring the Global Filter
Overview Page Card
Types of Cards
Table Cards
Configuring the Table Area
Configuring the Table Card Header Area (Optional)
Customizing Table Card
List Cards
Configuring the List Area
Configuring the List Card Header Area
Customizing List Card
Link List Cards
Configuring Static Link List Card
Configuring Dynamic Link List Card
Stack Cards
Quick View Cards
Analytical Cards
Chart Cards Used in Overview Pages
Configuring Charts
Configuring Card Properties
Configuring an EntitySet with Input Parameters
Configuring Card Navigation
Configuring Card Filters
Configuring Sort Properties
Adding the OData Select Parameter
Configuring View Switch
Setting Units of Measure
Formatting Numeric Values
Highlighting Numeric Values
Coloring Cards Based on Threshold Values
Setting Authorizations for Cards
Annotations Used in Overview Pages
Configuring Overview Page App Extensions
Custom Actions
Custom Cards
Custom Filters
Custom Navigation Parameters
Custom Messages
Custom View Switch
Sharing Overview Pages
Customizing Overview Pages Using Runtime Capabilities
Key User Capabilities
Developing Apps with Analysis Path Framework (APF)
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
Administration Information for SAP S/4HANA Cloud
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
Using the Generic Runtime Application
Using Your Own Runtime Application
APF Configuration Modeler
Adding an Application
Creating a Configuration
Creating Categories
Creating Steps
Creating Hierarchical Steps
Tree Table
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
Transporting Configurations in SAP S/4HANA Cloud
Translation
Launching APF-Based Applications
Configuring the SAP Smart Business KPI Tile
Configuring the Fiori App Launcher Tile
Data Protection and Privacy
Deletion of Personal Data in SAP Business Suite powered by SAP HANA
Deletion of Personal Data in SAP S/4HANA
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
Consuming APF in SAPUI5 1.28 and Prior Releases
Outbound Navigation and Inbound Navigation
Working with Multiple Back-End Systems
Configuration Files and Their Structure
Application Configuration in SAPUI5 1.28 and Prior Releases
Descriptor (manifest.json)
Analytical Configuration
The Configuration Root Object
The Step Object
The Hierarchical Step Object
The Request Object
The Binding Object
The Representation Object
The Representation Type Object
The Facet Filter Object
The Smart Filter Bar Object
The Navigation Target Object
The Configuration Header Object
The Category Object
The Label Object
The Thumbnail Object
API Reference
Extending Apps
Using SAPUI5 Flexibility
Using Component Configuration
Example: Component Configuration
Providing Hooks in the Standard Controller
View Extension
View Modification
View Replacement
Controller Replacement
Localized Texts for Extended Apps
Caveats Regarding Stability Across Application Upgrades
Supportability
Developing Controls
Development Conventions and Guidelines
JavaScript Coding Guidelines
JavaScript Namespaces
Example for Defining a Class
SAPUI5 Control Development Guidelines
Control Development Guidelines: Theming/CSS
Product Standards and Acceptance Criteria
File Names and Encoding
JSDoc Guidelines
Common Pitfalls in JSDoc
Tools
ESLint Code Checks
ESLint Configuration File
The library.js File
Creating Control and Class Modules
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
Devices Supporting both Mouse and Touch Input
Adapting Event Handling for Devices Supporting both Mouse and Touch Input
Renderer Object
Device-specific Behavior of Controls
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 Input Rendering
Writing a Control Renderer
Prevention of Cross-site Scripting
Implementing Animation Modes
Implementing Focus Handling
Item Navigation - Supporting Keyboard Handling in List-like Controls
Integrating Item Navigation
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
Standard Composite Controls
XML Composite Controls
Example of a Simple XML Composite Control
Properties and Property Bindings
Events
Aggregations
Aggregation Forwarding
Accessibility Aspects
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
More About Controls
Busy Indicators
Cards
Date and Time Related Controls: Data Binding
Grid Controls
sap.f.GridContainer
sap.f.GridList
sap.ui.layout.cssgrid.CSSGrid
sap.ui.layout.Grid
Hyphenation for Text Controls
Semantic Pages
Semantic Page (sap.f)
Semantic Page (sap.m)
Tables: Which One Should I Choose?
sap.f
Building an App with the Flexible Column Layout and Related Classes
Flexible Column Layout
Control Structure
Types of Layout
Layout Arrows
Reacting to Layout Changes
Changing the Layout and Loading Views (Best Practices)
Flexible Column Layout Semantic Helper
Main Methods
Router
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
PDF Viewer
Personalization Dialog
Scrolling
Scrolling: Implementation Details
Scrolling: Pull to Refresh
Sliders
Split App
Text
Upload Collection
URL Helper
Examples for Triggering Telephone, Text and E-Mail Applications
sap.suite.ui.commons
Calculation Builder
Chart Container
Micro Process Flow
Network Graph
Process Flow
Status Indicator
T Account
Timeline
sap.suite.ui.microchart
Radial Micro Chart
Line Micro Chart
Stacked Bar Micro Chart
sap.tnt
sap.ui.codeeditor
Code Editor
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
Labels of the Chart
Formatting
Label Colors of the Chart
Smart Radial Micro Chart
Smart Multi Edit
Smart Multi Input
Smart Table
Smart Variant Management
sap.ui.core
Icon and Icon Pool
sap.ui.richtexteditor
sap.ui.table
sap.ui.vk
Native Viewport
Scene Tree
Step Navigation
Viewer
Viewport
sap.uxap
Object Page Layout
Object Page Headers
Object Page Classic Header
Object Page Dynamic Header
Object Page Headers Comparison
Anchor Bar
Object Page Blocks
Creating Blocks
Object Page Scrolling
Glossary
Disclaimer
Welcome