SAP UI5 Developer Guide for SAP HANA En

PUBLICSAP HANA Platform SPS 08Document Version: 1.0 - 2014-05-28

SAPUI5 Developer Guide for SAP HANA

Table of Contents1 SAPUI5 Developer Guide for SAP HANA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

2 Installing SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.1 SAPUI5 Tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1.1 SAPUI5 Tools Installation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.1.2 Upgrading SAPUI5 Tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.1.3 Uninstalling SAPUI5 Tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2 Versioning of SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.3 Upgrading jQuery for SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.4 Documentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3 Getting Started with SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.1 Create Your First SAPUI5 Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.2 Create Your First Mobile SAPUI5 Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.2.1 Create an HTML Page for Your Mobile App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.2.2 Initialize the Mobile App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223.2.3 Add Content Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233.2.4 Run Your First Mobile App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.3 Develop Your First Application using SAPUI5 Tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.3.1 Create an SAPUI5 Application Project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.3.2 Add a Control to Your View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313.3.3 Implement a Method in the Controller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323.3.4 Create an Additional View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.3.5 Integrate a New View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353.3.6 JavaScript Code Completion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.3.7 Linking your Eclipse Editor to the Demo Kit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.3.8 Use JavaScript and XML Templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.3.9 SAPUI5 Snippets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3.4 Browser and Platform Matrixes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453.4.1 sap.ui.core, sap.ui.layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .453.4.2 sap.ui.commons, sap.ui.ux3, sap.ui.table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453.4.3 sap.m. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463.4.4 sap.viz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .493.4.5 sap.makit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.4.6 sap.ui.vbm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.5 Support Translation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.6 Testing SAPUI5 Applications Locally. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.7 Running SAPUI5 Applications on SAP HANA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.8 Testing SAPUI5 Applications in Eclipse. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

2P U B L I C 2014 SAP AG or an SAP affiliate company. All rights reserved.

SAPUI5 Developer Guide for SAP HANATable of Contents

3.8.1 Test in SAPUI5 Application Preview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573.8.2 Test Your SAPUI5 Application on a Java Web Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

4 Concepts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634.1 Model View Controller (MVC). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

4.1.1 Models. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664.1.2 Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674.1.3 Controllers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .724.1.4 Data Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

4.2 Resource Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 754.3 Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 754.4 SAPUI5 Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774.5 Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

4.5.1 Definition of Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .804.5.2 HTML Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804.5.3 XML Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804.5.4 JS Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

4.6 Extending SAPUI5 Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

5 Application Best Practices. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835.1 Preparing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845.2 Building. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

5.2.1 Step 1: Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 965.2.2 Step 2: Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .995.2.3 Step 3: Navigation and Routing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1045.2.4 Step 4: Internationalization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1125.2.5 Step 5: Device Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1135.2.6 Step 6: Custom Utilities. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1155.2.7 Step 7: Model View Controller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1165.2.8 Step 8: Master View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1195.2.9 Step 9: Detail View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1265.2.10 Step 10: Detail XML Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1325.2.11 Step 11: AddProduct View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1375.2.12 Step 12: NotFound View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146

5.3 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

6 Initializing and Loading SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1496.1 Bootstrapping: Loading and Initializing SAPUI5 in HTML Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . 149

6.1.1 Standard Variant for Bootstrapping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1526.1.2 noJQuery Variant for Bootstrapping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1526.1.3 Preload Variant for Bootstrapping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1536.1.4 All-in-one per Library Variant for Bootstrapping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154


P U B L I C 2014 SAP AG or an SAP affiliate company. All rights reserved. 3

6.1.5 sap-ui5 Variant for Bootstrapping. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1546.2 Initialization Process. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

6.2.1 Loading of Additional Resources During Bootstrap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1556.2.2 Dynamic Loading of Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

6.3 Configuration of the SAPUI5 Runtime. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1566.3.1 Configuration Options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1596.3.2 Compatibility Version Information. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

7 Models and Data Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1747.1 Data Binding: Getting Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1747.2 Models and Data Binding in Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

7.2.1 Creating a Model Instance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1797.2.2 Assigning the Model to the UI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1947.2.3 Defining a Binding Path. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1957.2.4 Binding Controls to the Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1967.2.5 Setting the Default Binding Mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1967.2.6 Multimodel Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197

7.3 Binding Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1977.3.1 Property Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1977.3.2 Aggregation Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2007.3.3 Element Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

7.4 Using the Data Binding Type System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2057.4.1 Example: Using Data Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2057.4.2 Handling Wrong User Input. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2067.4.3 Simple Types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2067.4.4 Data Types for Use Without Data Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211

7.5 Calculated Fields for Data Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2137.5.1 Custom Formatter Functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2147.5.2 Extended Syntax for Calculated Fields. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215

8 Building the UI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2208.1 Instantiating Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2208.2 Implementing XML Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221

8.2.1 Namespaces in XML Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2218.2.2 Aggregation Handling in XML Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2228.2.3 Using Native HTML in XML Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2238.2.4 Using CSS Style Sheets in XML Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2248.2.5 Handling Events in XML Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

8.3 Handling Events in JSON Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2258.4 Typed Views and Controllers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2258.5 File Names and Locations (View and Controller). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2268.6 View Cloning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227



8.7 Support for Unique IDs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2278.8 Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

8.8.1 Instantiation of Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2298.8.2 Unique IDs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2348.8.3 Dialogs and other Popups as Fragments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2398.8.4 Fragments with Multiple Root Nodes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

8.9 HTML Templating in SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2418.9.1 Expressions and Helpers for HTML Templating. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2428.9.2 Example: Use of HTML Templating in SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

8.10 Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2458.10.1 Routing in UI Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2468.10.2 Configuration Parameters for Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2478.10.3 Methods and Events for Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2498.10.4 Route Matching. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2508.10.5 Building a Catchall Route. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250

8.11 Working with Controls in SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2518.11.1 Developing UI5 Controls in JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2528.11.2 Implementing Focus Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2678.11.3 Item Navigation - Supporting Keyboard Handling in List-like Controls. . . . . . . . . . . . . . . 2698.11.4 Right-to-Left Support in Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2718.11.5 CSS Classes for Theme Parameters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

8.12 Theming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2768.12.1 Creating Themable User Interfaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277

9 Structuring SAPUI5 Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2799.1 Modularization and Resource Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

9.1.1 Modularization and Dependency Management. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2809.1.2 Resource Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2869.1.3 Cache Buster. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2919.1.4 Application Cache Buster. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

