index.md

SAPUI5: UI Development Toolkit for HTML5

Demo Kit Version

• SAPUI5: UI Development Toolkit for HTML5
  • What's New in SAPUI5
    • What's New in SAPUI5 1.147
    • What's New in SAPUI5 1.146
    • Previous Versions
      • What's New in SAPUI5 1.145
      • What's New in SAPUI5 1.144
      • What's New in SAPUI5 1.143
      • What's New in SAPUI5 1.142
      • What's New in SAPUI5 1.141
      • What's New in SAPUI5 1.140
      • What's New in SAPUI5 1.139
      • What's New in SAPUI5 1.138
      • What's New in SAPUI5 1.136
      • What's New in SAPUI5 1.135
      • What's New in SAPUI5 1.134
      • What's New in SAPUI5 1.133
      • What's New in SAPUI5 1.132
      • What's New in SAPUI5 1.131
      • What's New in SAPUI5 1.130
      • What's New in SAPUI5 1.129
      • What's New in SAPUI5 1.128
      • What's New in SAPUI5 1.127
      • What's New in SAPUI5 1.126
      • What's New in SAPUI5 1.125
      • What's New in SAPUI5 1.124
      • What's New in SAPUI5 1.123
      • What's New in SAPUI5 1.122
      • What's New in SAPUI5 1.121
      • What's New in SAPUI5 1.120
      • What's New in SAPUI5 1.119
      • What's New in SAPUI5 1.118
      • What's New in SAPUI5 1.117
      • What's New in SAPUI5 1.116
      • What's New in SAPUI5 1.115
      • What's New in SAPUI5 1.114
      • What's New in SAPUI5 1.113
      • What's New in SAPUI5 1.112
      • What's New in SAPUI5 1.111
      • What's New in SAPUI5 1.110
      • What's New in SAPUI5 1.109
      • What's New in SAPUI5 1.108
      • What's New in SAPUI5 1.107
      • What's New in SAPUI5 1.106
      • What's New in SAPUI5 1.105
      • What's New in SAPUI5 1.104
      • What's New in SAPUI5 1.103
      • What's New in SAPUI5 1.102
      • What's New in SAPUI5 1.101
      • What's New in SAPUI5 1.100
      • What's New in SAPUI5 1.99
      • What's New in SAPUI5 1.98
      • What's New in SAPUI5 1.97
      • What's New in SAPUI5 1.96
      • What's New in SAPUI5 1.95
      • What's New in SAPUI5 1.94
      • What's New in SAPUI5 1.93
      • What's New in SAPUI5 1.92
      • What's New in SAPUI5 1.91
      • What's New in SAPUI5 1.90
      • What's New in SAPUI5 1.89
      • What's New in SAPUI5 1.88
      • What's New in SAPUI5 1.87
      • What's New in SAPUI5 1.86
      • What's New in SAPUI5 1.85
      • What's New in SAPUI5 1.84
      • 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
    • Change Log
  • Read Me First
    • Enterprise Features of SAPUI5
    • The UI5 Ecosystem
      • UI5 CLI
      • UI5 Linter
      • Easy-UI5 Generator
      • UI5-TypeScript
      • UI5 Web Components
      • wdi5
      • Best of UI5
    • ECMAScript Support
    • TypeScript Support
      • TypeScript FAQ
    • Browser and Platform Support
      • Visual Degradations
      • Keyboard Shortcuts for SAPUI5 Tools
    • Compatibility Rules
    • Supported Library Combinations
    • Supported Combinations of Themes and Libraries
    • Versioning and Maintenance of SAPUI5
    • Upgrading
      • Upgrading from a Version Below 1.89
      • 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
    • Best Practices for Developers
      • Don't Use Deprecated or Experimental Features
      • 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
      • Use Only Public APIs
      • Is Your Application Ready for Asynchronous Loading?
      • Performance Checklist
    • Quickstart Tutorial
      • Step 1: Ready...
      • Step 2: Steady...
      • Step 3: Go!
    • Walkthrough Tutorial (JavaScript)
      • 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: Aggregation Binding
      • Step 20: Data Types
      • Step 21: Expression Binding
      • Step 22: Custom Formatters
      • Step 23: Filtering
      • Step 24: Sorting and Grouping
      • Step 25: Remote OData Service
      • Step 26: Mock Server Configuration
      • Step 27: Unit Test with QUnit
      • Step 28: Integration Test with OPA
      • Step 29: Debugging Tools
      • Step 30: Routing and Navigation
      • Step 31: Routing with Parameters
      • Step 32: Routing Back and History
      • Step 33: Custom Controls
      • Step 34: Responsiveness
      • Step 35: Device Adaptation
      • Step 36: Content Density
      • Step 37: Accessibility
      • Step 38: Build Your Application
    • Walkthrough Tutorial (TypeScript)
      • Step 1: Hello World! (TypeScript)
      • Step 2: Bootstrap (TypeScript)
      • Step 3: Controls (TypeScript)
      • Step 4: XML Views (TypeScript)
      • Step 5: Controllers (TypeScript)
      • Step 6: Modules (TypeScript)
      • Step 7: JSON Model (TypeScript)
      • Step 8: Translatable Texts (TypeScript)
      • Step 9: Component Configuration (TypeScript)
      • Step 10: Descriptor for Applications (TypeScript)
      • Step 11: Pages and Panels (TypeScript)
      • Step 12: Shell Control as Container (TypeScript)
      • Step 13: Margins and Paddings (TypeScript)
      • Step 14: Custom CSS and Theme Colors (TypeScript)
      • Step 15: Nested Views (TypeScript)
      • Step 16: Dialogs and Fragments (TypeScript)
      • Step 17: Fragment Callbacks (TypeScript)
      • Step 18: Icons (TypeScript)
      • Step 19: Aggregation Binding (TypeScript)
      • Step 20: Data Types (TypeScript)
      • Step 21: Expression Binding (TypeScript)
      • Step 22: Custom Formatters (TypeScript)
      • Step 23: Filtering (TypeScript)
      • Step 24: Sorting and Grouping (TypeScript)
      • Step 25: Remote OData Service (TypeScript)
      • Step 26: Mock Server Configuration (TypeScript)
      • Step 27: Unit Test with QUnit (TypeScript)
      • Step 28: Integration Test with OPA (TypeScript)
      • Step 29: Debugging Tools (TypeScript)
      • Step 30: Routing and Navigation (TypeScript)
      • Step 31: Routing with Parameters (TypeScript)
      • Step 32: Routing Back and History (TypeScript)
      • Step 33: Custom Controls (TypeScript)
      • Step 34: Responsiveness (TypeScript)
      • Step 35: Device Adaptation (TypeScript)
      • Step 36: Content Density (TypeScript)
      • Step 37: Accessibility (TypeScript)
      • Step 38: Build Your Application (TypeScript)
    • Troubleshooting Tutorial
      • 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 Tutorial
      • 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 sap/ui/core/Messaging
      • Step 12: Aggregation Binding Using Templates
      • Step 13: Element Binding
      • Step 14: Expression Binding
      • Step 15: Aggregation Binding Using a Factory Function
    • OData V4 Tutorial
      • 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
      • Step 9: List-Detail Scenario
      • Step 10: Enable Data Reuse
      • Step 11: Add Table with :n Navigation to Detail Area
    • Navigation and Routing Tutorial
      • 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 Tutorial
      • 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: 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
    • OData V2 Mock Server Tutorial
      • Step 1: Initial App Without Mock Data
      • Step 2: Creating a Mock Server to Simulate Data
      • Step 3: Handling Custom URL Parameters
      • Step 4: Calling a Function Import
    • Worklist App Tutorial
      • Step 1: Creating 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
    • Flexible Column Layout App Tutorial
      • Step 1: Setting Up the Initial App
      • Step 2: Creating an Empty Flexible Column Layout
      • Step 3: Using Dynamic Page for the List 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 List-Detail Pattern
    • Rule Builder Control Tutorial
      • Decision Table
        • Features
        • Step 1: Creating an Initial Rule Control
        • Step 2: Associating the Expression Language for Decision Tables
        • Step 3: Changing the Decision Table Configuration
      • Text Rule
        • Features
        • Step 1: Creating a Rule Control
        • Step 2: Associating the Expression Language for Text Rules
        • Step 3: Changing the Text Rule Configuration
      • Summary
    • Smart Controls Tutorial
      • 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 Tutorial
      • 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 View Gallery
    • Ice Cream Machine Tutorial
      • 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
  • 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
      • Deprecated Core API
      • Configuration of the SAPUI5 Runtime
        • Configuration Options and URL Parameters
        • Deprecated Configuration Options
        • Deprecated Configuration API
        • Compatibility Version Information
    • Structuring: Components and Descriptor
      • Components
        • Component Instantiation Guide
        • Component Controller
          • Component Metadata
          • Content Creation in Components
        • Declarative API for Initial Components
        • Handling IDs in UI Components
        • The Owner Component
        • Advanced Concepts for SAPUI5 Components
      • Manifest (Descriptor for Applications, Components, and Libraries)
        • Migrating from Component Metadata to Manifest
        • Migration Information for Upgrading the Manifest File
        • Manifest for Libraries
        • Manifest for Components (Inside Libraries)
        • The resources.json File
        • Creating a Manifest File for Existing Apps
        • Manifest Dependencies to Libraries and Components
        • Manifest Model Preload
        • Enabling the Automatic Header Adaptation for Legacy Applications
    • Model View Controller (MVC)
    • Models
      • OData Models
        • OData V4 Model
          • Model Instantiation and Data Access
          • Bindings
            • Creating Bindings
            • Path Syntax
            • Initialization and Read Requests
            • Parameters
            • Binding the Count of a Collection
            • 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
          • Selection
          • 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 in a Collection
          • Creating a Single Entity
          • Draft Handling with the OData V4 Model
          • Deleting an Entity
          • Consuming OData V2 Services with the OData V4 Model (deprecated)
          • Data Aggregation and Recursive Hierarchy
          • Server Messages in the OData V4 Model
          • Currency and Unit Customizing in OData V4
          • Handling of Temporarily Unavailable Back Ends
        • 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
          • Currency and Unit Customizing in OData V2
          • Handling of Temporarily Unavailable Back Ends
        • Upgrading Your OData Model
      • JSON Model
        • Sorting and Filtering in JSON Models
        • Binding Path Syntax for JSON Models
        • Performance Impact of Model Updates
        • Using the Typed JSON Model
      • 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
    • 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 (deprecated)
        • Using CSS Style Sheets in XML Views (deprecated)
        • Handling Events in XML Views
        • Preprocessing XML Views
        • XML View Cache
        • Require Modules in XML View and Fragment
      • Typed View
      • Instantiating Views
      • JSON View (deprecated)
      • View Cloning (deprecated)
    • Controller
    • 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
          • Displaying a Specific Range of Records in a Control
          • 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
        • Dates, Times, Timestamps, and Time Zones
        • 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
      • Using Data Binding for Data Export
    • Reusing UI Parts: Fragments
      • XML Fragments
      • JS Fragments
      • Instantiation of Fragments
        • Programmatically Instantiating JS Fragments
        • Programmatically Instantiating XML Fragments
        • Instantiating Fragments in Declarative Views
        • Using Other Objects Instead of Controllers
        • Inline Definition and Instantiation of Fragments
      • Unique IDs
        • IDs in Declarative 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
      • Using Web Components
      • 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 (deprecated)
      • Enabling Declarative Support (deprecated)
      • Defining Controls (deprecated)
      • Declarative Support: Properties (deprecated)
      • Declarative Support: Associations (deprecated)
      • Declarative Support: Events (deprecated)
      • Declarative Support: Aggregations (deprecated)
      • Declarative Support: Data Binding (deprecated)
      • Compiling Declarative HTML (deprecated)
    • 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
        • Replacement of Deprecated jQuery APIs
        • Deprecated 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
      • Test Starter
        • Concept and Basic Setup
        • Configuration Options
      • Unit Testing with QUnit
        • Creating 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 the OData V2 Mock Server
        • OData V2 Mock Server: Frequently Asked Questions
        • Using Mock Data with the OData V2 Mock Server
      • Test Automation
      • 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
      • Available Themes
      • Theme Configuration and Management
      • Enhanced Theming Concepts
      • Creating Themable User Interfaces
      • Theming FAQ
    • Localization
      • Identifying the Language Code / Locale
      • Resource Bundles
      • Supported Locales and Fallback Chain
      • Use of Localized Texts in Applications
      • Terminologies
    • Accessibility
      • SAPUI5 Accessibility Features
        • Screen Reader Support for SAPUI5 Controls
        • Keyboard Handling for SAPUI5 UI Elements
        • Visualization
        • High Contrast Themes for SAPUI5 Controls
        • Messaging Patterns
      • Accessibility Support History
    • Drag and Drop
      • Drag-and-Drop Configuration
      • Drag-and-Drop Metadata
      • Drag-and-Drop Restrictions
    • Document Export
      • Spreadsheet Export
        • Spreadsheet Export Configuration
        • Data Types for Spreadsheet Export
        • Spreadsheet Export Type Features
        • Spreadsheet Export Restrictions
      • PDF Export
    • 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
        • 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
        • View or Controller Extension is Not Loaded
  • Developing Apps
    • Development Environment
      • App Development
      • Developing Apps with SAP Fiori Tools
      • App Development Using SAP Business Application Studio
      • OpenUI5 Framework Development
      • 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
    • 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
    • ID Handling in SAPUI5: The Complete Guide
    • Reacting on User Input Events
    • Whitespaces Concept
    • SAPUI5 Flexibility: Enable Your App for UI Adaptation
      • Enabling Dialogues or Popovers
      • Enabling UI Adaptation: Other Things to Consider
      • Troubleshooting
    • Coding Issues to Avoid
      • JavaScript Code Issues
      • CSS Styling Issues
      • Performance Issues
    • Securing Apps
      • Content Security Policy
      • Browser Security
      • Transport Security
      • Server Security
      • Third-Party Libraries
      • Secure Programming Aspects
      • Cross-Site Scripting
      • URL List Validation
      • Allowlist Service
      • Frame Options
    • Right-to-Left Support
      • API Properties for Right-to-Left Support in Text-Displaying Controls
    • Accessibility
      • Screen Reader Support
        • Landmark API
        • Labeling and Tooltips
        • Invisible Messaging
        • Dialogs, Popups, and Popovers
      • Keyboard Handling
        • Fast Navigation
      • Colors and Theming
      • Text Size and Fonts
      • Recommendations
    • 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
        • Deploying SAPUI5 Applications to the SAPUI5 ABAP Repository
      • Runtime Aspects
        • Cache Behavior for Application Resources
        • Cache Buster for SAPUI5 Application Resources
      • Fallback: Translating Apps Using the SAPUI5 ABAP 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
        • Check Your SAPUI5 Application
          • ATC Check SAPUI5 Component Consistency
          • ATC Check ICF Nodes for SAPUI5 Applications
        • Calculation Issues
        • Monitoring
      • Updating the ABAP SAPUI5 Patch Version
      • Browser Debugging for ABAP Developers
  • Developing Apps with SAP Fiori Elements
    • SAP Fiori Elements for OData V4
      • SAP Fiori Elements Feature Map
      • How to Use SAP Fiori Elements
        • Prerequisites for Using SAP Fiori Elements
        • Working With OData Annotations
          • Support for Extended OData Annotations
        • Security Configuration
        • Building an App
        • Extending SAP Fiori Elements-Based Apps
          • Localization of UI Texts
            • Support for Terminologies
            • Changing Default Titles of New and Unnamed Objects
            • Configuring the Delete Dialog
              • Adapting Texts for Confirmation Dialog Box When Deleting Lines in a Table
          • Using a Custom Root View
          • Custom State Handling for Extended Apps
          • Finding the Right Key for the Anchor
          • Using the ExtensionAPI
            • Using the SecuredExecution Method
            • Using Custom Code Before Standard Operations
          • Extending Delivered Apps Using Adaptation Extensions
            • Extending Delivered Apps With Key User Adaptation
              • Enabling an App for Key User Adaptation
            • Extending Delivered Apps Using Adaptation Projects
      • Building Blocks
        • The Field Building Block
          • Different Representations of a Field
            • Data Points
              • Adding a Rating Indicator to a Table
              • Adding a Progress Indicator to a Table
              • Rating Indicator Facet in the Object Page Header
              • Progress Indicator Facet in the Object Page Header
              • Key Value Facet in the Object Page Header
            • Adding a Contact Facet
              • Adding a Contact Quick View to a Table
            • Plain Text Facet in the Object Page Header
            • Configuring List Card
              • Configuring the List Area
            • Address Facet in the Object Page Header
            • Using Images and Icons
            • Enabling Stream Support
            • Using the Multi-Input Field on the Object Page
          • Configuring Fields
            • Adapting the Form
            • Additional Features of the Field
            • Formatting Numeric Values
            • Highlighting Numeric Values
            • Setting Units of Measure
            • Configuring Date Fields with a Valid Date Range
            • Status Colors and Icons
            • Handling Inconsistent Input
          • Prefilling Fields When Creating a New Entity
            • Prefilling Fields Using the DefaultValuesFunction
          • Enabling the History of Recently Entered Values
          • Field Help
            • Value Help
            • Value Help Dialog
            • Value Help as a Dropdown List
            • In/Out Mappings in the ValueList Annotation
            • Enhancing ValueList Annotations for Visual Filters
          • Toggling the Editability of Header Fields
          • Controlling the Editability of Object Page Sections
          • Grouping of Fields
          • Adding ConnectedFields to a Table
          • Adding Multiple Fields to One Column in Responsive Tables
          • Adding Custom Input Fields to the Mass Edit Dialog
        • The Form Building Block
          • The FormElement Building Block
          • Form Facet in the Object Page Header
          • Extension Points for Forms on the Object Page
        • The Table Building Block
          • Tables
            • Setting the Table Type
            • The TreeTable Building Block
              • Tree Tables
          • Configuring Tables
            • Setting the Table Header
              • Adding Titles to Object Page Tables
            • Adding Segmented Buttons to a Table Toolbar
            • Defining Line Items
            • Highlighting Line Items Based on Criticality
            • Setting the Default Column Width
            • Overriding the Horizontal Alignment of Annotation-Based Table Columns
            • Displaying Amount with Currency or Unit of Measure in Tables
            • Table Groupings
            • Handling Semantic Key Fields
            • Displaying Images in Tables
            • Enabling the Upload Functionality
            • Interacting with a Table Using the API
          • Configuring the Table Card
            • Configuring the Table Area
          • Influencing the Request Dynamically
          • Configuring the Selection Mode for Tables
          • Enabling Inline Creation Mode or Empty Row Mode for Table Entries
          • Enabling Editing Using a Dialog (Mass Edit)
          • Enabling Table Personalization
          • Configuring the AI Notice in a Column Header
          • Using the Condensed Table Layout
          • Enabling the Full-Screen Mode for Tables
          • Copying and Pasting from External Applications to Tables
          • Using the Export Button
          • Requesting Additional Properties
          • Extension Points for Tables
            • Replacing Standard Navigation in a Table
            • Example: Enable Internal Navigation to Different Detail Page
        • The FilterBar Building Block
          • Configuring Filter Bars
            • Adapting the Filter Bar
            • Configuring Default Filter Values
            • Defining Filter Facets
            • Enabling the Search Function
            • Enabling Semantic Operators in the Filter Bar
          • Configuring the Visual Filter Bar
            • Visual Filters
          • Adding Custom Fields to the Filter Bar
            • The FilterField Building Block
            • Configuring Filter Fields
          • Using Analytical Parameters from the Back End
          • Choosing Filter Modes on the Analytical List Page
          • Configuring Card Filters
          • Configuring the Global Filter on the Overview Page
        • The VariantManagement Building Block
          • Managing Variants
          • Enabling Variant Management on the Object Page
          • Creating a List Report Page Without Variant Management
          • Configuring Default Settings (Visualizations, Sort Order, Filter Values)
        • The ConditionalSwitch Building Block
        • The MicroChart Building Block
          • Area Micro Chart
          • Bullet Micro Chart
          • Column Micro Chart
          • Comparison Micro Chart
          • Harvey Micro Chart
          • Line Micro Chart
          • Radial Micro Chart
          • Stacked Bar Micro Chart
          • Adding a Micro Chart to a Table
          • Micro Chart Facet in the Object Page Header
        • The Chart Building Block
          • Line Chart
          • Time Series Chart
          • Column Chart
          • Stacked Column Chart
          • Bar Chart
          • Donut Chart
          • Bubble Chart
          • Combination Chart
          • Dual Combination Chart
          • Scatter Chart
          • Vertical Bullet Chart
          • Waterfall Chart
          • Configuring Charts
            • Adding a Chart Facet to an Object Page
            • Configuring Charts on the Overview Page
            • Enabling Chart Personalization
            • Defining Multiple Chart Configurations
        • The RichTextEditor Building Block
        • The KPITag Building Block
          • Creating Key Performance Indicators
          • Creating Key Performance Indicator Tags in Analytical Services
        • The Page Building Block
          • Extension Points for Pages
        • The FlexibleColumnLayoutActions Building Block
        • The Share Building Block
          • The Share Functionality
            • The Share: Microsoft Teams Functionality
          • Sharing Overview Pages
          • Using the Application Preview Generator
          • Creating Cards for the Insights Cards Section of My Home in SAP S/4HANA Cloud Public Edition and My Home in SAP S/4HANA
        • The Status Building Block
        • The Paginator Building Block
        • The MessageButton Building Block
        • The AINotice Building Block
        • The AlwaysEditableField Building Block
      • Global Patterns
        • Generative AI Features
        • Configuring the Application Title
        • Actions
          • Actions on the List Report Page
          • Displaying Actions on the Object Page
            • Enabling Actions in the Object Page Header
            • Adding Action Buttons to Forms in Sections
            • Defining Determining Actions
            • Save and Navigation Options on the Object Page
          • Adding Actions to Tables
          • Defining Actions in the Chart Toolbar
          • Setting Emphasized Actions
          • Setting the Criticality for Actions
          • Adding the AI Icon to Action Buttons
          • Adding Confirmation Popovers for Actions
          • Enabling Object Creation Using the Dialog on the List Report Page
          • Replacing the Standard Save Functionality in the Mass Edit Dialog
          • Adding Custom Actions Using Extension Points
            • Defining Custom Actions on the Overview Page
            • Enabling Actions Added Using Extension Points
        • Keyboard Shortcuts
        • Draft Handling
          • Editing Status
          • Disabling the Editing Status Filter
          • Toggling Between Draft and Saved Values
        • Inline Edit
        • Input Assistance
        • Store/Restore the Application State
        • Side Effects
          • Side Effect Annotations: Examples
          • Using Global Side Effects
          • Event-Driven Side Effects
        • Configuring Navigation
          • Configuring Internal Navigation
          • Configuring External Navigation
            • Navigation from an App (Outbound Navigation)
            • Navigation to an App (Inbound Navigation)
            • Defining Custom Navigation Parameters
            • Multi-Selection for Intent-Based Navigation
            • Passing Variant IDs as URL Parameters
            • Refresh Entity Sets in sap-keep-alive Mode
              • Refresh Entity Sets in sap-keep-alive Mode in the Overview Pages
              • Refresh Dataset for Back Navigation When sap-keep-alive Is Set to True
          • Enabling Quick Views for Link Navigation
            • Quick View Cards
            • Configuring the Content of Quick Views
          • Changing Navigation to Object Page
            • Navigation to the Next Level
            • Navigation to Subpages
          • Navigation from Header Facet Title
          • Configuring Card Navigation
          • Enabling the Related Apps Button
          • Creating an Extension to Modify Properties in the Navigation Context
        • Enabling the Flexible Column Layout
          • Enabling the List-Detail Mode
        • Responsiveness Options: Example
        • Using Messages
          • Displaying An Illustrated Message When No Data Is Found
          • Adding Custom Messages
            • Adding a Custom Message Strip to List Report Page, Analytical List Page and Object Page
        • Confirmation Popups
        • Enabling the Icon for Situation Handling
        • Requesting Additional Properties on the Object Page and Custom Page
      • Standard Floorplans
        • List Report Page
          • Multiple Views on the List Report Page
            • Defining Multiple Views in a List Report Page Table - Single Table Mode
            • Defining Multiple Views in a List Report Page Table - Multiple Table Mode
            • Defining Multiple Views on a List Report with Different Entity Sets and Table Settings
          • Caching the Last Executed Request
          • Loading Behavior of Data on Initial Launch of the Application
        • Worklist Page
        • Analytical List Page
          • Configuring the Manifest for the Analytical List Page
        • Object Page
          • Setting Up the Object Page Header
            • Header Facets
            • AI Notice
          • Defining and Configuring Sections
            • Including Reuse Components on an Object Page
              • Placing Reuse Component Instances on the Object Page
              • Developing Reuse Components
            • Showing and Hiding Content in Object Page Facets
            • Hiding Features Using the UI.Hidden Annotation
          • Selecting Transports for Business Configuration Content
          • Handling of the preferredMode Parameter
          • Navigation to an Object Page in Edit Mode
          • Create Mode on the Object Page
            • Enabling Object Creation Using the Dialog on the Object Page
            • Create Mode as an External App
          • Enabling Persistence Mode
          • Defining the Loading Behavior of Object Pages
          • Form Entry Object Page
        • Overview Page
          • Configuring the Manifest for the Overview Page
            • Configuring Dependencies to SAPUI5 Libraries
          • Annotations Used in Overview Pages
          • Configuring Overview Pages Using Runtime Capabilities
            • Key User Capabilities
          • Overview Page Card
            • Types of Cards
              • Table Cards
                • Configuring the Table Card Header Area (Optional)
              • List Cards
                • Configuring the List Card Header Area
              • Link List Cards
                • Configuring the Static Link List Card
                • Configuring the Dynamic Link List Card
              • Analytical Cards
              • Stack Cards
            • Configuring Card Properties
              • Configuring Sort Properties
              • Adding the OData Select Parameter
              • Configuring View Switch
              • Coloring Cards Based on Threshold Values
              • Setting Authorizations for Cards
            • Creating Custom Cards
          • Extending Custom View Switch
        • Extending Generated Apps Using App Extensions
          • Read Before Extending a Generated App
          • Extension Point for Reacting When Properties Are Updated in the Back End
          • Extensions for List-Based Pages
            • Extension Point for List Report Page Header
            • Extension Points for Views on the List Report Page
          • Extensions for Object Pages
            • Extension Points for Object Page Header Facets
            • Extension Points for Sections on the Object Page
              • Adding a Section to an Object Page Using SAP Fiori Tools
              • Adding a Custom Section to an Object Page
            • Extension Points for Subsections on the Object Page
            • Adding Dynamic Side Content to Object Page Sections
      • Custom Page
      • Further Resources
        • SAP Fiori Elements Tutorials, Courses, and Blogs
        • Feature Showcase Apps and Samples
        • FAQs
    • SAP Fiori Elements for OData V2
      • Using SAP Fiori Elements Floorplans
      • SAP Fiori Elements Feature Map
      • SAP Fiori Elements Tutorials, Courses, and Blogs
      • FAQs
      • How To Use SAP Fiori Elements
        • Prerequisites for Using SAP Fiori Elements
        • Working With OData Annotations
        • Migrating an Existing Project from SAP Web IDE
        • Building an App
          • Checking Folder Structure and Project Artifacts
          • Localization of UI Texts
        • Configuring Navigation
          • Configuring External Navigation
            • Navigation from an App (Outbound Navigation)
            • Navigation to an App (Inbound Navigation)
            • Enabling Quick Views for Link Navigation
              • Configuring the Content of Quick Views
                • Quick Views: Further Configuration Examples
            • Passing Variant IDs as URL Parameters
            • Refresh Entity Sets in sap-keep-alive Mode
          • 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
              • Migrating from registerControllerExtensions API
            • Adapting Transient Messages that Come from the Back End
            • Extending the Bookmark Function to Save Static Tiles to the SAP Fiori Launchpad
            • Modifying Startup Parameters Using an Extension
            • Creating an Extension to Modify Properties in the Navigation Context
            • Refresh Dataset for Back Navigation When sap-keep-alive Is Set to True
            • Adding a Custom Message Strip to List Report Page, Analytical List Page and Object Page Tables
          • Extending Delivered Apps Using Adaptation Extensions
            • Details of Extension Functions Used for Extending Delivered Apps
            • Extending the Delivered Apps Manifest Using an Adaptation Project
          • Extending Apps Using a Canvas Page
        • Adapting the UI
        • General Concepts and Configuration
          • Generative AI Features
          • Actions
          • Value Help
            • Value Help Dialog
            • Value Help as a Dropdown List
            • In/Out Mappings in the ValueList Annotation
          • Grouping of Fields
          • Configuring Tables
            • Defining Line Items
            • Tables
            • Setting the Table Type
            • Setting the Table Header
            • Table Groupings
            • Enabling Table Personalization
            • Configuring the Selection Mode for 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
            • Using the Condensed Table Layout
            • Enabling Editing Using a Dialog (Mass Edit)
            • Handling Semantic Key Fields
              • Adding Multiple Fields to One Column in Responsive Tables
            • Displaying Images in Tables
          • Configuring Charts
            • Defining Actions in the Chart Toolbar
            • Enabling Chart Personalization
            • Defining Multiple Chart Configurations
          • Using Messages
            • Displaying an Illustrated Message When No Data Is Found
          • Enabling the Flexible Column Layout
          • Using a Custom Root View
          • Configuring the Application Title
          • Managing Variants
          • Store/Restore the Application State
          • Responsiveness Options: Example
          • Using Images, Initials, and Icons
          • Keyboard Shortcuts
          • Setting the Default Column Width
          • Initial Expansion Level for Tables on List Report Pages & Analytical List Pages
          • Using the Application Preview Generator
          • The Share Functionality
            • The Share: Microsoft Teams Functionality
          • Creating Cards for the Insights Cards Section of My Home in SAP S/4HANA Cloud Public Edition and My Home in SAP S/4HANA
          • Configuring Default Settings (Visualizations, Sort Order, Filter Values)
          • Configuring Filter Bars
            • Enabling the Search Function
            • Enabling Semantic Operators in the Filter Bar
            • Configuring Default Filter Values
            • Defining Filter Facets
            • Adapting the Filter Bar
            • Configuring Filter Fields
          • Loading Behavior of Data on Initial Launch of the Application
      • List Report Page and Object Page
        • Elements of the List Report Page
        • Elements of the Object Page
        • Navigation to the Next Level
        • Navigation to an Object Page in Edit Mode
        • General Concepts
          • Editing Status
          • Draft Handling
          • Non-Draft Apps
          • Handling Inconsistent Input
          • Using Analytical Parameters from the Back End
          • Handling of the preferredMode Parameter
          • Confirmation Popups
        • Configuring Features of the List Report Page
          • Creating a List Report Page Without Variant Management
          • Actions on the List Report Page
            • Enabling Object Creation Using the Dialog on the List Report Page
            • Enabling Editing Using a Dialog (Mass Edit) on the List Report Page
          • Defining Determining Actions on the List Report Page
          • Multiple Views on the List Report Page
            • Defining Multiple Views on a List Report Page Table - Single Table Mode
            • Defining Multiple Views in a List Report Page Table - Multiple Table Mode
            • Defining Multiple Views on a List Report Page with Different Entity Sets and Table Settings
          • Disabling the Editing Status Filter
          • Configuring the Delete Dialog on the List Report Page
          • Settings for List Report Page Tables
          • Enabling Standard List Items and Object List Items
          • Enabling the History of Recently Entered Values
          • Creating Key Performance Indicators
        • Configuring Features of the Object Page
          • Displaying Actions on the Object Page
          • Setting Up the Object Page Header
            • Configuring 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
              • Form Facet
              • Data Points
                • Rating Indicator Facet
                • Progress Indicator Facet
                • Key Value Facet
              • Address Facet in the Object Page Header
            • Enabling Actions in the Object Page Header
            • UI Controls in Object Page Header
            • Toggling the Editability of Header Fields
            • Adding Subpages
            • Enabling the Related Apps Button
          • Defining and Adapting Sections
            • Grouping of Fields
            • Adding a Chart Facet
            • Adding a Contact Facet
            • Adding an Address Facet
            • Showing and Hiding Content in Object Page Facets
            • Adding Action Buttons to Forms in Sections
            • Displaying Fields in Smartforms on Small-Screen Devices
          • Settings for Object Page Tables
            • Adding Titles to Object Page Tables
            • Adding Segmented Buttons to a Table Toolbar
            • Create Mode on the Object Page
            • Enabling Inline Creation Mode or Empty Row Mode for Table Entries
            • Generic Action Buttons in Tables on the Object Page: Additional Considerations
            • Adding Two Tables in a Subsection
            • Rebinding a Table with Each Instance Change on an Object Page
            • Copying and Pasting from External Applications to Tables
            • Adapting Texts for Confirmation Dialog Box When Deleting Lines in a Table
          • Defining Determining Actions
          • Enabling Discovery/Persistence Mode
          • 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 Subobject Creation Through Dialog on a Non-draft Object Page
          • Using the Multi-Input Field on the Object Page
          • Enabling Variant Management on the Object Page
          • Including Reuse Components on an Object Page
            • Placing Reuse Component Instances on the Object Page
            • Developing Reuse Components
          • Selecting Transports for Business Configuration Content
        • Configuring Further Common Features
          • Using Action Control for Context-Dependent Actions
          • Adding Confirmation Popovers for Actions
          • Setting the Criticality for Actions
          • Prefilling Fields When Creating a New Entity
            • Validation of Required Fields in Non-draft Applications
          • Status Colors and Icons
          • Side Effects
            • Side Effect Annotations: Examples
            • Using Global Side Effects
          • Toggling Between Draft and Saved Values
          • Enabling the List-Detail Mode
          • Providing Editable Key Fields
          • Configuring the Delete Dialog
          • Reducing Entity Sets in Metadata Using a Feature Toggle
          • Prefilling Fields Using the DefaultValuesFunction
          • Enabling Stream Support
          • Changing Default Titles of New and Unnamed Objects
        • Extending List Report Pages and Object Pages Using App Extensions
          • Extension Points for Object Page Header Facets
          • Extension Points for Sections on the Object Page
            • Adding a Custom Section to an Object Page
            • Enabling Lazy Loading for Custom Sections
            • Adding Dynamic Side Content to Object Page Sections
          • Extension Points for Subsections on the Object Page
          • Extension Points for Forms on the Object Page
          • Extension Points for Tables
            • Example: Applying Custom Logic When a Table is Loaded or Refreshed
            • Example: Adding Columns to a Responsive Table on the List Report Page
            • Example: Replacing Standard Navigation in a Responsive Table on the List Report Page
            • Example: Replacing Standard Navigation in a Responsive Table on the Object Page
            • Example: Enable Internal Navigation to Different Detail Page
            • Example: Adding Columns to a Responsive Table on the Object Page
            • Example: Adding Columns to a Grid Table on the List Report Page
            • Example: Adding Columns to a Grid Table on the Object Page
            • Example: Adding Columns to an Analytical Table on the Object Page
            • Example: Adding Columns to a Tree Table on the List Report Page
            • Example: Adding Custom Filter Fields in Table Toolbar
          • Extension Point for List Report Page Header
          • Adding Custom Actions Using Extension Points
            • Enabling 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 Using Extensions (List Report Page)
          • Adapting Texts in the Delete Dialog (Object Page Header)
          • Adapting Texts in the Delete Dialog (Object Page with Nested Smart Table)
          • Adapting Logic Before Save Operation
          • Prefilling Fields When Creating a New Entity Using an Extension Point
          • Custom State Handling for Extended Apps
            • Example: Custom State Handling
          • Replacing the Standard Save Functionality in the Mass Edit Dialog
          • Adding Custom Input Fields to the Mass Edit Dialog
        • Adaptation Extension Example: Adding a Button to the Table Toolbar on the List Report Page
        • Adapting the UI: List Report Page and Object Page
          • Creating a Binding Change
      • Worklist Page
      • Analytical List Page
        • Configuring the Manifest for the Analytical List Page
        • Configuring the Title Area
          • Creating Key Performance Indicator Tags
          • Choosing Filter Modes
        • Configuring the Visual Filter Bar
          • Visual Filters
          • Enhancing ValueList Annotations for Visual Filters
        • Configuring the Content Area
          • Configuring the Table-Only View as the Default Option
          • Configuring the Chart-Only View as the Default Option
          • Hybrid View
          • Defining Multiple Views of a Table in an Analytical List Page
        • Configuring Analytical List Page App Extensions
          • Refresh API
          • Smart Table Extensions
          • Chart Extensions
          • Creating Custom Filters
          • Defining Custom Actions
        • Adapting the UI: Analytical List Page
      • Overview Page
        • Configuring the Manifest for the Overview Page
          • Configuring Dependencies to SAPUI5 Libraries
          • Configuring the Global Filter
          • Refresh Entity Sets in sap-keep-alive Mode in the Overview Pages
        • Overview Page Card
          • Types of Cards
            • Table Cards
              • Configuring the Table Area
              • Configuring the Table Card Header Area (Optional)
              • Configuring the Table Card
            • List Cards
              • Configuring the List Area
              • Configuring the List Card Header Area
              • Configuring the List Card
            • Link List Cards
              • Configuring the Static Link List Card
              • Configuring the Dynamic Link List Card
            • Stack Cards
              • Quick View Cards
            • Analytical Cards
              • Chart Cards Used in Overview Pages
                • Line Chart Card
                • Bubble Chart Card
                • Donut Chart Card
                • Column Chart Card
                • Stacked Column Chart Card
                • Vertical Bullet Chart Card
                • Combination Chart Card
                • Scatter Chart Card
                • Waterfall Chart Card
                • Time Series Chart Card
                • Dual Combination Chart Card
                • Bar Chart Card
              • 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
          • Defining Custom Actions
          • Creating Custom Cards
          • Adding Custom Filters
          • Defining Custom Navigation Parameters
          • Configuring Custom Messages
          • Extending Custom View Switch
        • Sharing Overview Pages
        • Configuring Overview Pages Using Runtime Capabilities
          • Key User Capabilities
  • Developing Apps with Analysis Path Framework (APF) (deprecated)
    • 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 Public 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
      • 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 Public Edition
      • 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
    • Core Mechanisms for Extending Apps
      • Configuration in the manifest.json
      • Extension Points
      • Controller Extensions
      • Further Extensions
        • View Modification
        • View Replacement
        • Controller Replacement
      • Text Customization
    • Providing Hooks in the Standard Controller
    • Extension Stability Across Application Updates
    • SAPUI5 Flexibility
  • Developing Controls
    • Development Conventions and Guidelines
      • JavaScript Coding Guidelines
      • TypeScript Guidelines
      • SAPUI5 Control Development Guidelines
      • File Names and Encoding
      • JSDoc Guidelines
      • Tools
    • The library.js File
    • Creating Control and Class Modules
    • Defining the Control Metadata
      • Object Metadata and Implementation
      • Defining Control Properties
    • Enabling Controls for SAPUI5 Flexibility
      • Which Action Has to Be Enabled for Which Control?
      • Enable a Library for Design-Time Usage
      • Enable a Control for Design-Time Usage
      • Providing Design-Time Metadata
        • Propagating the Relevant Container
        • Propagating Design-Time Metadata for Composite Controls
          • Example: Composite Controls with Propagation of Design-Time Metadata
        • Aggregation domRef Property
          • Example: Enable VerticalLayout
          • Example: Enable ScrollContainers
        • Deactivating Adaptation of Controls
        • Instance-Specific Design-Time Metadata
      • Change Handlers
        • Writing a Custom Change Handler
          • Implementing a Change Handler
          • Example: Revertible Change Handlers
          • Condensing
          • Change Visualization
          • Cleanup After XML Change Application
        • Registering Change Handlers for UI Changes
          • If You Only Use Default Change Handlers
          • If You Use at Least One Custom Change Handler
          • Registering a Change Handler for a Specific Control Instance
          • Registering Change Handlers for Specific Layers
      • How to Enable Different Actions
        • Enabling the Remove Action
          • Register a Remove Change Handler
          • Provide the Design-Time Metadata for the Remove Action
          • Remove the Last Element of an Aggregation
        • Enabling the Reveal Action
          • Register a Reveal Change Handler
          • Provide the Design-Time Metadata for the Reveal Action
        • Enabling the Rename Action
          • Implement and Register a Rename Change Handler
          • Provide the Design-Time Metadata for the Rename Action
        • Enabling the Move Action
          • Register a Move Change Handler
          • Provide the Design-Time Metadata for the Move Action
        • Enabling the AddViaDelegate Action
          • Implement and Register an AddViaDelegate Change Handler WITHOUT BaseAddViaDelegate Utility
          • Implement and Register an AddViaDelegate Change Handler WITH BaseAddViaDelegate Utility
          • Provide the Design-Time Metadata for the AddViaDelegate Action
        • Enabling the CreateContainer Action
          • Implement and Register a CreateContainer Change Handler
          • Provide the Design-Time Metadata for the CreateContainer Action
        • Enabling the AddIFrame Action
          • Implement and Register an AddIFrame Change Handler
          • Provide the Design-Time Metadata for the AddIFrame Action
        • Enabling the Settings Action
          • Provide the Design-Time Metadata for the Settings Action
          • Register a Settings Change Handler
        • Enabling the Combine Action
          • Implement and Register a Combine Change Handler
          • Provide the Design-Time Metadata for the Combine Action
          • Synchronizing Controls
        • Enabling the Split Action
          • Implement and Register a Split Change Handler
          • Provide the Design-Time Metadata for the Split Action
        • Enabling the Resize Action
          • Implement and Register a Resize Change Handler
          • Provide the Design-Time Metadata for the Resize Action
        • Enabling the Annotation Action
          • Provide the Design-Time Metadata for the Annotation Action
      • How to Enable Personalization for SAPUI5 Controls
    • 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
    • Composite Controls
      • Standard Composite Controls
      • 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
      • Theming
    • 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)
    • Pages: Which One Should I Choose?
    • Tables: Which One Should I Choose?
    • Forms: 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
        • Table Personalization (deprecated)
        • Performance of Lists and Tables
      • Message Handling
      • Message Popover
      • Personalization
        • Enablement of Personalization (With Variant Management)
        • Personalization Dialog
      • PDF Viewer
      • Scrolling
        • Scrolling: Implementation Details
        • Scrolling: Pull to Refresh
      • Sliders
      • Split App
      • Team Calendar
      • Text
      • Upload Collection (deprecated)
      • 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
      • Variant Management
        • How to replace sap.ui.comp.variants.VariantManagement
      • Input History
      • Smart Chart
      • Smart Field
      • Smart Filter Bar
        • Date Filter Fields
      • 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
        • Key User Adaptation
    • sap.ui.core
      • Icon and Icon Pool
    • sap.ui.mdc
    • sap.ui.richtexteditor.RichTextEditor
    • sap.ui.table
    • sap.ui.vk
      • Native Viewport
      • Scene Tree
      • View Gallery
      • Viewer
      • Viewport
    • sap.uxap
      • Object Page Layout
      • Object Page Header
      • Anchor Bar
      • Object Page Blocks
      • Creating Blocks
      • Object Page Scrolling
  • Glossary