index.md

OpenUI5: UI Development Toolkit for HTML5

OpenUI5 Version for the OpenUI5 Demo Kit

• OpenUI5: UI Development Toolkit for HTML5
  • What's New in OpenUI5
    • What's New in OpenUI5 1.131
    • Previous Versions
      • What's New in OpenUI5 1.130
      • What's New in OpenUI5 1.129
      • What's New in OpenUI5 1.128
      • What's New in OpenUI5 1.127
      • What's New in OpenUI5 1.126
      • What's New in OpenUI5 1.125
      • What's New in OpenUI5 1.124
      • What's New in OpenUI5 1.123
      • What's New in OpenUI5 1.122
      • What's New in OpenUI5 1.121
      • What's New in OpenUI5 1.120
      • What's New in OpenUI5 1.119
      • What's New in OpenUI5 1.118
      • What's New in OpenUI5 1.117
      • What's New in OpenUI5 1.116
      • What's New in OpenUI5 1.115
      • What's New in OpenUI5 1.114
      • What's New in OpenUI5 1.113
      • What's New in OpenUI5 1.112
      • What's New in OpenUI5 1.111
      • What's New in OpenUI5 1.110
      • What's New in OpenUI5 1.109
      • What's New in OpenUI5 1.108
      • What's New in OpenUI5 1.107
      • What's New in OpenUI5 1.106
      • What's New in OpenUI5 1.105
      • What's New in OpenUI5 1.104
      • What's New in OpenUI5 1.103
      • What's New in OpenUI5 1.102
      • What's New in OpenUI5 1.101
      • What's New in OpenUI5 1.100
      • What's New in OpenUI5 1.99
      • What's New in OpenUI5 1.98
      • What's New in OpenUI5 1.97
      • What's New in OpenUI5 1.96
      • What's New in OpenUI5 1.95
      • What's New in OpenUI5 1.94
      • What's New in OpenUI5 1.93
      • What's New in OpenUI5 1.92
      • What's New in OpenUI5 1.91
      • What's New in OpenUI5 1.90
      • What's New in OpenUI5 1.89
      • What's New in OpenUI5 1.88
      • What's New in OpenUI5 1.87
      • What's New in OpenUI5 1.86
      • What's New in OpenUI5 1.85
      • What's New in OpenUI5 1.84
      • What's New in OpenUI5 1.82
      • What's New in OpenUI5 1.81
      • What's New in OpenUI5 1.80
      • What's New in OpenUI5 1.79
      • What's New in OpenUI5 1.78
      • What's New in OpenUI5 1.77
      • What's New in OpenUI5 1.76
      • What's New in OpenUI5 1.75
      • What's New in OpenUI5 1.74
      • What's New in OpenUI5 1.73
      • What's New in OpenUI5 1.72
      • What's New in OpenUI5 1.71
      • What's New in OpenUI5 1.70
      • What's New in OpenUI5 1.69
      • What's New in OpenUI5 1.68
      • What's New in OpenUI5 1.67
      • What's New in OpenUI5 1.66
      • What's New in OpenUI5 1.65
      • What's New in OpenUI5 1.64
      • What's New in OpenUI5 1.63
      • What's New in OpenUI5 1.62
      • What's New in OpenUI5 1.61
      • What's New in OpenUI5 1.60
      • What's New in OpenUI5 1.58
      • What's New in OpenUI5 1.56
      • What's New in OpenUI5 1.54
      • What's New in OpenUI5 1.52
      • What's New in OpenUI5 1.50
      • What's New in OpenUI5 1.48
      • What's New in OpenUI5 1.46
      • What's New in OpenUI5 1.44
      • What's New in OpenUI5 1.42
      • What's New in OpenUI5 1.40
      • What's New in OpenUI5 1.38
    • Change Log
  • Read Me First
    • Enterprise Features of OpenUI5
    • The UI5 Ecosystem
      • UI5 Tooling
      • UI5 Linter
      • Easy-UI5 Generator
      • UI5-TypeScript
      • wdi5
      • Best of UI5
    • ECMAScript Support
    • TypeScript Support
      • TypeScript FAQ
    • Browser and Platform Support
      • Visual Degradations
      • Keyboard Shortcuts for OpenUI5 Tools
    • Compatibility Rules
    • Supported Library Combinations
    • Supported Combinations of Themes and Libraries
    • Versioning and Maintenance of OpenUI5
    • 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
    • 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 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
    • 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
  • 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 OpenUI5 Runtime
        • Configuration Options and URL Parameters
        • Deprecated Configuration Options
        • Deprecated Configuration API
        • Compatibility Version Information
    • Structuring: Components and Descriptor
      • Components
        • Component Controller
          • Component Metadata
          • Methods Controlling the Initial Instantiation
        • Using and Nesting Components
        • Declarative API for Initial Components
        • Handling IDs in UI Components
        • The Owner Component
        • Advanced Concepts for OpenUI5 Components
      • Manifest (Descriptor for Applications, Components, and Libraries)
        • Migrating from Component Metadata to Manifest
        • Manifest for Libraries
        • Manifest for Components (Inside Libraries)
        • The resources.json File
        • Creating a Manifest File for Existing Apps
          • Migration Information for Upgrading the Manifest File
        • Manifest Dependencies to Libraries and Components
        • Manifest Model Preload
        • Enabling the Automatic SAP Fiori 2.0 Header Adaptation in the Manifest
    • 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 (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
        • 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
          • 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
      • 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
          • Currency and Unit Customizing in 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
          • 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
          • Draft Handling with the OData V4 Model
          • Deleting an Entity
          • Consuming OData V2 Services with the OData V4 Model
          • Data Aggregation and Recursive Hierarchy
          • Server Messages in the OData V4 Model
          • Currency and Unit Customizing in OData V4
        • 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
      • 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
      • 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
        • Deprecated jQuery.sap API Replacement
        • Deprecated Factories Replacement
        • Troubleshooting
    • Optimizing Applications
      • Resource Handling: Modularization and Localization
        • OpenUI5 Library Location Used for Testing
      • Cache Buster for OpenUI5
      • 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
    • 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 OpenUI5 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
        • 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
      • Available Themes
      • 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 Chain
      • Use of Localized Texts in Applications
      • Terminologies
    • Accessibility
      • OpenUI5 Accessibility Features
        • Screen Reader Support for OpenUI5 Controls
        • Keyboard Handling for OpenUI5 UI Elements
        • Visualization
        • High Contrast Themes for OpenUI5 Controls
        • Messaging Patterns
      • Accessibility Support History
    • Drag and Drop
      • Drag-and-Drop Configuration
      • Drag-and-Drop Metadata
      • Drag-and-Drop Restrictions
    • Troubleshooting
      • Debugging
        • Loading Debug Sources
        • Switching the OpenUI5 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 OpenUI5 Version
        • Breakpoints on the Class Level
        • XML View and Templating Support Tools
        • Visualizing User Interaction
      • 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 OpenUI5 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
      • 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
    • Stable IDs: All You Need to Know
    • Reacting on User Input Events
    • Whitespaces Concept
    • 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
  • Extending Apps
    • 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
      • TypeScript Guidelines
      • OpenUI5 Control Development Guidelines
        • Control Development Guidelines: Theming/CSS
      • Product Standards and Acceptance Criteria
        • Annotations in Translation Files
      • File Names and Encoding
      • Git Guidelines
      • JSDoc Guidelines
      • Tools
    • 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
    • Composite Controls
      • Standard Composite Controls
      • Aggregation Forwarding
    • Accessibility Aspects
      • Keyboard Handling for OpenUI5 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 OpenUI5 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.tnt
    • sap.ui.codeeditor
      • Code Editor
    • sap.ui.core
      • Icon and Icon Pool
    • sap.ui.mdc
    • sap.ui.table
    • 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