9.2 SAPUI5 Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2969.2.1 component.js File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2989.2.2 Component Containers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3029.2.3 Registering Component Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3039.2.4 Handling IDs in UI Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3049.2.5 Creating a New SAPUI5 Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3059.2.6 Advanced Concepts for SAPUI5 Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306

10 Translating SAPUI5 Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30910.1 Identifying the Language Code / Locale. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30910.2 Resource Bundles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31110.3 Use of Localized Texts in Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311



11 Extending SAPUI5 Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31511.1 Example: Component Configuration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31511.2 View Extension. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31611.3 View Modification. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31711.4 View Replacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31811.5 Controller Extension. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

11.5.1 Providing Hooks in the Standard Controller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32011.6 Controller Replacement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32111.7 I18n Resource Text Customization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32111.8 Supportability and Limitations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

12 Building Mobile Applications with SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32312.1 Handling Navigation and Lifecycle Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

12.1.1 Events Fired Centrally by the App or the NavContainer. . . . . . . . . . . . . . . . . . . . . . . . . .32512.1.2 Events fired on the Pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32512.1.3 Passing Data when Navigating. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

12.2 Adapting to Platform and Form Factors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32712.2.1 Built-in Adaptation of SAPUI5 Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32812.2.2 Adapting Automatically to Different Screen Sizes using SplitApp. . . . . . . . . . . . . . . . . . 32812.2.3 Layouting with FlexBox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33212.2.4 Checking the Operating System your Application is Running on. . . . . . . . . . . . . . . . . . . 33612.2.5 Options for Further Adaptation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

12.3 Working with Lists and Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33912.3.1 Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34012.3.2 Creating Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34712.3.3 List and Table Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34912.3.4 Highlighting Rows and Columns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35212.3.5 Growing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35312.3.6 Implementing a Responsive Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35512.3.7 Table Personalization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35912.3.8 Grouping in a Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

12.4 Working with Facet Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36412.4.1 Facet Filter: Simple Type. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36612.4.2 Facet Filter: Light Type. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36712.4.3 Using the Facet Filter List and Facet Filter Item Controls. . . . . . . . . . . . . . . . . . . . . . . . 36812.4.4 Events for Facet Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37012.4.5 Data Binding for Facet Filters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37112.4.6 Filter Search. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37112.4.7 Facet Filter Selection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37212.4.8 Dependent Facets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .374

12.5 Triggering Phone, SMS and E-Mail. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37512.5.1 Examples for Triggering Telephone, Text and E-Mail Applications. . . . . . . . . . . . . . . . . . 376



12.5.2 Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37712.6 Scrolling in SAPUI5 Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .378

12.6.1 Scrolling: Implementation Details. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37812.6.2 Scrolling: Pull to Refresh. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

12.7 Running SAPUI5 Mobile Apps in Hybrid Web Containers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38112.8 Using Images in Mobile Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384

12.8.1 Using Icon Font in SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38512.9 Message Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38812.10 Mobile Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .389

12.10.1 Windows 8 Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39012.11 Performance Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39712.12 Building Charts with MAKit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397

13 Programming and API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39913.1 UI Control Constructors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39913.2 UI Control API: Event Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40013.3 Custom Data - Attaching Data Objects to Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400

13.3.1 Writing Data to the HTML DOM as DATA-* Attribute. . . . . . . . . . . . . . . . . . . . . . . . . . . 40313.4 Declarative Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

13.4.1 Enabling Declarative Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40513.4.2 Defining Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40613.4.3 Declarative Support: Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40613.4.4 Declarative Support: Associations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40713.4.5 Declarative Support: Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40713.4.6 Declarative Support: Aggregations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40813.4.7 Declarative Support: Data Binding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40913.4.8 Compiling Declarative HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410

14 References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41114.1 Security Information for SAPUI5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

14.1.1 Browser Security. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41214.1.2 Transport Security. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41414.1.3 Server Security. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41514.1.4 Third-Party Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41614.1.5 Secure Programming Guide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41714.1.6 Security Concepts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .418

14.2 Troubleshooting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42114.2.1 Debugging. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42114.2.2 Logging and Tracing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42214.2.3 Troubleshooting: Common Issues. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42414.2.4 Browser Debugging for ABAP Developers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42514.2.5 SAPUI5 Diagnostics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429



14.3 An MVC Demo Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43414.3.1 The HTML Page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43514.3.2 The Root (App-) View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43614.3.3 The Root (App-) Controller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43614.3.4 The HomePage View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43814.3.5 The HomePage Controller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43814.3.6 The DetailPage View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43914.3.7 The DetailPage Controller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441

14.4 Compatibility Rules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44114.4.1 Third Party Open Source Libraries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44314.4.2 Exceptions: Important to Know. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

14.5 Naming Conventions for Control and Application Development. . . . . . . . . . . . . . . . . . . . . . . . . . 44414.5.1 Naming Conventions for Control Artifacts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44414.5.2 Reserved Characters for Control IDs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44514.5.3 Reserved IDs for DOM Nodes and Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44614.5.4 Reserved DOM Attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44614.5.5 Reserved URL Parameters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44614.5.6 Control CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447

15 Important Disclaimers on Legal Aspects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448



1 SAPUI5 Developer Guide for SAP HANAThis guide describes how to develop SAPUI5 applications based on SAP HANA. SAP UI5 is a user interface technology that is used to build and adapt client applications.

SAPUI5 Developer Guide for SAP HANASAPUI5 Developer Guide for SAP HANA


2 Installing SAPUI5Provides information on the installation of SAPUI5The following sections guide administrators through the required steps to install, configure, and maintain the UI development toolkit for HTML5 (SAPUI5).

NoteYou can install SAPUI5 on different platforms. The license and maintenance conditions of the respective platforms apply also for SAPUI5. If you use SAPUI5 tools on SAP HANA Cloud Platform, for example, the licence and maintenance conditions of the SAP HANA Cloud Platform apply.

Important SAP Notes for the Installation

Before you start the installation process, read the following SAP notes. Make sure that you have the up-to-date version of each SAP note. You can find them on SAP Service Marketplace at http://service.sap.com/notes .

Note Number Title Description

1666368 Installing UI add-ons for SAP NetWeaverDescribes the installation of the ABAP components of UI add-on for SAP NetWeaver

1666369 SPs for UI add-ons for SAP NetWeaver Contains information about add-on support packages for UI add-on for SAP NetWeaver

1686090 Translation Object for SAPUI5 (ABAP) To use the translation feature with the SAPUI5 ABAP team provider in the UI add-on in a SAP NetWeaver 7.03/7.31 system, implement this SAP note in the translation system to enable the translation of text elements.

