UI Development Toolkit for HTML5 (SAPUI5)
Read Me First
Versioning of SAPUI5
Browser and Platform Support
sap.ui.core, sap.ui.layout, sap.ui.unified
sap.m, sap.ui.table
Device-Specific Policies
Visual Degradations
sap.ui.comp
sap.viz
sap.ui.vbm
sap.suite.ui.commons
sap.ushell
sap.makit
sap.ui.commons, sap.ui.ux3
Compatibility Rules
Support and Maintenance Strategy
Available Documentation
Get Started
Installing SAPUI5
Support and Maintenance Strategy
SAPUI5 Tools
SAPUI5 Tools Installation
Upgrading SAPUI5 Tools
Uninstalling SAPUI5 Tools
SAPUI5 Runtime Installation
Upgrading jQuery for SAPUI5
Tutorials
Create Your First SAPUI5 Application
Create Your First Mobile SAPUI5 Application
Create an HTML Page for Your App
Initialize the Mobile App
Add Content Pages
Run Your First Mobile App
Develop Your First Application using SAPUI5 Tools
Create an SAPUI5 Application Project
Add a Control to Your View
Implement a Method in the Controller
Create an Additional View
Integrate a New View
JavaScript Code Completion
Linking your Eclipse Editor to the Demo Kit
Use JavaScript and XML Templates
SAPUI5 Snippets
Application Best Practices
Preparing
Building
Step 1: Index
Step 2: Component
Step 3: Navigation and Routing
Step 4: Internationalization
Step 5: Device Model
Step 6: Custom Utilities
Step 7: Model View Controller
Step 8: Master View
Step 9: Detail View
Step 10: Detail XML Fragments
Step 11: AddProduct View
Step 12: NotFound View
Summary
Testing SAPUI5 Applications
Test Your SAPUI5 Application on an ABAP Server
Test in SAPUI5 Application Preview
Test Your SAPUI5 Application on a Java Web Server
Use a SimpleProxyServlet for Testing to Avoid Cross-domain Requests
Set up Tomcat to test SAPUI5 applications
The SAPUI5 Mock Server
Concepts
Model View Controller (MVC)
Models
Views
JS Views
XML Views
JSON Views
HTML Views
Controllers
Data Binding
Binding Modes
Resource Handling
Libraries and Supported Combinations
Components
Fragments
HTML Fragments
XML Fragments
JS Fragments
Messages
UI Messages
Server Messages
Message Manager
Message Model
Message Parser
Initializing and Loading
Bootstrapping: Loading and Initializing SAPUI5 in HTML Pages
Standard Variant for Bootstrapping
Variant for Bootstrapping from Content Delivery Network
noJQuery Variant for Bootstrapping
Preload Variant for Bootstrapping
All-in-one per Library Variant for Bootstrapping
sap-ui5 Variant for Bootstrapping
Initialization Process
Loading of Additional Resources During Bootstrap
Dynamic Loading of Libraries
Configuration of the SAPUI5 Runtime
Configuration Options
Using Runtime Default Values for Configuration
Using Script Tag Attributes for Configuration
Using Single and Complex Attributes for Configuration
Using the Global Configuration Object for Configuration
Using URL Parameters for Configuration
Using a Runtime Configuration Object for Configuration
Compatibility Version Information
Models and Data Binding
Data Binding: Getting Started
Models and Data Binding in Applications
Instantiating Models
Instantiating a Resource Model
Binding Path Syntax for Resource Models
Binding Texts to a Resource Bundle
Instantiating a JSON Model
Sorting and Filtering in JSON Models
Binding Path Syntax for JSON Models
Instantiating an OData Model
Binding Path Syntax for OData Models
OData Write Support
Experimental Two-Way Binding
Instantiating an XML Model
Sorting and Filtering in XML Models
XML Namespace Support
Binding Path Syntax for XML Models
Instantiating a Custom Model
Assigning the Model to the UI
Defining a Binding Path
Binding Controls to the Model
Setting the Default Binding Mode
Multimodel Support
Binding Types
Property Binding
Aggregation Binding
Element Binding
Using the Data Binding Type System
Example: Using Data Types
Handling Wrong User Input
Simple Types
sap.ui.model.type.Integer
sap.ui.model.type.Float
sap.ui.model.type.String
sap.ui.model.type.Boolean
sap.ui.model.type.Date
sap.ui.model.type.Time
sap.ui.model.type.DateTime
OData Types
Data Types for Use Without Data Binding
sap.ui.core.format.DateFormat
sap.ui.core.format.NumberFormat
Calculated Fields for Data Binding
Custom Formatter Functions
Expression Binding
Extended Syntax for Calculated Fields
Defining a Formatter
Using Extended Syntax to Add Filters and Sorters
Using Extended Syntax in XML and HTML Views
Using Data Binding for Data Export
Property Metadata Binding
OData Meta Model
Building the UI
Instantiating Views
Implementing XML Views
Namespaces in XML Views
Aggregation Handling in XML Views
Using Native HTML in XML Views
Using CSS Style Sheets in XML Views
Handling Events in XML Views
XML Runtime Templating
Handling Events in JSON Views
Typed Views and Controllers
File Names and Locations (View and Controller)
View Cloning
Support for Unique IDs
Fragments
Instantiation of Fragments
Programmatically Instantiating JS Fragments
Programmatically Instantiating XML Fragments
Programmatically Instantiating HTML Fragments
Instantiating Fragments in Declarative Views
Using Other Objects Instead of Controllers
Inline Definition and Instantiation of Fragments
Unique IDs
IDs in Declarative XML or HTML Fragments
IDs in JS Fragments
IDs of Fragments in Views
Retrieving Control Instances by their ID
Example: JS Fragments Used in XML Views
Dialogs and other Popups as Fragments
Defining Dialogs as Fragments
Using Dialogs Defined as Fragments
Fragments with Multiple Root Nodes
HTML Templating in SAPUI5
Expressions and Helpers for HTML Templating
Example: Use of HTML Templating in SAPUI5
XML Templating in SAPUI5
Preprocessing Instructions
with
repeat
if
Replacement of Bindings
XML Fragments
Annotation Helper
Navigation
Configuration Parameters for Navigation
Routing in Components
Methods and Events for Navigation
Working with Controls in SAPUI5
Developing UI5 Controls in JavaScript
Defining the Control Metadata
Object Metadata and Implementation
UI Control Constructors
Adding Method Implementations
Normal Methods
init() Method
exit() Method
Event Handler Methods
Browser Events
Renderer Methods
Defining Control Properties
Examples for Creating and Extending Controls
Creating a Simple Control
Creating a Simple Square Control
Creating a Simple Container Control
Extending Buttons with Additional Events
Extending TextField Rendering
Writing a Control Renderer
Prevention of Cross-site Scripting
Implementing Focus Handling
Convenience Functionality
Item Navigation - Supporting Keyboard Handling in List-like Controls
Integrating the ItemNavigation in your Control
Fast Navigation
Right-to-Left Support in Controls
Programmatic Access to RTL
Impact on the Applications
Composite Controls
Custom Data - Attaching Data Objects to Controls
Writing Data to the HTML DOM as DATA-* Attribute
Using Predefined CSS Margin Classes
Using Container Content Padding CSS Classes
CSS Classes for Theme Parameters
List of Supported CSS Classes
SAPUI5 Controls
Smart Filter Bar
Smart Table
Filter Bar
Smart Variant Management
Personalization Dialog
Smart Form
Smart Field
Smart Link
Upload Collection
Process Flow
Feed Input
Feed List Item
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
Theming
Setting Themes
Loading External Custom Themes
Enhanced Theming Concepts
Theming FAQ
Creating Themable User Interfaces
Building Mobile Applications with SAPUI5
Handling Navigation and Lifecycle Events
Events Fired Centrally by the App or the NavContainer
Events Fired on the Pages
Passing Data when Navigating
Adapting to Platform and Form Factors
Built-in Adaptation of SAPUI5 Mobile
Adapting Automatically to Different Screen Sizes using SplitApp
The First SplitApp
Layouting with FlexBox
Getting Started With FlexBox
Important FlexBox Layout Concepts
Checking the Operating System your Application is Running on
Options for Further Adaptation
Compact Mode for sap.m.controls in Blue Crystal
Working with Lists and Tables
Lists
Using HTML Controls for Creating Custom List Items
Notepad List Item Content Controls
Swipe for Action in Lists
Aggregation
Events
Methods
Properties
Creating Tables
Implementing a Responsive Table
Highlighting Rows and Columns
Defining Column Width
Table Design
List and Table Events
Growing Table
Grouping in a Table
Table Personalization
Working with Facet Filters
Facet Filter: Simple Type
Facet Filter: Light Type
Using the Facet Filter List and Facet Filter Item Controls
Events for Facet Filters
Data Binding for Facet Filters
Filter Search
Facet Filter Selection
Dependent Facets
Triggering Phone, SMS and E-Mail
Examples for Triggering Telephone, Text and E-Mail Applications
Notes
Scrolling in SAPUI5 Mobile
Scrolling: Implementation Details
Scrolling: Pull to Refresh
Running Mobile Apps in Hybrid Web Containers
Using Images in Mobile Applications
Using Icon Font in SAPUI5
Message Handling
Mobile Events
Windows 8 Support
Windows 8 Support - Known Issues
Distinguish Control Behavior between Mobile and Desktop
Adapting Event Handling to Support Windows 8 Devices
Performance Behavior
Building Charts with MAKit
Creating a MAKit Chart
Properties of MAKit Charts
Combination Chart
Creating a Combination Chart
Combination Chart with Dual Axis
Configuration of Theme and Styling for MAKit Charts
Structuring Applications
Modularization and Resource Handling
Modularization and Dependency Management
Loading a Module
Multiple Module Locations
Dependency Resolution Tools
Avoiding Duplicates
Why not Simply Concatenating Modules?
Loading jQuery.sap.require
Cyclic Dependencies
Resource Handling
SAPUI5 Library Location Used for Testing
Cache Buster
Application Cache Buster
Application Cache Buster: Index File
Application Cache Buster: Configuration
Application Cache Buster: Request Flow
Enable the Filter for Java Applications
Application Cache Buster: Enhanced Concept
Components
component.js File
Component Metadata
Methods Controlling the Initial Instantiation
Component Containers
Using UI Components in Applications
Registering Component Resources
Handling IDs in UI Components
Creating a New SAPUI5 Component
Advanced Concepts for SAPUI5 Components
Component Configuration
Application Descriptor
Coding Issues to Avoid
JavaScript Code Issues
CSS Styling Issues
Securing SAPUI5 Applications
Browser Security
Transport Security
Server Security
Third-Party Libraries
Secure Programming Guide
Securing the SAPUI5 Repository
Security Concepts
Cross-Site Scripting
URL Whitelist Filtering
HTML5 Sanitizer
Whitelist Service
Frame Options
Localization
Identifying the Language Code / Locale
Resource Bundles
Use of Localized Texts in Applications
Extending Applications
Handling Localized Texts for Extended Applications
Example: Component Configuration
View Extension
View Modification
View Replacement
Controller Extension
Providing Hooks in the Standard Controller
Controller Replacement
I18n Resource Text Customization
Limitations
Caveats Regarding Stability Across Application Upgrades
Supportability
Using the SAPUI5 Repository
Using Eclipse to Synchronize
Setup
Sharing the SAPUI5 Application Project with the SAPUI5 Repository
Submitting the SAPUI5 Application Project to the SAPUI5 Repository
Retrieving the SAPUI5 Application Project from the SAPUI5 Repository
Handling Conflicts
Using the ABAP Communication Log for Troubleshooting
SAPUI5 Runtime Libraries Server Version Check
Using an Interactive ABAP Report to Synchronize
SAPUI5 Application Index
Testing the SAPUI5 Application on an ABAP Server
Creating Alias for ICF Node with SAP Corbu Logon Screen
Translation Guide for SAPUI5 Application Developers
Prerequisites for Translating Text Elements
Classification of Text Elements
Attributes of Text Elements
List of Text Types
Example for [name].properties File
Accessing Translated Texts During Runtime
Procedure for Development in Correction Phase
Information for Translators
Handling Placeholders in Transaction SE63
Finding the Where-Used Location of a Text Element
Troubleshooting
Debugging
Logging and Tracing
Troubleshooting: Common Issues
Browser Debugging for ABAP Developers
Diagnostics
Mobile Diagnostics
Usability
Accessibility in SAPUI5
Keyboard Handling for SAPUI5 Controls
High-Contrast Black (HCB) Theme for SAPUI5 Controls
Advanced Accessibility Concepts in SAPUI5
Keyboard Handling for SAPUI5 Controls for Developers
Keyboard Handling for Basic Navigation
Keyboard Handling for One-Dimensional Navigation
Keyboard Handling for Two-Dimensional Navigation
Keyboard Handling for Triggering Actions on Item Level
Keyboard Handling for Item Selection
Keyboard Handling for Value Help and Auto-Complete
Quality
QUnit Testing Fundamentals
QUnit Testing for SAPUI5 Controls
One Page Acceptance Tests (OPA5)
Getting Started with OPA5
Cookbook for OPA5
Mock Server
OData Features Supported by Mock Server
Using the Mock Server in SAPUI5
Mock Server: Frequently Asked Questions
Developing Content
Development Conventions and Guidelines
JavaScript Coding Guidelines
JavaScript Namespaces
Example for Defining a Class
Common Pitfalls in JSDoc
SAPUI5 Control Development Guidelines
Product Standards and Acceptance Criteria
File Names and Encoding
Tools
ESLint Code Checks
ESLint Configuration File
SAPUI5 Application Frameworks
SAP Smart Business
Setting up the SAP Smart Business Modeler Apps Framework
Upgrading and Migrating SAP Smart Business Entities
SAP Smart Business Modeler Apps
Create KPI
Create Evaluation
Manage KPI Authorizations
Configure KPI Tiles
Configure KPI Drill-Down
Manage KPI Associations
KPI Workspace
Delete Personalized KPI Tiles
Migration Tool
Analysis Path Framework (APF)
Analytical Applications Based on APF
Setting Up APF and the APF Configuration Modeler
Authorization Concept
Using APF Configuration Modeler to Enhance an APF-Based Application
Using APF Configuration Modeler to Create Your Own Application
APF Configuration Modeler
Adding an Application
Creating a Configuration
Creating Categories
Creating Steps
Creating Representations
Configuring Facet Filters
Use Cases for Configuring Facet Filters
Use Case 1: Facet Filter Independent of Smart Business
Use Case 2: Facet Filter Determined by Smart Business Context Only
Use Case 3: Facet Filter with Default Values Determined by Smart Business Context
Use Case 4: No Facet Filter
Erroneous Facet Filter Configuration
Creating Navigation Targets
Deleting Objects
Text Pool Cleanup
Import
Export
Translation
Launching APF-Based Applications
Configuring the Smart Business KPI Tile
Configuring the Fiori App Launcher Tile
Components
The Core Component (sap.apf.core)
The UI Component
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
Advanced Configuration Information
Application Configuration
Analytical Content Configuration
The Configuration Root Object
The Step Object
The Request Object
The Binding Object
The Representation Object
The Representation Type Object
The Facet Filter Object
The Category Object
The Label Object
The Thumbnail Object
API Reference
SAPUI5 Flexibility Services