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.108
    • What's New in SAPUI5 1.107
    • Previous Versions
      • 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
        • What's New in Analysis Path Framework
    • Change Log
  • Read Me First
    • Enterprise Features of SAPUI5
    • Compatibility Rules
    • Browser and Platform Support
      • Visual Degradations
      • Keyboard Shortcuts for SAPUI5 Tools
    • 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
    • Quick Start
      • Step 1: Ready...
      • Step 2: Steady...
      • Step 3: Go!
    • Walkthrough
      • Step 1: Hello World!
      • Step 2: Bootstrap
      • Step 3: Controls
      • Step 4: XML Views
      • Step 5: Controllers
      • Step 6: Modules
      • Step 7: JSON Model
      • Step 8: Translatable Texts
      • Step 9: Component Configuration
      • Step 10: Descriptor for Applications
      • Step 11: Pages and Panels
      • Step 12: Shell Control as Container
      • Step 13: Margins and Paddings
      • Step 14: Custom CSS and Theme Colors
      • Step 15: Nested Views
      • Step 16: Dialogs and Fragments
      • Step 17: Fragment Callbacks
      • Step 18: Icons
      • Step 19: 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
    • Troubleshooting
      • Step 1: Browser Developer Tools
      • Step 2: Technical Information Dialog
      • Step 3: Support Assistant
      • Step 4: Diagnostics Window
      • Step 5: UI5 Inspector
      • First-Aid Kit
        • An Empty Page Comes Up
        • Content or Control Is Not Visible
        • Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)
        • App or Control Looks Odd
    • Data Binding
      • Step 1: No Data Binding
      • Step 2: Creating a Model
      • Step 3: Create Property Binding
      • Step 4: Two-Way Data Binding
      • Step 5: One-Way Data Binding
      • Step 6: Resource Models
      • Step 7: (Optional) Resource Bundles and Multiple Languages
      • Step 8: Binding Paths: Accessing Properties in Hierarchically Structured Models
      • Step 9: Formatting Values
      • Step 10: Property Formatting Using Data Types
      • Step 11: Validation Using the Message Manager
      • Step 12: Aggregation Binding Using Templates
      • Step 13: Element Binding
      • Step 14: Expression Binding
      • Step 15: Aggregation Binding Using a Factory Function
    • OData V4
      • Step 1: The Initial App
      • Step 2: Data Access and Client-Server Communication
      • Step 3: Automatic Data Type Detection
      • Step 4: Filtering, Sorting, and Counting
      • Step 5: Batch Groups
      • Step 6: Create and Edit
      • Step 7: Delete
      • Step 8: OData Operations
      • Step 9: List-Detail Scenario
      • Step 10: Enable Data Reuse
      • Step 11: Add Table with :n Navigation to Detail Area
    • Navigation and Routing
      • Step 1: Set Up the Initial App
      • Step 2: Enable Routing
      • Step 3: Catch Invalid Hashes
      • Step 4: Add a Back Button to Not Found Page
      • Step 5: Display a Target Without Changing the Hash
      • Step 6: Navigate to Routes with Hard-Coded Patterns
      • Step 7: Navigate to Routes with Mandatory Parameters
      • Step 8: Navigate with Flip Transition
      • Step 9: Allow Bookmarkable Tabs with Optional Query Parameters
      • Step 10: Implement "Lazy Loading"
      • Step 11: Assign Multiple Targets
      • Step 12: Make a Search Bookmarkable
      • Step 13: Make Table Sorting Bookmarkable
      • Step 14: Make Dialogs Bookmarkable
      • Step 15: Reuse an Existing Route
      • Step 16: Handle Invalid Hashes by Listening to Bypassed Events
      • Step 17: Listen to Matched Events of Any Route
    • Testing
      • Step 1: Overview and Testing Strategy
      • Step 2: A First Unit Test
      • Step 3: Adding the Price Formatter
      • Step 4: Testing a New Module
      • Step 5: Adding a Flag Button
      • Step 6: A First OPA Test
      • Step 7: Changing the Table to a Growing Table
      • Step 8: Testing Navigation
      • Step 9: Adding the Post Page
      • Step 10: Test Suite and Automated Testing
      • Step 11: Testing User Input
      • Step 12: Adding a Search
      • Step 13: Testing User Interaction
      • Step 14: Adding Tabs
      • Step 15: Writing a Short Date Formatter Using TDD
      • Step 16: Adding the Date Formatter
    • OData V2 Mock Server
      • Step 1: Initial App Without Data
      • Step 2: Creating a Mock Server to Simulate Data
      • Step 3: Handling Custom URL Parameters
      • Step 4: Calling a Function Import
    • Worklist App
      • Step 1: 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
      • Step 1: Setting Up the Initial App
      • Step 2: Creating an Empty Flexible Column Layout
      • Step 3: Using Dynamic Page for the Master View
      • Step 4: Adding a Detail Page
      • Step 5: Using Object Page Layout as a Detail Page
      • Step 6: Adding a Floating Footer
      • Step 7: Routing
      • Step 8: Enhancing the Detail Page
      • Step 9: Adding a Detail-Detail Page
      • Step 10: Adding More Pages
      • Step 11: Using the Flexible Column Layout Semantic Helper
      • Step 12: Starting with Two Columns
      • Step 13: Setting the Master-Detail Pattern
    • Rule Builder Control
      • Decision Table
        • Features
        • Step 1: Creating an Initial Rule Control
        • Step 2: Associating the Expression Language 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
      • Prerequisites
      • Step 1: Smart Field
      • Step 2: Smart Field with Value Help
      • Step 3: Smart Field with Smart Link
      • Step 4: Smart Form
      • Step 5: Smart Filter Bar and Smart Table
      • Step 6: Table Personalization
      • Step 7: View Management
      • Step 8: Page Variant Management
      • Step 9: Smart Chart with Chart Personalization and View Management
      • Summary
    • 3D Viewer
      • Prerequisites
      • Step 1: 3D Viewer With Single File Loading
      • Step 2: 3D Viewer With Multiple File Loading
      • Step 3: 3D Viewer Using the Viewport Control
      • Step 4: Adding a Scene Tree
      • Step 5: Adding View Gallery
    • Ice Cream Machine
      • Step 1: Initial Application
      • Step 2: KPI Tile and Chart Tile on the Start Page
      • Step 3: Launch Tile and Slide Tile
      • Step 4: Generic Tiles in Line Mode
      • Step 5: Navigating from the Start Page to Other Pages
      • Step 6: Chart Container
      • Step 7: Header Container and Radial Micro Chart
      • Step 8: Comparison Micro Chart
      • Step 9: Delta Micro Chart
      • Step 10: Line Micro Chart
      • Step 11: Process Flow
      • Step 12: Timeline
      • Step 13: Optimizing the Process Flow Layout
    • Demo Apps
    • Best Practices for App Developers
      • Load Only What You Really Need
      • Use the MVC Concept
      • Keep Your Views Short and Simple
      • Use Stable IDs
      • Make Your App CSP Compliant
      • Use Asynchronous Loading
      • Is Your Application Ready for Asynchronous Loading?
      • Performance Checklist
  • Essentials
    • Bootstrapping: Loading and Initializing
      • Standard Variant for Bootstrapping
      • Variant for Bootstrapping from Content Delivery Network
      • noJQuery Variant for Bootstrapping
      • Initialization Process
        • Loading of Additional Resources During Bootstrap
        • Dynamic Loading of Libraries
      • Configuration of the SAPUI5 Runtime
        • Configuration Options and URL Parameters
        • Compatibility Version Information
    • Structuring: Components and Descriptor
      • Components
        • Component.js File
          • Component Metadata
          • Methods Controlling the Initial Instantiation
        • Using and Nesting Components
        • Declarative API for Initial Components
        • Handling IDs in UI Components
        • Advanced Concepts for SAPUI5 Components
      • Descriptor for Applications, Components, and Libraries (manifest.json)
        • Migrating from Component Metadata to Descriptor
        • Descriptor for Libraries
        • Descriptor for Components (Inside Libraries)
        • The resources.json File
        • Creating a Descriptor File for Existing Apps
          • Migration Information for Upgrading the Descriptor File
        • Descriptor Dependencies to Libraries and Components
        • Manifest Model Preload
        • Enabling the Automatic SAP Fiori 2.0 Header Adaptation in the Descriptor
    • Model View Controller (MVC)
      • Models
      • Views
        • XML View
          • Namespaces in XML Views
          • Aggregation Handling in XML Views
          • Control Properties and Associations in XML Views
          • Using Native HTML in XML Views
          • Using CSS Style Sheets in XML Views
          • Handling Events in XML Views
          • Preprocessing XML Views
          • XML View Cache
          • Require Modules in XML View and Fragment
        • JSON View
        • Typed View
        • Instantiating Views
        • View Cloning
      • Controller
        • Using Controller Extension
      • Support for Unique IDs
    • Data Binding
      • Binding Types
        • Property Binding
        • Context Binding (Element Binding)
        • List Binding (Aggregation Binding)
          • Using Factory Functions
          • Sorting, Grouping, and Filtering for List Binding
          • 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
        • 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
          • 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
          • Extension for Data Aggregation
          • 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
      • Enabling Declarative Support
      • Defining Controls
      • Declarative Support: Properties
      • Declarative Support: Associations
      • Declarative Support: Events
      • Declarative Support: Aggregations
      • Declarative Support: Data Binding
      • Compiling Declarative HTML
    • Error, Warning, and Info Messages
      • Validation Messages
      • OData V2 Messages
      • Message Model
      • Implementing Your Own OData V2 Message Parser
    • Routing and Navigation
      • Routing Configuration
      • Methods and Events for Navigation
      • Initializing and Accessing a Routing Instance
      • Working with Multiple Targets
      • Using the title Property in Targets
      • Enabling Routing in Nested Components
      • Navigate with Nested Components
      • Navigate with Dynamic Targets
    • Modules and Dependencies
      • Loading a Module
      • Multiple Module Locations
      • Best Practices for Loading Modules
        • Troubleshooting for Loading Modules
      • Adapting to the Modularization of the Core
        • Legacy jQuery.sap Replacement
        • Legacy Factories Replacement
        • Troubleshooting
    • Optimizing Applications
      • Resource Handling: Modularization and Localization
        • SAPUI5 Library Location Used for Testing
      • Cache Buster for SAPUI5
      • Application Cache Buster
        • Application Cache Buster: Index File
        • Application Cache Buster: Configuration
        • Application Cache Buster: Request Flow
        • Application Cache Buster: Enhanced Concept
    • Adapting to Operating Systems And Devices
      • The Device API
      • Controls with Built-In Device Adaptation
      • Checking the Operating System your Application is Running On
      • Content Densities
        • How to Use Densities for Controls
      • Options for Further Adaptation
    • SAPUI5 Flexibility: Adapting UIs Made Easy
      • Layering Concept
      • Example: Layering of UI Changes
      • Bootstrapping SAPUI5 Flexibility
    • Testing
      • Unit Testing with QUnit
        • Creating a QUnit Test Page
        • Executing a QUnit Test
        • Code Coverage Measurement
        • Sinon.JS: Spies, Stubs, Mocks, Faked Timers, and XHR
        • How to Test SAPUI5 Controls with QUnit
          • Cookbook for Testing Controls with QUnit
      • Integration Testing with One Page Acceptance Tests (OPA5)
        • Getting Started with OPA5
        • Cookbook for OPA5
        • Retrieving Controls
        • Structuring OPA Tests With Page Objects
        • Using the autoWait Parameter
        • Extensions for OPA5
        • Test Libraries for OPA5
        • Simulating User Interactions on Controls
        • Using OpaBuilder
        • Pitfalls and Troubleshooting
      • Mock Server
        • OData Features Supported by 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
      • 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
      • 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
    • Spreadsheet Export
      • Spreadsheet Export Configuration
      • Data Types for Spreadsheet Export
      • SAP Gateway Export versus Client Export
      • Spreadsheet Export Restrictions
    • Troubleshooting
      • Debugging
        • Loading Debug Sources
        • Switching the SAPUI5 Version
        • Setting Breakpoints
        • Breakpoints on the Class Level
        • Breakpoints on the Object Level
      • Logging and Tracing
      • Technical Information Dialog
        • Loading Debug Sources
        • Technical Information Dialog on Mobile Devices
      • Diagnostics
        • Technical Information
        • Control Tree
        • Breakpoints on the Object Level
        • Debugging
        • Switching the SAPUI5 Version
        • Breakpoints on the Class Level
        • XML View and Templating Support Tools
        • Visualizing User Interaction
        • SAP Fiori Launchpad Configuration
        • Back-End Infrastructure
        • Flexibility
        • SAP Fiori Elements
      • Support Assistant
        • Using the Support Assistant
          • Rules Management
          • Results and Analysis
          • Execution Scope
          • Analysis Report
          • Integrating the Rules in OPA Tests
          • Support Assistant API
          • Running the Support Assistant on an Older SAPUI5 Version
          • Troubleshooting the Support Assistant
        • Rule Development Guide
          • Create a Ruleset for a Library
          • Create a Rule
          • Test a Rule
          • Common Rule Patterns
          • Guidelines and Best Practices
      • Test Recorder
      • UI5 Inspector
      • Performance Measurement Using sap/ui/performance/Measurement Module
      • Interaction Tracking for Performance Measurement
      • First-Aid Kit
        • An Empty Page Comes Up
        • Content or Control Is Not Visible
        • Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS)
        • App or Control Looks Odd
  • Developing Apps
    • Development Environment
      • App Development
      • Developing Apps with SAP Fiori Tools
      • App Development Using SAP Business Application Studio
      • Developing OpenUI5
      • Other Environments
        • Development for Hybrid Web Containers
        • Former Environments
          • App Development Using SAP Web IDE
            • Access SAP Web IDE
            • Start SAP Web IDE
            • Create a neo-app.json Project Configuration File
            • Create an index.html File
            • Run the App
            • Create a Northwind Destination
    • Continuous Integration: Ensure Code Quality
    • 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
    • SAPUI5 Flexibility: Enable Your App for UI Adaptation
      • Enabling UI Adaptation: Other Things to Consider
      • Troubleshooting
    • Coding Issues to Avoid
      • JavaScript Code Issues
      • CSS Styling Issues
      • Performance Issues
    • Securing Apps
      • 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
      • Using the SAPUI5 ABAP Repository Upload and Download Reports to Synchronize
      • Runtime Aspects
        • Cache Behavior for Application Resources
        • Cache Buster for SAPUI5 Application Resources
      • Fallback: Translating Apps Using the SAPUI5 Text Repository
        • Text Classification
        • How Translated Texts Are Accessed at Runtime
        • Information for Translators
        • Placeholder Handling in Transaction SE63
      • Securing the SAPUI5 ABAP Repository
      • SAPUI5 Application Index
        • How is the Index Calculated?
        • Calculation Report - Automatic Run vs. Manual Scheduling
        • Check Your SAPUI5 Application
        • Calculation Issues
        • Monitoring
      • Creating a Login Screen
      • Browser Debugging for ABAP Developers
  • Developing Apps with SAP Fiori Elements
    • Why Use SAP Fiori Elements?
    • Using SAP Fiori Elements Floorplans
    • SAP Fiori Elements Feature Map
    • SAP Fiori Elements Tutorials
    • How To Use SAP Fiori Elements
      • Prerequisites for Using SAP Fiori Elements
      • Working With UI Annotations
      • Building an App
        • Building an App - Additional Option
          • Creating a Project
          • Checking Folder Structure and Project Artifacts
          • Adding Cards to an Overview Page
          • Further Post-Generation Steps
          • Using the Extension Wizard
        • Localization of UI Texts
          • Support for Terminologies
          • Maintaining Standard Texts for Tables
          • Maintaining Standard Texts for Charts
      • Configuring Navigation
        • Configuring External Navigation
          • Navigation to an App (Inbound Navigation)
          • Multi-Selection for Intent-Based 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
          • 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 Data Set for Back Navigation When sap-keep-alive Is Set to True
          • Adding a Custom Message Strip to List Report, 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
        • Actions
        • Configuring Fields
          • Different Representations of a Field
          • Field Help
            • Value Help as a Dropdown List
            • In/Out Mappings in the ValueList Annotation
          • Grouping of Fields
          • Further Features of the Field
        • Configuring Tables
          • Defining Line Items
          • Tables
          • Setting the Table Type
          • Setting the Table Header
          • Table Groupings
          • Enabling Table Personalization
          • Enabling Multiple Selection in Tables
          • Adding Actions to Tables
          • Highlighting Line Items Based on Criticality
          • Adding a Rating Indicator to a Table
          • Adding a Progress Indicator to a Table
          • Adding a Micro Chart to a Table
          • Adding a Contact Quick View to a Table
          • Adding Multiple Fields to One Column in Responsive Tables
          • Using the Condensed Table Layout
          • Enabling Editing Using a Dialog (Mass Edit)
          • Enabling the Full-Screen Mode for Tables
          • Overriding the Horizontal Alignment of Annotation-Based Table Columns
          • Handling Semantic Key Fields
          • Displaying Images in Tables
        • Configuring Charts
          • Defining Actions in the Chart Toolbar
        • Using Messages
        • Enabling the Flexible Column Layout
        • Adapting the Application Header
        • 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 in List Reports & Analytical List Pages
        • "Share" Functionality
        • 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 Based on the Chosen Variant
    • List Report and Object Page
      • List Report Elements
      • Object Page Elements
      • How-To Videos
      • 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 List Report Features
        • Creating a List Report without Variant Management
        • Actions in the List Report
          • Enabling Object Creation Using the Dialog in the List Report
          • Enabling Editing Using a Dialog (Mass Edit) in the List Report
        • Defining Determining Actions in List Reports
        • Multiple Views on List Report Tables
          • Defining Multiple Views on a List Report Table - Single Table Mode
          • Defining Multiple Views on a List Report Table - Multiple Table Mode
          • Defining Multiple Views on a List Report with Different Entity Sets and Table Settings
        • Disabling the Editing Status Filter
        • Configuring the Delete Dialog Box
        • Settings for List Report Tables
        • Enabling Standard List Items and Object List Items
        • Enable the History of Recently Entered Values
      • Configuring Object Page Features
        • Displaying Actions on the Object Page
        • Setting Up the Object Page Header
          • Adapting the Object Page Header Title and Description
          • Header Facets
            • Enabling Simple Header Facets
            • Plain Text Facet
            • Contact Facet
            • Micro Chart Facet
              • Area Micro Chart
              • Bullet Micro Chart
              • Radial Micro Chart
              • Line Micro Chart
              • Column Micro Chart
              • Harvey Micro Chart
              • Stacked Bar Micro Chart
              • Comparison Micro Chart
            • Header Field Group
            • Data Points
              • Rating Indicator Facet
              • Progress Indicator Facet
              • Key Value Facet
            • Form Facet
            • Address Facet in the Object Page Header
          • Enabling Actions in the Object Page Header
          • Navigation from Header Facet Title
          • 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
          • Controlling the Editability of Sections
          • Adding a Chart Facet
          • Adding a Contact Facet
          • Address Facet in Sections
          • Showing and Hiding Content in Object Page Facets
          • Adding Action Buttons to Forms in Sections
          • Displaying Fields in Smartforms on Small Devices
        • Settings for Object Page Tables
          • Adding Titles to Object Page Tables
          • Adding Segmented Buttons to a Table Toolbar
          • Enabling Inline Creation Mode or Empty Rows 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
          • Using the Export Feature
          • Copying and Pasting from Spreadsheet Applications to Tables
          • Adapting Texts for Confirmation Dialog Box When Deleting Lines in a Table
        • Defining Determining Actions
        • Enabling Persistence Mode
        • Defining the Loading Behavior of Object Page Headers
        • Defining the Loading Behavior of Object Page Subsections
        • Hiding Features Using the UI.Hidden Annotation
        • Displaying Text and ID for Value Help Input Fields
        • Save and Navigation Options on the Object Page
        • Enabling Sub-object Creation Through Dialog on a Non-draft Object Page
        • Using the Multi-Input Field on the Object Page
        • Enabling Variant Management in the Object Page
        • Including Reuse Components on an Object Page
          • Placing Reuse Component Instances on the Object Page
          • Developing Reuse Components
      • Configuring Further Common Features
        • Using Action Control for Context-Dependent Actions
        • Adding Action-Specific Messages to Confirmation Dialog Boxes
        • Adding Confirmation Popovers for Actions
        • Setting the Criticality for Actions
        • Configuring Custom Actions that Create New Objects
        • 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 the Global Side Effect
        • Changing Default Titles of New and Unnamed Objects
        • Toggling Between Draft and Saved Values
        • Providing Editable Key Fields
        • Configuring the Delete Confirmation Dialog Box
        • Reducing Entity Sets in Metadata Using a Feature Toggle
        • Support for Extended OData Annotations
        • Prefilling Fields Using the DefaultValuesFunction
        • Enabling Stream Support
        • Enabling the Icon for Situation Handling
      • Extending List Reports and Object Pages Using App Extensions
        • Extension Points for Object Page Header Facets
        • Extension Points for Sections on the Object Page
          • Adding a Section to an Object Page
          • Adding Dynamic Side Content to Object Page Sections
        • Extension Points for Subsections on the Object Page
        • Extension Points for Forms on the Object Page
        • Finding the Right Key for the Anchor
        • Extension Points for Tables
          • Example: Applying Custom Logic When a Table is Loaded or Refreshed
          • Example: Adding Columns to a Responsive Table in the List Report
          • Example: Replacing Standard Navigation in a Responsive Table in the List Report
          • Example: Replacing Standard Navigation in a Responsive Table on the Object Page
          • Example: Enable Internal Navigation to Different Detail Page
          • Example: Adding Columns to a Responsive Table on the Object Page
          • Example: Adding Columns to a Grid Table in the List Report
          • Example: Adding Columns to a Grid Table in the Object Page
          • Example: Adding Columns to an Analytical Table on the Object Page
          • Example: Adding Columns to a Tree Table in the List Report
          • Example: Adding Custom Filter Fields in Table Toolbar
        • Extension Points for Pages
        • Extension Points for Views in the List Report
        • 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 Box Using Extensions (List Report)
        • Adapting Texts in the Delete Dialog Box (Object Page Header)
        • Adapting Texts in the Delete Dialog Box (Object Page with Nested Smart Table)
        • Adapting Logic Before Save Operation
        • Using Custom Code Before Standard Operations
        • 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 a Custom ViewExtension in the Mass Edit Dialog
      • Adaptation Extension Example: Adding a Button to the Table Toolbar in the List Report
      • Building Blocks
        • The Field Building Block
        • The Form Building Block
        • The FormElement Building Block
        • The Table Building Block
        • The FilterBar Building Block
        • The FilterField Building Block
        • The MicroChart Building Block
        • The Chart Building Block
        • The FlexibleColumnLayoutActions Building Block
        • The Share Building Block
        • The Paginator Building Block
      • Adapting the UI: List Report and Object Page
        • Creating a Binding Change
        • Enabling an App for Key User Adaptation
    • Worklist
    • Analytical List Page
      • Descriptor Configuration 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 Filter
        • Defining Custom Actions
      • Adapting the UI: Analytical List Page
    • Overview Pages
      • Descriptor Configuration 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)
            • Customizing Table Card
          • List Cards
            • Configuring the List Area
            • Configuring the List Card Header Area
            • Customizing List Card
          • Link List Cards
            • Configuring Static Link List Card
            • Configuring Dynamic Link List Card
          • Stack Cards
            • Quick View Cards
          • Analytical Cards
            • Chart Cards Used in Overview Pages
              • 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
        • Custom Actions
        • Custom Cards
        • Custom Filters
        • Custom Navigation Parameters
        • Custom Messages
        • Custom View Switch
      • Sharing Overview Pages
      • Customizing Overview Pages Using Runtime Capabilities
        • Key User Capabilities
    • Form Entry Object Page
  • Developing Apps with Analysis Path Framework (APF)
    • Analytical Applications Based on APF
    • Setting Up APF and the APF Configuration Modeler
      • Data Sources
      • Implementation Information for SAP Business Suite powered by SAP HANA and SAP BW on SAP HANA
      • Implementation Information for SAP S/4HANA
      • Administration Information for SAP S/4HANA Cloud
    • Authorization Concept
      • Authorization Information for SAP Business Suite powered by SAP HANA
      • Authorization Information for SAP S/4HANA
    • Enhancing an APF-Based Application
    • Creating Your Own Application
      • Using the Generic Runtime Application
      • Using Your Own Runtime Application
    • APF Configuration Modeler
      • Adding an Application
      • Creating a Configuration
      • Creating Categories
      • Creating Steps
      • Creating Hierarchical Steps
        • Tree Table
      • Creating Representations
      • Configuring Filters
        • Individually Configured Filters
          • Filter Dependencies
          • Use Cases for Configuring Filters
            • Use Case 1: Filter Independent of Smart Business
            • Use Case 2: Filter Determined by Smart Business Context Only
            • Use Case 3: Filter with Default Values Determined by Smart Business Context
            • Use Case 4: No Filter
            • Erroneous Filter Configuration
        • Smart Filter Bar
      • Creating Navigation Targets
      • Executing a Configuration
      • Deleting Objects
      • Text Pool Cleanup
      • Import
      • Export
      • Transporting Configurations in SAP S/4HANA Cloud
      • Translation
    • Launching APF-Based Applications
      • Configuring the SAP Smart Business KPI Tile
      • Configuring the Fiori App Launcher Tile
    • Data Protection and Privacy
      • Deletion of Personal Data in SAP Business Suite powered by SAP HANA
      • Deletion of Personal Data in SAP S/4HANA
    • APF Modules
      • The Core Module (sap.apf.core)
      • The UI Module
        • The Analysis Step Container
        • The Step Toolbar
        • The Analysis Path Display
        • The Analysis Step Gallery
        • The Analysis Path Gallery
        • Predefined Representation Types
        • Rendering of Charts
    • Concepts
      • Analysis Path Processing
      • Consuming APF
        • Consuming APF in SAPUI5 1.28 and Prior Releases
      • Outbound Navigation and Inbound Navigation
      • Working with Multiple Back-End Systems
    • Configuration Files and Their Structure
      • Application Configuration in SAPUI5 1.28 and Prior Releases
      • Descriptor (manifest.json)
      • Analytical Configuration
        • The Configuration Root Object
        • The Step Object
          • The Hierarchical Step Object
        • The Request Object
        • The Binding Object
        • The Representation Object
        • The Representation Type Object
        • The Facet Filter Object
        • The Smart Filter Bar Object
        • The Navigation Target Object
        • The Configuration Header Object
        • The Category Object
        • The Label Object
        • The Thumbnail Object
    • API Reference
  • Extending Apps
    • Using SAPUI5 Flexibility
    • Using Component Configuration
      • Example: Component Configuration
      • Providing Hooks in the Standard Controller
      • View Extension
      • View Modification
      • View Replacement
      • Controller Replacement
    • Localized Texts for Extended Apps
    • Caveats Regarding Stability Across Application Upgrades
    • Supportability
  • Developing Controls
    • Development Conventions and Guidelines
      • JavaScript Coding Guidelines
        • JavaScript Namespaces
        • Example for Defining a Class
      • SAPUI5 Control Development Guidelines
        • Control Development Guidelines: Theming/CSS
      • Product Standards and Acceptance Criteria
      • File Names and Encoding
      • JSDoc Guidelines
        • JSDoc Visibility Tags
        • Common Pitfalls in JSDoc
      • Tools
        • ESLint Code Checks
        • ESLint Configuration File
    • The library.js File
    • Creating Control and Class Modules
    • Defining the Control Metadata
      • Object Metadata and Implementation
      • Defining Control Properties
    • Adding Method Implementations
      • Normal Methods
      • init() Method
      • exit() Method
      • Event Handler Methods
      • Browser Events
      • Mobile Events
      • Devices Supporting both Mouse and Touch Input
        • Adapting Event Handling for Devices Supporting both Mouse and Touch Input
      • Renderer Object
    • Device-specific Behavior of Controls
    • Examples for Creating and Extending Controls
      • Creating a Simple Control
      • Creating a Simple Square Control
      • Creating a Simple Container Control
      • Extending Buttons with Additional Events
      • Extending Input Rendering
    • Writing a Control Renderer
      • Prevention of Cross-site Scripting
    • Implementing Animation Modes
    • Implementing Focus Handling
    • Item Navigation - Supporting Keyboard Handling in List-like Controls
      • Integrating Item Navigation
    • Right-to-Left Support in Controls
      • Right-to-Left Support Guidelines for Control Development
      • Programmatic Access to RTL
      • Troubleshooting Common RTL Issues
    • Defining Groups for Fast Navigation
    • 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)
    • Tables: Which One Should I Choose?
    • sap.f
      • Building an App with the Flexible Column Layout and Related Classes
        • Flexible Column Layout
          • Control Structure
          • Types of Layout
          • Layout Arrows
          • Reacting to Layout Changes
          • Changing the Layout and Loading Views (Best Practices)
        • Flexible Column Layout Semantic Helper
          • Main Methods
        • Router
    • sap.m
      • App and Nav Container
        • Events Fired Centrally by the App or the NavContainer
        • Events Fired on the Pages
        • Passing Data when Navigating
      • Facet Filter
        • Facet Filter: Simple Type
        • Facet Filter: Light Type
        • Facet Filter List and Facet Filter Item
        • Events for Facet Filters
        • Data Binding for Facet Filters
        • Filter Search
        • Facet Filter Selection
        • Dependent Facets
      • Feed Input
      • Feed List Item
      • Flex Box
        • Getting Started With FlexBox
        • Important FlexBox Layout Concepts
      • Generic Tile
      • Image
      • List, List Item, and Table
        • Lists
          • Custom List Item
        • Swipe for Action
          • Aggregation
          • Events
          • Methods
          • Properties
        • Creating Tables
        • Configuring Responsive Behavior of a Table
        • Defining Column Width
        • Table Design
        • List and Table Events
        • Growing Feature for Table and List
        • Table Personalization
        • Performance of Lists and Tables
      • Message Handling
      • Message Popover
      • PDF Viewer
      • Personalization
      • 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
      • Input History
      • Smart Chart
      • Smart Field
      • Smart Filter Bar
      • Smart Form
      • Smart Link
      • Smart Micro Chart
        • Smart Bullet Micro Chart
        • Smart Area Micro Chart
          • Labels of the Chart
          • Formatting
          • Label Colors of the Chart
        • Smart Radial Micro Chart
      • Smart Multi Edit
      • Smart Multi Input
      • Smart Table
      • Smart Variant Management
        • Key User Adaptation
    • sap.ui.core
      • Icon and Icon Pool
    • sap.ui.richtexteditor
    • sap.ui.table
    • sap.ui.vk
      • Native Viewport
      • Scene Tree
      • View Gallery
      • Viewer
      • Viewport
    • sap.uxap
      • Object Page Layout
      • Object Page Headers
        • Object Page Classic Header
        • Object Page Dynamic Header
        • Object Page Headers Comparison
      • Anchor Bar
      • Object Page Blocks
      • Creating Blocks
      • Object Page Scrolling
  • Glossary