1747308 SAPUI5 Collection of information about SAPUI5https://service.sap.com/sap/support/notes/

ABAP XSS Escaping Support We highly recommend that you implement this note to support ABAP XSS escaping.

2.1 SAPUI5 ToolsInstallation, Upgrade and Uninstalling SAPUI5 toolsThe following sections provide information how to install, upgrade and uninstall SAPUI5 tools.


SAPUI5 Developer Guide for SAP HANAInstalling SAPUI5

2.1.1 SAPUI5 Tools InstallationInstallation prerequisites and installation process for SAPUI5 toolsThe following sections provide the required information for the installation, upgrade, and uninstallation of SAPUI5 tools.Before you start the installation, make sure that you have the required software versions installed and that you have downloaded the respective Software components.

Required Software for Installing and Running SAPUI5 Tools

To install and run SAPUI5 tools, the following software has to be installed: Java Runtime environment: JRE 1.6, 32/64-Bit (same as Eclipse) Operating system: Windows Vista, Windows 7 (32- or 64-Bit) Browser: Not relevant, except for Internet Explorer 9.0 or higher for embedded application preview SAP HANA Studio

Install the SAP HANA Studio according to the installation information provided on the SAP Help Portal under help.sap.com/hana_applicance Installation and Upgrade Information . Make sure that the features listed in the following table are installed:

Name Technical IDEclipse Faceted Project Framework (Version 3.4.0) org.eclipse.wst.common.fprojEclipse Faceted Project Framework JDT Enablement (Version 3.4.0)

org.eclipse.wst.common.fproj.enablement.jdt

Eclipse Java EE Developer Tools (Version 3.4.0) org.eclipse.jst.enterprise_ui.featureEclipse JavaWebEE Developer Tools (Version 3.4.0) org.eclipse.jst.web_ui.featureWST Common Core (Version 3.4.0) org.eclipse.wst.common_core.featureWST Server Adapters org.eclipse.wst.server_adapters

NoteMake sure that you have write permssion for the directory you use for the Eclipse installation, or start Eclipse as Administrator.

NoteIf one of the features is already available and cannot be overwritten by a newer version, only add the features that are not yet available and leave the other features unchanged.

NoteIf you install the features from the Eclipse Release Train Update, it may be necessary to deselect the Group Items by Category and Show only latest versions of available software checkboxes.



Required Software Components for SAPUI5 Tools

For the installation of SAPUI5 tools on SAP HANA XS, download the SAPUI5 TOOLS IDE PLUGIN 1.00 component from the SAP Software Download Center on SAP Service Marketplace at http://service.sap.com/swdc .

Installation Process for SAPUI5 Tools

To install SAPUI5 tools, proceed as follows:1. Launch your SAP HANA Studio Eclipse workbench.2. Open the installation wizard by choosing Help Install New Software .3. In the Work with field of the installation wizard, specify the target directory of the package.

To add the new installation directory, choose Add and then choose Archive to specify the location. Enter a name for your local software site.

4. Select all UI development toolkit for HTML5 features and choose Next.5. Review the feature groups to be installed and choose Next.6. Accept the terms of the license agreement and choose Finish to initiate the installation of selected feature

groups.7. In the Certificates dialog confirm the certificates from Eclipse.org and SAP with OK.8. To apply the changes of the installation procedure, restart the SAP HANA Studio Eclipse workbench.9. To check, whether the installation has been succesful, proceed as follows:

For SAPUI5 application development open the SAP HANA Studio Eclipse IDE and choose File NewOther ... SAPUI5 Application Development Application Project . If the installation has been succesful, the New Application Project wizard opens.

2.1.2 Upgrading SAPUI5 ToolsPrerequisites

To upgrade SAPUI5 tools, download the new version of the SAPUI5 tools package from SAP Service Marketplace.

Context

Proceed as follows:1. Launch your Eclipse workbench.2. If you have downloaded the new version with a different name and/or stored at a different location instead

of exchanging the old version with the new version, you have to update the list of available software sites in Eclipse to refer to the new location before you can start the update. Proceed as follows:



a. Choose Window Preferences .b. Choose Install/Update Available Software Sites .c. Select the entries that you have added for the installation or the last update and adjust them for the

new version.d. Confirm your changes.

3. Continue with the update as follows:a. To open the Updates wizard, choose Help Check for Updatesb. In the Available Updates list, select all UI development toolkit for HTML5 features and choose Next.c. Review the feature groups to be installed and choose Next.d. Accept the terms of the licence agreement and choose Finish to start the installation of the selected

feature groups.e. In the Certificates dialog, confirm the certificates of Eclipse.org and SAP.

2.1.3 Uninstalling SAPUI5 Tools

Context

To uninstall all frontend components required for UI5 tools, proceed as follows:

Procedure

1. Launch your Eclipse workbench.2. Choose Help About .3. Choose Installation Details.4. Select the SAPUI5 node and choose Uninstall.

The Uninstall Details page displays a list of feature groups that will be uninstalled.5. To start the uninstall function, choose Finish.

2.2 Versioning of SAPUI5

With SAPUI5 1.6 there is a close coupling of SAPUI5 core/runtime and SAPUI5 tools: It is required that within a running system both have the same version, that is, have the same major and minor version. For example, SAPUI5 core/runtime 1.6.1 works together with SAPUI5 tools 1.6.2, but not with SAPUI tools 1.8. For a future release it is planned to have a more lose coupling here with regards to the minor and micro version. Please note that with SAPUI5 1.6 we can only support customers, which follow this rule in their system landscapes.



2.3 Upgrading jQuery for SAPUI5

When upgrading to SAPUI5 1.20.0, check whether the changes listed below influence the application:

Upgrade to jQuery version 1.10.2

This upgrade requires changes to SAPUI5 controls and may also influence other controls or the application. For more information about the jQuery upgrade, see the jQuery Upgrade Guide. The following list gives an overview of the changes that affect SAPUI5. Findings

Setting height or width of a JQuery objectWhen setting the height or width of an object via jQuery(...).height("1px") and the object used the CSS-property box-sizing, the height of the box instead of the content was changed. As of jQuery 1.8.0, the function changes the content height regardless of the box-sizing property.For more information and recommendations, see the jQuery API documentation on http://api.jquery.com .

jQuery().data("events")jQuery(...).data("events") has been removed with jQuery 1.9. An alternative is now available and part of the QUnitUtils: jQuery#_sapTest_dataEvents().

strictEqual in QUnit testsDo not compare jQuery(...).attr("tabindex") with strictEqual or ===. As an alternative, use string values or prop("tabindex") which returns a parsed value.

font-weight: "normal"jQuery 1.10 converts font-weight: "normal" to the value 400. The workaround jQuery#_sapTest_cssFontWeight() is provided in QUnitUtils that hides the differences between browser and jQuery.

Check for jQuery versionTo fix issues for a newer or different jQuery version, you can use jQuery.sap.Version(jQuery.fn.jquery).toString() or jQuery.sap.Version(jQuery.fn.jquery).getMajor() to check the version. You use this core function to check the major, minor, patch and all appending stuff of the version.

Deprecated and removed functions Common

Check for functions that have been deprecated in jQuery versions 1.7, 1.8, or 1.9 and may have been removed in jQuery 1.10. See the corresponding jQuery documentation.

.live()This function has been set as deprecated in jQuery version 1.7 and was removed in jQuery version 1.9. For recommendations how to replace the .live() function, see the respective jQery documentation.



JQuery UI Upgrade to 1.10.4

jQuery UI version 1.10.4 contains incompatiple changes to jQuery UI version 1.8.23. For more information, see the jQuery UI 1.9 Upgrade Guide and the jQuery UI 1.10 Upgrade Guide.A major incompatiple change is in jQuery.ui.position, where the offset property has been removed. SAPUI5 runtime adopted this change, for example in Popup, but applications may need to adopt their logic too.Also, the file names for jQuery UI effects have changed. Applications using the jQuery UI effects may also have to adopt their logic. In IE8 and jQuery version

3 Getting Started with SAPUI5Here you find information on how to adjust your enviroment and to get started with some easy examples including an introduction to the SAPUI5 tools.

Installation Prerequisites

To find the appropriate installation option, see Installing SAPUI5 [page 10].

Create Your First SAPUI5 Applications

To get started with SAPUI5, you now have two different options: Either you just create an HTML page (even with notepad, if you want to) or you start directly using the SAPUI5 tools in Eclipse.Creating Simple SAPUI5 ApplicationsThe easiest way to work with SAPUI5 is to include a set of JavaScript libraries into your HTML page. After that you can use all controls provided by these libraries to construct one or more control trees and include them into your HTML page. The framework also supports the JavaScript Object Notation (JSON) to initialize controls with a reduced typing effort.Creating Mobile Apps with SAPUI5SAPUI5 provides an additional control library called sap.m, which is optimized for mobile devices.Create Applications using SAPUI5 toolsUsing the SAPUI5 application tools in Eclipse allows you to create sophisticated SAPUI5 application projects based on the Model View Controller concept. The tools provide additional features such as SAPUI5 Snippets or JavaScript Templates.They provide wizards to create SAPUI5 applications for desktop as well as for mobile devices.

Check Your Browser and Platforms

Before you really get started, check the list of supported browsers and platforms to choose those that fit your needs.

Testing and Running your SAPUI5 applications

Depending on the environment your application is running on, you can use different options to deploy and run your SAPUI5 applications. But you can always test locally in your Eclipse.Before deploying a SAPUI5 application that has been created by using the Eclipse SAPUI5 application development tool on a Java server, ensure to adopt the web.xml file in the /


SAPUI5 Developer Guide for SAP HANAGetting Started with SAPUI5

WEB-INF folder of the SAPUI5 application by removing the mapping to the test resources. Test resources should only be used during testing. Remove or comment the following lines:

ResourceServlet /test-resources/*

Related Information

Create Your First SAPUI5 Application [page 17]You can include a bootstrap to the SAPUI5 JavaScript libraries to use SAPUI5 in an HTML page without having set up the SAPUI5 application development tools in Eclipse.

Create Your First Mobile SAPUI5 Application [page 21]Whether you develop a SAPUI5 application for desktop or for mobile, the concepts are very similar. SAPUI5 provides an additional control library called sap.m, which is optimized for mobile devices, but also runs fine in desktop browsers.

Develop Your First Application using SAPUI5 Tools [page 26]The SAPUI5 application development tools in Eclipse support you in developing web applications according to the Model View Controller concept (MVC).

Browser and Platform Matrixes [page 45]You need to check which browser and platform suit best to your use case.

Testing SAPUI5 Applications in Eclipse [page 56]You have different options to test your applications locally in Eclipse.

3.1 Create Your First SAPUI5 ApplicationYou can include a bootstrap to the SAPUI5 JavaScript libraries to use SAPUI5 in an HTML page without having set up the SAPUI5 application development tools in Eclipse.This page explains how to create and run a simple SAPUI5 application from scratch within twenty seconds (with some practice the current record is 16 seconds).If you are interested in exactly doing this without reading too much, you can skip the background information and read the And how to do it in 20 Seconds section below.

Background Information

As SAPUI5 is a client-side web UI library meaning that it runs in a browser, a SAPUI5 application typically is composed of an HTML page and, if required, many more files.SAPUI5 is implemented in JavaScript. For loading SAPUI5, its bootstrap needs to be included with a tag. The last two attributes select the visual design to apply initially (other choices would be sap_hcb or



sap_goldreflection) and the SAPUI5 control library/libraries to use . In your scenario you need to make sure the URL points to a SAPUI5 installation.

SAPUI5 UI elements are created and modified programmatically:

// create the button instancevar myButton = new sap.ui.commons.Button("btn");

// set properties, e.g. the text (there is also a shorter way of setting several properties)myButton.setText("Hello World!");

// attach an action to the button's "press" event (use jQuery to fade out the button)myButton.attachPress(function(){$("#btn").fadeOut()});

There is also a shorthand notation based on JSON for setting multiple properties; you could also write:

var myButton = new sap.ui.commons.Button({text:"Hello World!",tooltip:"Hello Tooltip!"});

Finally you need to tell SAPUI5 where the UI control should be placed. You can just give the ID of an element in the page to do so:

// place the button into the HTML element defined belowmyButton.placeAt("uiArea");

This element must exist somewhere in the HTML page, so you need to put the following code to the desired place within the :

As a minor detail, the should have a certain CSS class, so the page background and some other styles are properly set:

There are two meta tags at the beginning of the : The first meta tag is used to ensure that Internet Explorer 8+ uses its most standard-compliant rendering mode. The second meta tag is used to let all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file):

And How to do it in 20 Seconds

Assumption for these instructions to work exactly as described: You have a Windows Computer (other OS will work similarly), Internet Explorer 9+ with security option set to Access data across domains for the respective zone, FireFox, Safari or Chrome in the latest version, and you know where you can refer to SAPUI5 on some server.

NoteThe URL in the script tag is pre-filled as https://sapui5.hana.ondemand.com/resources/sap-ui-core.js. This is the URL where the resources are located in the SAP HANA Cloud Platform delivery. Test this URL first and if it does not work, replace this URL with the location of SAPUI5 on your local server.

Proceed as follows:1. Right click your desktop and select New Text Document .2. Name the new file, for example "ui5.html", and accept the extension change warning.3. Right click the new file and select Edit. Make sure that the file opens in Notepad and not in MS Word.4. Copy and paste the below HTML code. Keep in mind to adapt the SAPUI5 URL5. Drag the file to the browser window.6. That was it.

SAPUI5 in 20 Seconds

// create the button instance var myButton = new sap.ui.commons.Button("btn");



// set properties, e.g. the text (there is also a shorter way of setting several properties) myButton.setText("Hello World!");

// attach an action to the button's "press" event (use jQuery to fade out the button) myButton.attachPress(function(){$("#btn").fadeOut()});

// place the button into the HTML element defined below myButton.placeAt("uiArea");

// an alternative, more jQuery-like notation for the same is: /* $(function(){ $("#uiArea").sapui("Button", "btn", { text:"Hello World!", press:function(){$("#btn").fadeOut();} }); }); */

Result

If you followed the steps above you should now see a button like this which fades out when clicked:

Next Steps

You can now do the following: Add more buttons. Let them do trickier things. Find out about further properties and events of button controls and use those. Find out about further controls and add those. For more information, see the Controls Gallery.



3.2 Create Your First Mobile SAPUI5 ApplicationWhether you develop a SAPUI5 application for desktop or for mobile, the concepts are very similar. SAPUI5 provides an additional control library called sap.m, which is optimized for mobile devices, but also runs fine in desktop browsers.

NoteIf you need help on choosing the right browser or platform, check here: sap.m [page 46].

Related Information

Create an HTML Page for Your Mobile App [page 21]You first create an HTML page and define the meta tags, a script tag to load the SAPUI5 libraries and a placeholder for your mobile app.

Initialize the Mobile App [page 22]The sap.m library provides a control called App which is meant to be the root control of a mobile application. It provides the initialization of the HTML page, sets some meta tags to ensure an as-native-as-possible look&feel, and can manage different pages and the animations between them.

Add Content Pages [page 23]Typical mobile applications are often composed of a number of pages/views/screens between which the user can navigate. You now add two of them to your app.

Run Your First Mobile App [page 24]

3.2.1 Create an HTML Page for Your Mobile AppYou first create an HTML page and define the meta tags, a script tag to load the SAPUI5 libraries and a placeholder for your mobile app.

Procedure

1. Create an HTML page called mobile.html2. Add the HTML5 doctype definition: " in the first line and the Internet Explorer-specific

meta tag :" are the beginning of element.This ensures that all browsers use the latest version of their rendering engine.

3. Add a second meta tag: .



This lets all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file)

4. In the HTML there needs to be a place where the App HTML will go. Here we add a element to . The "sapUiBody" class should always be added to the tag to initialize font and colors for the whole page: You can equally use the body itself, omitting the extra div. In this case give the body the id content.

5. To load the SAPUI5 JavaScript file, that contains the library, add the following script tag in the :

Replace and with your local SAPUI5 installation.Note that you are only loading the sap.m control library and the sap_bluecrystal theme.

Results

At this point, SAPUI5 including the mobile controls is loaded and ready to use.

Next Steps

Initialize the Mobile App [page 22]

3.2.2 Initialize the Mobile AppThe sap.m library provides a control called App which is meant to be the root control of a mobile application. It provides the initialization of the HTML page, sets some meta tags to ensure an as-native-as-possible look&feel, and can manage different pages and the animations between them.

Procedure

Create the control and define the page that you want to display first:

// create a mobile App // it initializes the HTML page for mobile use and provides animated page



handling var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first

Instead of using the App control, you can also use jQuery.sap.initMobile() to set up the HTML and use other full screen controls, such as sap.m.Page or sap.m.Carousel as root element of your app.

3.2.3 Add Content PagesTypical mobile applications are often composed of a number of pages/views/screens between which the user can navigate. You now add two of them to your app.

Procedure

1. One sap.m.Page control is created, its title is set and the content is just one button:

// create the first page of your applicationvar page1 = new sap.m.Page("page1", { title: "Initial Page", content : new sap.m.Button({ // content is just one Button text : "Go to Page 2", press : function() { app.to("page2"); // when pressed, it triggers drilldown to page 2 } })});

When the Button is pressed, it triggers a drilldown navigation by calling app.to("page2"), where page2 is the ID of the second page. You could also give the animation type. The default is a slide animation from right to left.sap.m.Page controls can be used as pages, and the aggregation is called pages, but other controls could be used as well.

2. Add the following to the section of the HTML page below the part, where you've initialized the app:

// create the second page of your applicationvar page2 = new sap.m.Page("page2", { title: "Page 2", showNavButton: true, // page 2 should display a back button navButtonPress: function(){ app.back(); // when tapped, the back button should navigate back up to page 1 }, icon: "http://www.sap.com/global/ui/images/global/sap-logo.png", content : new sap.m.Text({text:"Hello Mobile World!"})});

showNavButton is set to true to get a Back button displayed. When this button is pressed, the handler calls app.back(). This causes an inverse animation, which leads back to the main page.



3. Add the two pages to the App:

// add both pages to the Appapp.addPage(page1).addPage(page2);

4. Finally place the app into the content area you've defined earlier.

app.placeAt("content"); // place the App into the HTML document

The app is placed into the HTML like a SAPUI5 desktop control. The App takes care to cover the whole screen.

Next Steps

Run Your First Mobile App [page 24]

3.2.4 Run Your First Mobile App

Prerequisites

Assumption for these instructions to work exactly as described: you have a Windows Computer (other operating systems will work as well, but the instructions may differ) and a current browser.

Procedure

1. Right-click on your desktop and choose New Text Document .2. Enter a name for the new file, for example mobile.html, and confirm the extension change warning.3. Right-click on the new file and choose Edit. Make sure it opens in Notepad and not in MS Word.4. Copy and paste the HTML code below and save the file. Keep in mind that the SAPUI5 URL may need to be

adapted.5. Drag and drop the file into the browser window.6. To load the example on a mobile device, you put the file on a server.

// create a mobile App // it initializes the HTML page for mobile use and provides animated page handling var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first // create the first page of your application var page1 = new sap.m.Page("page1", { title: "Initial Page", content : new sap.m.Button({ // content is just one Button text : "Go to Page 2", press: function() { app.to("page2"); // when pressed, it triggers drilldown to page 2 } }) }); // create the second page of your application var page2 = new sap.m.Page("page2", { title: "Page 2", showNavButton: true, // page 2 should display a back button navButtonPress: function(){ app.back(); // when pressed, the back button should navigate back up to page 1 }, content : new sap.m.Text({text:"Hello Mobile World!"}) }); app.addPage(page1).addPage(page2); // add both pages to the App app.placeAt("content"); // place the App into the HTML document

Results

You should now see the following mobile App:



Now you can navigate to the second page by clicking the button.To open the application on a real mobile device, you can also put the HTML document on a Web server and load the resulting URL in your mobile browser.

Next Steps

You could now Try different navigation animation types (e.g. add fade or flip as second parameter to the

app.to("page2") call) Add more pages Add more content to the pages Try out other mobile controls like the sap.m.Popover

3.3 Develop Your First Application using SAPUI5 ToolsThe SAPUI5 application development tools in Eclipse support you in developing web applications according to the Model View Controller concept (MVC).The SAPUI5 application development tools for Eclipse provide wizards to support you in creating SAPUI5 applications in an easy way. With the SAPUI5 application project wizard, the necessary application skeleton containing view(s) and controller will automatically be created.



Creating SAPUI5 applications

The SAPUI5 tools support you in creating applications according to MVC. In this section we guide you through a simple example. You will create a SAPUI5 application project, which includes a control, a method in the controller and an additional view.

More Information

Create an SAPUI5 Application Project [page 28]Add a Control to Your View [page 31]Implement a Method in the Controller [page 32]

Utilities

With Eclipse you can make use of utilities for JavaScript development. Additionally SAPUI5 provides templates and snippets. JavaScript Code Completion

The Eclipse JavaScript Development Tools (JSDT) provide an editor which parses scripts and offers code completion functionality. The core libraries for the code completion are made available automatically.

NoteIf your Eclipse installation contains the org.eclipse.wst.jsdt.feature feature in Version 1.3.1, we recommend to update it. Invoking the JavaScript code completion in version 1.3.1 may cause Eclipse to crash.

More Information

JavaScript Code Completion [page 36]Use JavaScript and XML Templates [page 39]SAPUI5 Snippets [page 40]



3.3.1 Create an SAPUI5 Application ProjectTo create a SAPUI5 Application Project, you must have installed the SAPUI5 Application Development feature in your Eclipse installation.

Procedure

1. Start the New SAPUI5 Application Project wizard in the Eclipse by choosing New Other ... SAPUI5 Application Development Application Project .

2. Enter the following project-related data: Project name Location (optional, prefilled from the current workspace) Library 'sap.m' (default) or 'sap.ui.commons' Select Create an Inital View

Views can also be added later using the SAPUI5 Application View wizard



3. Enter the following view-related data: Choose the folder in which the view shall be created Enter a unique name for your view Choose the Development Paradigm.



Results

After finishing the wizard, the system performs the following steps: A new dynamic web project is created. All relevant files are created in the WebContent folder. A prefilled index.html is created which contains sap.ui.commons lib and sap_bluecrystal theme in

the boostrap in case of a desktop target device and the sap.m lib and sap_mvi theme in case of mobile target device.

In WEB-INF folder a web.xml file is created which contains settings for resource handling and the use of SimpleProxyServlet.

The installed SAPUI5 UI lib plugins are automatically added to the Java build path and added to the deployment assembly.

The SAPUI5 class path container (if available) is automatically added to the JavaScript include path. The index.html page is opened in the standard editor. Inside the JavaScript block of index.html, code completion is available, see JavaScript Code Completion. An automatic switch to the J2EE perspective is performed.



If you have selected the Create an Initial View option on the first page of the SAPUI5 Application Project wizard, a view and a view controller are created and the coding to call the view is added to the index.html file.

Next Steps

Add a Control to Your View [page 31]Implement a Method in the Controller [page 32]Create an Additional View [page 33]Integrate a New View [page 35]

Related Information

JavaScript Code Completion [page 36]When using the SAPUI5 tools, code completion is enabled automatically, without the tools, you need to enable it.

Use JavaScript and XML Templates [page 39]You can add SAPUI5 control-specific templates for JavaScript code. Such templates are available, for example, in JavaScript views of SAPUI5 application tools development.

SAPUI5 Snippets [page 40]SAPUI5 snippets are templates and examples on how to use the SAPUI5 runtime and controls.

Linking your Eclipse Editor to the Demo Kit [page 38]You can use Quick Fixes to display the API documentation of a SAPUI5 control in the Demo Kit.

3.3.2 Add a Control to Your ViewIn your SAPUI5 application project, the first step to build your application is to add a control to your view and implement a method to react on user interaction. In this case you create a button and implement a function to react when the user presses it.

Procedure

To add a control to your view, add the following coding depending on the type of your view: In a JS view add the following to the createContent function

var aControls = []; var oButton = new sap.ui.commons.Button({ id : this.createId("MyButton"),



text : "Hello JS View" }); aControls.push(oButton.attachPress(oController.doIt)); return aControls;

In an HTML view add the following to the template tag:

In an XML view add the following coding to the core tag

In a JSON view add the following to the content function "Type":"sap.ui.commons.Button", "id":"MyButton", "text":"Hello JSON View", "press":"doIt"

A button is added to your view with an event that is triggered when the user presses it.

Next Steps

The doIt method, which is called in each of these view types, is implemented in the controller:Implement a Method in the Controller [page 32]

3.3.3 Implement a Method in the ControllerAll functions that are not directly related to the user interface should be handled in the controller to ensure clear separation between UI and data. In this case you add a method to handle the event, which is attached to a button.

Prerequisites

You've created a button as described in: Add a Control to Your View [page 31]

Procedure

To handle this event, add the following function to the controller:

doIt : function(oEvent) { alert(oEvent.getSource().getId() + " does it!"); }



3.3.4 Create an Additional View

Context

A SAPUI5 application view can only be created for a SAPUI5 application project that has been created with the SAPUI5 Application Wizard and not for other kinds of projects.

A SAPUI5 application view name needs to be unique inside the project folder. The specified folder for a SAPUI5 application view needs to be WebContent/ or a

sub folder.

Procedure

1. Choose New Other... SAPUI5 Application Development View to open the New SAPUI5 Application View wizard.

2. Fill in the required data: Select the SAPUI5 application project, in which you want to create the view. Select a folder, in which you want to store the view (default is WebContent/). Enter a name for the view. Select the development paradigm with which you want to develop your view.



Results

When you finish the wizard, the system creates the view in the specified folder. The file name suffix indicates the development paradigm: .view.js for JavaScript views .view.xml for XML views .view.json for JSON views .view.html for HTML viewsIf the corresponding index.html file contains sap.m lib in the bootstrap, that is, if the SAPUI5 application project has been created for a mobile target device, the view contains coding for instantiating a mobile page control sap.m.Page.The system also creates a controller file .controller.js with draft coding.For JavaScript views, code completion is available, see JavaScript Code Completion.



NoteIf you rename the view or controller file, or move them to a different folder, the coding in the view and controller and in the places where the view is used needs to be adapted manually.

Related Information

Views [page 67]

3.3.5 Integrate a New ViewTo integrate a new view, you can either add it to index.html or nest it into another view.

Prerequisites

If you create a new view for an existing SAPUI5 application project, the view needs to be manually called.

Procedure

To call a view, choose from the following options: Directly embed the new view in the index.html page All Views can be nested independent of the view type. Each view type behaves like any SAPUI5 control.

The viewName property defines, which views are embedded. To nest a view, proceed according to the given examples:

For XML view type:

For HTML views, the nested view looks as follows:

name= "example.mvc.test2" >

3.3.6 JavaScript Code Completion

When using the SAPUI5 tools, code completion is enabled automatically, without the tools, you need to enable it.

NoteIf your Eclipse installation contains the org.eclipse.wst.jsdt.feature feature in Version 1.3.1, we recommend to update it. Invoking the JavaScript code completion in version 1.3.1 may cause Eclipse to crash.

Automatic Code Completion for SAPUI5 Application Projects

The Eclipse JavaScript Development Tools (JSDT) provide an editor which parses scripts and offers a code completion functionality.

Code Completion for SAPUI5 Views

For JavaScript views, code completion is available.



Enabling Code Completion for Other Projects

If you are not working with a SAPUI5 application project, you can perform the following preparing steps to add the required SAPUI5 core libraries to the JavaScript include path.Ensure that the JavaScript Facet is set and proceed as follows:1. Open Project Properties .2. Select Project Facets.3. If you do not see the list of all possible facets, click the link: Convert to facet form and wait a second to see

all available facets.4. Mark JavaScript Facet on the same view.5. Leave the project properties.Your project now has the JavaScript facet. Now you can add the SAPUI5 core libraries. Proceed as follows: Open Project Properties . Choose JavaScript Include Path . Select Add JavaScript Library. Select SAPUI5.You should now be able to see the following JavaScript resources in your project:



3.3.7 Linking your Eclipse Editor to the Demo KitYou can use Quick Fixes to display the API documentation of a SAPUI5 control in the Demo Kit.

Procedure

1. Place the cursor on the actual SAPUI5 control name in your JavaScript code or in your XMLView. The name of the control in JavaScript code usually starts with sap.

2. To see all available Quick Fixes, press CTRL+1.3. To open the API documentation of the control in the Demo Kit, choose Display in Demo Kit.



3.3.8 Use JavaScript and XML TemplatesYou can add SAPUI5 control-specific templates for JavaScript code. Such templates are available, for example, in JavaScript views of SAPUI5 application tools development.

ContextSAPUI5 provides the possibility to add SAPUI5 control specific templates for JavaScript and XML code. These templates are available, for example, in JavaScript and XML views of SAPUI5 Application development. They are generated during startup of the Eclipse runtime.The templates are an overview over all available control properties aggregations associations and eventsTo use the JavaScript and XML templates, the SAPUI5 application development tools feature has to be installed in your Eclipse.

NoteIf your Eclipse installation contains the feature org.eclipse.wst.jsdt.feature in Version 1.3.1, we recommend to update it. In this version, invoking the JavaScript and XML code completion may cause Eclipse to crash.

Procedure1. To insert a template, open the JavaScript editor.2. Start typing the name of the respective control or the name of the alias, for example button.3. Choose CRTL + SPACE and choose the control from the code completion list.



All properties and events are inserted.

3.3.9 SAPUI5 SnippetsSAPUI5 snippets are templates and examples on how to use the SAPUI5 runtime and controls.

Context

You can add SAPUI5-specific code parts, so called SAPUI5 Snippets. SAPUI5 snippets are available as prepared HTML pages with no separation between model, view and, controller (MVC) and they are generated during startup of the Eclipse runtime.

Procedure

1. To open the Snippets view, proceed as follows:



a) Choose Window Show View Other... .b) In the Show View dialog, choose General Snippets and confirm you selection with OK.The Snippet view opens.

2. To insert a snippet, proceed as follows:a) Open the index.htmlof your SAPUI5 application project in the HTML editor.

b) Delete all content.c) To insert the snippet code, double click the snippet or use drag&drop.



d) Save the code and run it in the integrated browser.



NoteIf you have problems with incorrect rendered pages, open the external browser.

Results

The page should then be displayed correctly:



3.4 Browser and Platform MatrixesYou need to check which browser and platform suit best to your use case.

NoteAlso refer to SAP note 1716423

SAPUI5 is based on CSS3, HTML5 and the new JavaScript API. That's why only browsers with HTML5 capabilities are supported.Depending on the platform your SAPUI5 applications will run on, different browsers in different versions are supported. If you know the platform and the browser, your users are working with, you can decide which libraries to use for your application.

Related Information

sap.ui.core, sap.ui.layout [page 45]

sap.ui.commons, sap.ui.ux3, sap.ui.table [page 45]

sap.m [page 46]sap.viz [page 49]

sap.makit [page 50]

3.4.1 sap.ui.core, sap.ui.layout

sap.ui.core and sap.ui.layout are basic libraries used by every other library. They support a platform and a browser as soon as one of the other libraries support it.

3.4.2 sap.ui.commons, sap.ui.ux3, sap.ui.table

Microsoft Windows platforms

Supported Browsers



Browser VersionsMicrosoft Internet Explorer 9 and upwardsMozilla FireFox Extended Support Release (ESR) and latest versionGoogle Chrome Latest version

Mac OS platforms

On Mac OS platforms only Mac OS X is supported with Safari browser version 5.1 and upwards

3.4.3 sap.mThe following tables give an overview of the platforms supported by the sap.m library using SAP Blue Crystal theme.

NoteFor mobile operating systems, support is restricted to reference devices. For more information, see: Device Specific Policies [page 48]

iOS

iOs is supported as of platform version 5.

Browser SupportedSafari YesWeb View YesSAP Fiori Client YesGoogle Chrome NoOpera No

Android

Android is supported as of platform version 4



Browser SupportedAndroid Browser YesGoogle Chrome YesWeb View YesSAP Fiori Client Yes

Opera No

Opera mini NoFirefox No

BlackBerry

Blackberry is supported as of platform version 10.

Browser SupportedBlackberry Browser YesWeb View Yes

Opera mini No

Mac OS

On Mac OS, Safari browser is supported in version 5.1 or higher.

Windows

Touch is supported as of Windows 8.

Browser SupportedInternet Explorer Version 9 or higherMozilla Firefox Latest version and Extended Support Release*



Browser Supported Google Chrome Latest versionSafari NoOpera No

* In regards to handling touch events, there are some issues with Windows 8.

CautionWindows Mobile is not supported.

Exceptions

CautionThe SAP Mobile Visual Identity theme (sap_mvi) is outdated. All controls and control extensions released with 1.12 or one of the following releases do not support it. Also it is not supported for the platforms: iOS7 and Android 4.3. With release 1.20 it will be removed from sap.m. Use SAP Blue Crystal (sap_bluecrystal) instead that is supported for all controls and supported platforms.

Caution The controls FlexBox, HBox and VBox are not supported in Internet Explorer 9. The maxLines property of the Text control is not supported for all browsers and devices. For more

information, see: sap.m.Text

Related Information

Windows 8 Support - Known Issues [page 392]

3.4.3.1 Device Specific PoliciesFor mobile operating systems, support is restricted to reference devices.This means support incidents should be provided on the listed reference devices and will be handled on these devices.



Apple

Apple always supports the 2 latest releases of the iOS operating system. SAPUI5 supports Apple mobile devices 3 years from the vendor device release date, except defined otherwise. The following devices are supported:

Device End of Support DateApple iPhone 4, 4s 14 October 2014Apple iPhone 5 21 September 2015Apple iPad 2,3 23 October 2015

Android

Android OS based devices are very fragmented in matters of operating system variants and hardware diversity. SAPUI5 supports the following Android reference devices until 3 years from vendor device release date:

Device End of Support DateSamsung Galaxy S2 2 May 2014S3 29 May 2015S4 27 April 2016Galaxy tab 10.1 8 June 2014

Blackberry

SAPUI5 supports the following Blackberry reference device with Blackberry 10 Browser until 3 years from vendor device release date:

Device End of Support DateBlackberry Z10 31 January 2016

3.4.4 sap.viz

The VIZ charting library (sap.viz) relies on the open source component D3 which in turn relies on the availability of Scalable Vector Graphics (SVG).As SVG is not supported by Microsoft Internet Explorer 8 and not fully supported by Mozilla FireFox ESR, the VIZ charting library is also not supported on those browsers.For more information, see:sap.viz



3.4.5 sap.makit

iOS

iOs is supported in platform version 5 and 6.

Browser SupportedSafari YesWeb View YesGoogle Chrome NoOpera Mini No

Android

Android is supported as of platform version 2.3 until version 4.2

Browser SupportedAndroid Browser YesGoogle Chrome YesWeb View Yes

Opera No


BlackBerry

Blackberry is supported as of platform version 10.

Browser SupportedBlackberry Browser YesWeb View Yes



Browser Supported Opera mini No

Mac OS

Safari in version 5.1 or higher is enabled for development scenario, but not productively supported on Mac OS.

Windows

Safari and Chrome are enabled for development scenario, but not productively supported on Windows.

3.4.6 sap.ui.vbm

sap.ui.vbm is the Visual Business component in SAPUI5.

iOS

iOs is supported as of platform version 7.

Browser SupportedSafari YesWeb View NoGoogle Chrome NoOpera No

Android

Android is supported as of platform version 4.0

Browser SupportedAndroid Browser Yes



Browser SupportedGoogle Chrome YesWeb View No

Opera No


Mac OS

On Mac OS, Safari browser is supported in version 5.1 or higher.

Windows

Windows Desktop

Browser SupportedInternet Explorer Version 9 or higherMozilla Firefox No

Google Chrome Latest versionSafari NoOpera No

Windows TabletFor Windows Tablets only Internet Explorer is supported in the following versions:

Version Supported10 Desktop Yes11 Desktop Yes



Version Supported10 Immersive Mode Yes11 Immersive Mode Yes

CautionWindows Mobile is not supported.

3.5 Support TranslationThis section provides a description of what needs to be done to support the translation of resource bundles.

Prerequisites

You've created an SAPUI5 application project as described in:1. Create an SAPUI5 Application Project [page 28]2. Add a Control to Your View [page 31]3. Implement a Method in the Controller [page 32]

Context

To enable the translation of the user interface, you define a specific suffix for the resource bundles and use a specific first line in the resource bundle file.

Procedure

1. If not already done so, change the bootstrap tag (located in the index.html file) to enable the application to access the SAPUI5 libraries on the xsengine as follows: src="resources/sap-ui-core.js" to src="/sap/ui5/1/resources/sap-ui-core.js".

2. Create a new folder i18n in the WebContent folder. Add a new file messagebundle.hdbtextbundle to the i18n folder with the following content:

# TRANSLATE# XBUT,30MY_BUTTON_TEXT=Hello {0} button



NoteA specific suffix .hdbtextbundle is needed for the resource bundles on SAP HANA (so called .properties file on other platforms).

3. To load this bundle, add the following coding to the createContent function of your view:

// require the jQuery.sap.resources module jQuery.sap.require("jquery.sap.resources"); // load the resource bundlevar oBundle = jQuery.sap.resources({ // specify url of the .hdbtextbundle url : "i18n/messagebundle.hdbtextbundle"});

4. To add a control to your view for example to the helloworld.view.js), insert the following coding:

createContent : function(oController) {var aControls = []; var oButton = new sap.ui.commons.Button({ id : this.createId("MyButton"), // access the text using the welcome key and pass the value // for the placeholder ( {0} ) via an array text : oBundle.getText("MY_BUTTON_TEXT", [ "World" ]) }); aControls.push(oButton.attachPress(oController.doIt)); return aControls;}

The text property of the button now is connected to the resource bundle and can be displayed in other l

SAP UI5 Developer Guide for SAP HANA En

Documents

Transcript of SAP UI5 Developer Guide for SAP HANA En