You are on page 1of 148

SAPUI5 Overview

June 2013


SAPUI5 Overview

Resource Handling

Programming Applications


SAPUI5 Developer Studio


Creating a SAPUI5 Project

Styling & Theming

Model – Viewer – Controller

SAPUI5 Mobile


Extending SAPUI5

Databinding – OData


Notepad Controls

CVOM Charts

Resource Repositories

Optimizing SAPUI5

© 2013 SAP AG. All rights reserved.


SAPUI5 Overview

SAP UI Development Toolkit for HTML5 SAP UI Development Toolkit for HTML5 The official long name SAPUI5 The short name UI5 Internal name For official communication the upper two versions have to be used. 4 . © 2013 SAP AG. All rights reserved. UI5 used to be named "Phoenix". it was changed to SAPUI5 in the summer of 2011 because the name Phoenix was not suitable to be used publicly.

using and including the popular jQuery library © 2013 SAP AG. etc. HTML 5.        well-designed API. 5 . including tooling support high performance. All rights reserved.Main UI5 Characteristics SAPUI5 is an extensible JavaScript-based HTML5 browser rendering library for Business Applications. CSS. Javascript. easy to consume and use extensible UI component model. SAP product standard compliant powerful theming support based on CSS provides Ajax capabilities based on open standards like OpenAjax.

All rights reserved.UI5 Key Components Run Time  Control libraries (JavaScript. JavaScript files) Design Time (optional)     Application development tools in Eclipse Control development tools in Eclipse Resource handler in Java and ABAP Theming generator © 2013 SAP AG. CSS and image files)  Core (JavaScript files)  Test suite (HTML. 6 .

All rights reserved. text-shadows. etc. © 2013 SAP AG.UI5 Browser Support Internet Explorer Firefox Chrome Safari Version 8 and upwards Version 10 and upwards Version 10 ESR and upwards Version 1 and upwards Version 3 and upwards (with limitations)* *Internet Explorer 8 is supported with graceful degradation for CSS3 features like rounded corners. 7 .

All rights reserved. 1. 8 .g.5. 1.g. Only these versions are allowed to be used in production.4.1  The versions of this track are released internally and are not meant to be used in products shipped to customers. © 2013 SAP AG. Release track  Identified by a major and an even minor version number.UI5 Release Plan Development track  Identified by a major and an odd minor version number.1  The versions of this track are released externally. e. e.

UI5 Architecture Overview Application CLIENT Application SERVER © 2013 SAP AG. All rights reserved. 9 .

ux3 Includes UX3 patterns. Button sap.: Shell sap.g.commons Includes “bread and butter" controls like TextField. like sap. sap. e.viz.ui.table sap.ui. mainly available in “Gold Reflection” … © 2013 SAP AG. 10 . All rights reserved.UI5 Control Libraries sap.ui.m Includes the Table control Includes controls for mobile devices And more.ui.

All rights reserved. © 2013 SAP AG. HTML and CSS into UI5 based pages  Include other JavaScript libraries where UI5 is lacking controls or functionality  Create composite controls from existing UI5 controls  Write new UI libraries and new controls  Write plug-ins for the UI5 core This way UI5 development groups should not become a bottleneck for application groups in need of a certain functionality. 11 .UI5 and Extensibility UI5 allows application developers to  Include their own JavaScript.

All rights reserved.UI5 Knowledge and Test Resources Documentation and Information UI5 support and question channels • UI5 Wiki • SAPUI5 Community • UI5 Mobile Wiki • CSN Component: • UI5 Tools Wiki • CA-UI5 (UI5 Runtime) • Demokit • CA-UI5-MOB (UI5 Mobile Lib) • API Documentation • General UI5 Documentation Control and code testing • Test Suite UI5 Tools support and question channels • SAPUI5 Tools Community • CSN Component: • CA-UI5-TOL (UI5 Tools) • SNIPPIX © 2013 SAP AG. 12 .

All rights reserved.UI5 Application Example “Hello World” Example in SNIPPIX © 2013 SAP AG. 13 .

UI5 Application Example Showcase of SAP Applications built with UI5 © 2013 SAP AG. All rights reserved. 14 .

All rights reserved. CSS and image files that run in a browser. Eclipse development tools Sample apps 15 . Runtime documentation © 2013 SAP AG. Apart from this main offering – the runtime files – UI5 has many more optional pieces of software.UI5 Runtime UI5 mainly consists of JavaScript.

Programming Applications .

comma-separated  data-sap-ui-theme: the theme  There are more attributes: data-sap-ui-language. data-sap-ui-rtl. All rights reserved. Attributes of the script tag are evaluated and used to configure the runtime  data-sap-ui-libs: the controls libraries to be used. 17 . …  Instead of putting the attributes in the script tag. many can also be added as URL parameters © 2013 SAP AG. to load the UI5 runtime.SAPUI5 bootstrap UI5 pages always have to start with the bootstrap.

18 . All rights reserved. Bootstrap 2.Application script and UI Area Exercise 1 After the bootstrap script tag an "application script" can follow in which the UI5 application is written  You create your controls like layouts and TextFields  Display your controls in an HTML element called "UI area" by invoking the placeAt method (there can be multiple UI areas) 1. UI-Area © 2013 SAP AG. Application 3.

sap. All rights reserved.dhcp.wdf. 21 .corp:8080/snippix/snippets/11571 © 2013 SAP AG.Example of Multiple UI Areas Exercise 2 http://veui5infra.

getCore() jQuery.ui.ui.getElementById but gets rid of IE bug which also retrieves elements with the name of id sap.Useful Core functions Exercise 3 sap. the element returned is the topmost HTML element of this UI5 control (the UI5 control id is always used there)  Similar to document.applyChanges( jQuery. 24 .byId(id)  Gets an instance of a UI5 control which was created with id id  Can be used to access removed controls (even though the id doesn’t exist in the DOM anymore) sap. before the runtime  Similar to jQuery(„#myId“) or $ would do it (use carefully!!) („#myId“) but handles escaping of dots and adds the hash character © 2013 SAP AG.getCore(). All rights reserved.domById(id)  Gets a core instance  Gets any HTML element with id id  If there is also a UI5 control with id )  Returns the jQuery object of the DOM  Carries out and renders the changes for UI5 element with the specified id controls immediately.getCore().

All rights reserved. 27 . Changes to controls (add/remove properties) are not directly carried out     Onload at initialization (placeAt calls are buffered until then) After control event handlers have finished their work After application logic has finished changing controls (UI5 registers a timeout) When core method applyChanges() is triggered © 2013 SAP AG.Internals about UI5 Rendering UI5 control tree(s) are only rendered when the HTML page is finished loading  Only then the UI areas do actually exist in the browser’s DOM  This corresponds with jQuery’s $(document).ready() function UI5 largely uses HTML strings to render its controls  Historically using innerHTML for changing HTML was much faster than changing the DOM for the same purpose.

SAPUI5 Developer Studio .

SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the
development process for UI5 applications and controls, including:

Wizards for project and view/controller creation

Wizards for control development

Code Completion for UI5 controls

TeamProvider for NGAP and BSP repositories

Application preview with an embedded Jetty server

Proxy-servlet to prevent cross-site-scripting errors

More detailed information about the SAPUI5 Developer Studio is available in the
SAPUI5 Tools Wiki at

© 2013 SAP AG. All rights reserved.


Prerequisite: Install the latest Java Development Kit (currently Version 7), if it is not
installed already.
Download and install one of the preconfigured IDEs. If you want to use the SAPUI5
Repository Team Provider you should choose the 32bit version.

It is also possible to setup Eclipse on your own by using one of the available
update sites for Eclipse.
Once Eclipse has been (re)started, the SAPUI5 Eclipse tools should be available.
One way to confirm a successful installation is to check whether you can create a UI
Library Project / SAPUI5 Application Project.
The full installation information is available in the Tools Wiki at:

© 2013 SAP AG. All rights reserved.


Creating a UI5 Project
with SAPUI5 Developer

32 .Creating a new SAPUI5 Project  In Eclipse right-click on the project pane to bring up the context menu (or use the File  New… entry from the Eclipse menu). All rights reserved.  Choose New  Project… © 2013 SAP AG.

© 2013 SAP AG. All rights reserved.Creating a new SAPUI5 Project  Select "SAPUI5 Application Project" in the Wizard.  Click "Next". 33 .

Creating a new SAPUI5 Project  Enter the name of the project. All rights reserved. © 2013 SAP AG.  Click "Next".  Choose between „Desktop“ or „Mobile“ as the target device for your new project. 34 .  Leave the checkbox "create an initial View" checked.

All rights reserved.Creating a new SAPUI5 Project  Enter the name of the initial view.  Click "Next". 35 . © 2013 SAP AG.

 Click "Finish" to create the new project. © 2013 SAP AG. All rights reserved. 36 .Creating a new SAPUI5 Project  The last screen shows you a summary of the project properties.

All rights reserved.The new Project © 2013 SAP AG. 37 .

All rights reserved.Adding a shell to the view © 2013 SAP AG. 38 .

All rights reserved.ux3 library © 2013 SAP AG. 39 .Adding the sap.ui.

Testing the Application © 2013 SAP AG. All rights reserved. 40 .

Testing the Application © 2013 SAP AG. All rights reserved. 41 .

42 . therefore does not display most CSS3 features • Creates a random port which stops working when Web App View is closed.Jetty Disadvantages compared to testing on server: • Based on Internet Explorer. All rights reserved.Web Application Preview . this link stops working as well • Use therefore not recommended © 2013 SAP AG. if link is copied into a browser for debugging.

All rights reserved.Exercises – Developer Studio Exercise 4 Create a new SAP UI5 Application project and add a UX3-Shell to it Exercise 5 Add content to the UX3-Shell © 2013 SAP AG. 43 .


mvc.JSONView) • declarative HTML (sap.ui.JSView) • JSON (sap.mvc.core.core.ui.mvc. mixed or standalone (sap. © 2013 SAP AG.core.HTMLView) Controller • bound to a view or standalone • can also be used by multiple views Model: Data binding can be used on the views Find an “MVC in 22 seconds” example here.XMLView) • JavaScript (sap. 49 .Basic Model-View-Controller Concept Views can be defined using • XML with HTML. All rights reserved.core.ui.mvc.ui.

view.xml © 2013 SAP AG.View and Controller Exercise 6 address.js address.controller. All rights reserved. 50 .

53 .File Location Logic Controllers and views use the require/declare logic. so if a controller is referenced like this: UI5 then checks if you already have defined the controller like this in one of your already processed application sources If this is not the case then UI5 tries to load this definition from a file that by default is located in your UI5 resources folder. All rights reserved. resources/sap/hcm/Address.controller. This applies to views as well.js © 2013 SAP AG.

Controller Events Currently there are 4 events defined in a controller: You can add handlers for any of these for to your controller class: onInit  Fired when the view is first instantiated onBeforeRendering  Fired before the view is rendered onAfterRendering  Fired when the view has been rendered (the HTML is injected into the document) onExit  Fired when the controller is destroyed  Can be used to free resources © 2013 SAP AG. All rights reserved. 54 .

Example JS View © 2013 SAP AG. 55 . All rights reserved.

Example XML View © 2013 SAP AG. All rights reserved. 56 .

57 .Example JSON View © 2013 SAP AG. All rights reserved.

Example HTML View © 2013 SAP AG. All rights reserved. Exercise 7 58 .

g. controller/window) Yes Yes Yes Yes Multiple Eventlisteners and/or without scope Yes No No No Simple Data Binding (Path. template approach) Yes Yes Yes Yes Customized Data Binding (formatter. float Yes Yes Yes Yes Properties of other types (object) Yes No No No Aggregation 1:1. default or named model.boolean.g. with limitations No No Templating (Eclipse) Yes No No No Validation No Yes No No © 2013 SAP AG. 64 . but outside the data binding features) Yes No No No Code completion (Eclipse) Yes Yes. e. 1:n Yes Yes Yes Yes Single Event Listener Registration (maybe limited to some scope. int. based on model data. Association 1:1.View Type Comparison Feature JS View XML View JSON View HTML View Controls from Standard and Custom Libraries Yes Yes Yes Yes Self-contained registration of custom library locations Yes No No No Properties of types string. factory approach) Yes No No No Embedded HTML (without use of HTML control) No Yes No No Dynamic control creation (e. data type. 1:n. All rights reserved.

Databinding .

36 Age: 36 Data binding supports binding of simple controls like TextField and list type controls like.UI5 Data Binding In UI5. 35 Age: 35 Resulting UI5 Control / Output John Doe. 66 . © 2013 SAP AG.g. All rights reserved. 35 Age: 35 application data has been updated John Doe Age: 36 With TWO-WAY-BINDING the application data is updated whenever the value of a bound control changes. application data John Doe UI5 Control / Output John Doe. through user input. See the complete documentation on how data binding works and how to implement it in an application. application data John Doe UI5 Control / Output John Doe. DATA BINDING is used to bind UI5 controls to a data source that holds the application data. e. so that the controls are updated automatically whenever the application data is changed. 36 Resulting application data John Doe UI5 Control / Output has been updated John Doe.

the ResourceModel helps binding translated texts. © 2013 SAP AG. JSON model  supports data in a JavaScript Object Notation format  supports two-way binding XML model  supports XML data  supports two-way binding OData model  supports OData compliant data  creates OData requests and handles responses  includes the open source library dataJS to handle OData requests and data  experimental two-way binding Additionally. All rights reserved.Data Binding: Model Types UI5 data binding supports three different model implementations. Applications can create their own Model implementations. 67 .

All rights reserved. JSON-Model: XML-Model: OData-Model: © 2013 SAP AG. The constructor takes the URL of the model data or the data itself as the first parameter.Creating a Model Instance To use data binding in a SAPUI5 applications you will need to instantiate the appropiate model first. 68 .

All rights reserved. If there is no model in the root path found. The relevant model for a control is the one which is nearest to it on the path up to the root (UI area).Assigning the Model After the model has been created you can assign the model to the Core or specific controls with the setModel method. 69 . the one attached to the core becomes the relevant model. © 2013 SAP AG.

70 . © 2013 SAP AG. All rights reserved. "modelProperty"). bindProperty method: oControl.commons.ui.commons.TextView({ controlProperty: "{modelProperty}" }).bindProperty("controlProperty". curly braces syntax: var oControl = new sap. (alternatively) by path: var oControl = new sap.Property Binding Most of the properties of a control can be bound to model properties. in the constructor with curly braces or using the bindProperty method. There are two ways to bind properties to the model.TextView({ controlProperty: { path: “modelProperty” } }).ui.

dhcp.Example for Simple Control Exercise 8 http://veui5infra. All rights reserved.wdf.corp:8080/snippix/snippets/9282 © 2013 SAP 71 .

All rights reserved.Aggregation Binding Aggregation binding is used to bind a collection of values. © 2013 SAP AG. like binding multiple rows to a table. The aggregation binding can also be defined using the bindAggregation method of a control. To use aggregation you will have to use a control that acts as a template. 74 .

dhcp.Example of Aggregation BindingExercise 9 http://veui5infra. All rights reserved.corp:8080/snippix/snippets/60875 © 2013 SAP AG. 75

phone: "734" } ] } } © 2013 SAP AG. Absolute binding paths within this model: /company/name /company/info/employees /company/contacts (a collection!) /company/contacts/0/name Relative binding paths within the "/company" context: name info/employees contacts Relative binding paths within an aggregation binding of "/company/contacts": name phone 78 .{ name: "Gerry". phone: "873" }. All rights reserved. contacts: [ { name: "Barbara". info: { employees: 3 }.About Binding Paths { company: { name: "ACME".

Property bindings for a named model: Aggregation bindings for a named model: © 2013 SAP AG.Multiple Models / Named Models It is possible to set multiple models for an element or the core by specifying individual names for the models. which are used to identify them. All rights reserved. 79 .

Extended aggregation binding: 80 . All rights reserved. To use the extended syntax you supply an object literal for the bound property/aggregation. filter and sorters for aggregation binding.Extended Data Binding Syntax Instead of just using the token name of a model property you can also use the extended data binding syntax. Extended property binding: © 2013 SAP AG. This enables you to use formatters and the type system for property binding and templates.

All rights reserved. © 2013 SAP AG.Formatters Exercise 10 For properties you can supply a formatter function which will be called with the value of the model property. 81 . The return value of the formatter function is used as the value of the bound control.

For each Type you can define the following parameters in the constructor: format options: Format options define how a value is formatted and displayed in the UI. input values in UI controls are parsed and converted back to the defined type in the model. constraints (optional): Constraints define how an input value entered in the UI should look like. Bound properties with a defined type will automatically be formatted when displayed in the UI. 84 . © 2013 SAP AG. All rights reserved.Type System Data binding supports the definition of types which can be handed over when binding properties. When parsing the value will be validated against these constraints.

Example – Date Type © 2013 SAP AG. Exercise 11 85 . All rights reserved.

All rights reserved.Custom Types © 2013 SAP AG. 88 .

© 2013 SAP AG.Sorters and Filters Exercise 12 When using aggregation binding. 89 . you can provide initial sorting and filtering. All rights reserved.

All rights reserved. 92 . For example the value property of text field may be bound to a property firstName and a property lastName in a model.Calculated Fields The Calculated Fields feature allows the binding of multiple properties in different models to a single property of a control. The application can access these values in a formatter function and can decide how they should be processed or combined together: Property Declaration Formatter Function © 2013 SAP AG.

it needs to be switched on via the configuration flag xx-bindingSyntax=„complex“ within the bootstrap. Because it is still experimental. 93 .Calculated Fields – Extended Syntax The extended syntax for calculated fields can be used in declarative views such as html and xml views. Now you can mix the text and calculated fields: © 2013 SAP AG. All rights reserved.

94 .dhcp. All rights reserved.Example of Calculated Fields Exercise 13 http://veui5infra.corp:8080/snippix/snippets/76601 © 2013 SAP

All rights reserved.Master-Detail Relationship A master-detail relationship is a 1:n type relationship. © 2013 SAP AG. Examples of a master-detail relationship are: • a set of purchase orders and a set of line items belonging to each purchase order • an expense report with a set of expense line items • a department with a list of employees belonging to it An application can use this master-detail relationship to enable users to navigate through the purchase order data and see the detail data for line items only related to the master purchase order selected. 97 .

All rights reserved.Example of Master-Detail © 2013 SAP AG.dhcp. 98 .wdf.

All rights 99 .dhcp.Example of Master-Detail: Code Part 1 http://veui5infra.corp:8080/snippix/snippets/30500 © 2013 SAP AG.

100 .wdf. All rights reserved.Example of Master-Detail: Code Part 2 © 2013 SAP AG.dhcp.

All rights reserved. you can register the following handlers to the SAPUI5 Core. • attachFormatError • attachParseError • attachValidationError • attachValidationSuccess Example: © 2013 SAP AG. 101 .Input Validation To catch invalid user input.

Exercise – Data Binding Exercise 14 © 2013 SAP AG. Create a searchable Musicstore and populate it with data from iTunes 102 . All rights reserved.

Databinding .OData .

All rights reserved. entries. Resource path Query options 109 .OData . Atom Pub format and JSON • Enables provision of data services based REST principles • Released under “open specification promises“ by Microsoft • Defines data queries using URLs constructed with specific rules • Defines data formats representing resources like etc. in either Atom or JSON format OData URL structure: http://services.Open Data Protocol • Based on HTTP.svc/Category(1)/Products? $top=2 Service Root URI © 2013 SAP AG.

properties and relationships exposed by the OData service: http://services.svc/ $metadata The $metadata entry for an OData service return a EDMX file (Entity Data Model XML) that contains a complete description of the feeds.odata.OData . All rights 110 . this experimental API Explorer by the OData Service can be used: © 2013 SAP$metadata Alternatively.Service Document & Metadata Service Document The service document (returned at the OData service root) gives you the titles and urls for each service feed: http://services. types.

Parameter Description Example $orderby Orders entries by the entity supplied /Products?$orderby=Rating. you can supply some system query options to influence the returned entries.Name © 2013 SAP AG.System Query Options When accessing an OData service. 111 .OData .desc $top Selects only the first N items in a collection /Products?$top=5 $skip selects entries starting by N+1 /Products?$skip=2 $filter filters entries based on the criteria /Suppliers?$filter=Address/City eq 'Redmond' $expand expanded Entries are eagerly loaded /Categories?$expand=Products and presented inline $format defines the format that the server must return /Products?$format=json $select returns the subset of the specified properties /Products?$select=Price. All rights reserved.

ID. © 2013 SAP AG.Adding OData Query Options SAPUI5 handles most of the URL parameters for OData services automatically. Expand Parameter: Select Parameter: oControl. You do have the ability to add query options manually.Category" } }).bindRows({ path: "/Products".bindRows({ path: "/Products". select: "Name.bindElement( "/Category(1)". All rights reserved. either by adding them to service URL or passing a map of parameters when using bindElement or bindAggregation. oTable. parameters: { select: "Name. oControl. { expand: "Products". oTable.bindElement( "/Category(1)". { expand: "Products" } ). parameters: { expand: "Category" } }).Products" }). 112 .

corp:8080/snippix/snippets/63664 © 2013 SAP AG. All rights reserved. 113 .sap.dhcp.wdf.Example code for OData Exercise 15 http://veui5infra.

Notepad Controls .

Overview There are two approaches to develop UI5 Controls. All rights reserved. either with tool support.ui. Since an IDE is not needed to create new controls with the extend method these controls have been named "Notepad Controls". This section deals with creating custom controls in JavaScript with the extend method. 117 .base. or just as part of a plain JS file. Arbitrary objects derived from sap. Technically.Object can be created or extended. this functionality is not restricted to Controls. Snippix-Example "New Control in 19 Seconds" © 2013 SAP AG.

Control.extend(sName. Creating a new Control which inherits from Button: • sap.extend(sName. aggregations.Button. etc. Creating a new control: • sap.commons. which properties. The parameters to this function are the name and the definition of the new control type. The definition part contains information about the control API. © 2013 SAP AG. 118 .The extend Method The extend() method is available on all Controls (and the base classes) and is used to define a new subclass. Some methods such as the getters and setters for the properties and aggregations or the methods for attaching/detaching event handlers are automatically created by UI5.ui.ui. oDefinition). events. All rights reserved. the control has and the implementation of the control methods. oDefinition).core.

public and private methods. All rights reserved. 119 . event handler and the renderer.Control Definition The definition object for a custom control may contain metadata. © 2013 SAP AG.

corp:8080/snippix/snippets/3357 © 2013 SAP All rights reserved. 120 .Basic Example http://veui5infra.wdf.

ui. etc. width: { type: "sap. events and aggregations.ui. string[] for an array of strings.Control Metadata The metadata in the control definition consists of objects for the control properties.CSSSize". showLogoutButton: { type: "boolean". btnTxt: { defaultValue: "Search"}. defaultValue: true }. (undefined if not set) © 2013 SAP AG. properties: { title: "string". sap.core. Properties Example type: The data type of the Control property. 121 .core.CSSSize for a custom-defined type defaultValue: The default value of the property. defaultValue: "50px" } } • • • • string for a string property (default) int or float for number properties int[] for an array of integers. All rights reserved.

NavigationItem".ux3. singularName : "worksetItem" } } events: { logout: {}. close: { enablePreventDefault : true } } © 2013 SAP AG.Control Metadata Events Aggregations Events are specified by the event name only.ui. Aggregations and associations are defined by their name. multiple: true. All rights reserved. 122 . In many cases there is nothing to configure about them. Controls can enable events to be interrupted by the application.commons. along with an object that can have a type. using the enablePreventDefault flag. worksetItems: { type: "sap.Button". aggregations: { acceptButton: "sap. a multiple flag and a singularName. so just give an empty object.ui.

Control Methods
After the metadata is defined, you can add any method implementations to your
new Control. The method names can be chosen freely, some method names must
be avoided though:

Names of methods that are provided by a super class.

Methods starting with set, get, insert, add, remove or indexOf may collide with
setters/getters for properties or aggregations you defined.

Methods starting with attach, detach or fire may collide with methods created for

There are some method names you may use but which have a special meaning:

on...: Methods starting with "on" are event handlers that are automatically bound to
browser events.

init: Is the name of the initialization function called right after Control instantiation.

renderer: The name of the function that creates the HTML for the control.

© 2013 SAP AG. All rights reserved.


Control Methods
Public / private methods
The convention is that private methods start with an underscore. All other methods
are considered public.
init Method
The init() method is invoked by the UI5 core for each control instance right after
the constructor. Use this to set up things like internal variables or sub-controls of a
composite. This method is considered private and only to be called by the UI5 core.
onAfterRendering Method
The onAfterRendering() method is invoked after the controller's View is
Event handler methods
Methods that have a name starting with on are reserved for event handlers. For
common events such as click or keydown, browser event handlers for these
methods are registered automatically by the UI5 core.
© 2013 SAP AG. All rights reserved.


Control Methods - Examples
// public method
divide: function(x, y) {
if (this._checkForZero(y)) {
throw new Error("Second
parameter may not be zero");
return x / y;
// private method
_checkForZero: function(y) {
if (y === 0) {
return true;
return false;

// init method, invoked when
// is instantiated
init: function() {
this._bSearchTriggered = false;
this._oSearchBtn =
new sap.ui.commons.Button(
this.getId() + "searchBtn",
{ text: "Search" }
// event handler
onclick: function(e) {
alert("Control " + this.getId()
+ " was clicked.");

© 2013 SAP AG. All rights reserved.


Instead.writeClasses().write(">"). you can give the name of this renderer class.writeEscaped(oCtrl.write("<div").getText()).writeStyles(). renderer: function(oRm.Control Renderer Example: The renderer method is responsible for creating the HTML structure that makes up the control. oRm.addStyle("width". } Using an existing renderer: If an existing renderer should be used without modification. oRm. oRm. oCtrl) { oRm.addClass("myClass"). © 2013 SAP AG. oRm. oRm. All rights reserved. a control instance and a RenderManager instance are given to the method. renderer: "sap. oCtrl. oRm.commons. as it is a static one.ui.write("</div>"). oRm.writeControlData(oCtrl). oRm.getSize()). It is different from the other methods.ButtonRenderer" 126 . so the this keyword is not available.

sap.corp:8080/snippix/snippets/64805 © 2013 SAP AG. 127 .Example with Data Binding http://veui5infra.dhcp.wdf. All rights reserved.

Example with Charts © 2013 SAP AG. 128 .wdf. All rights reserved.dhcp.

Add an Audioplayer Control to your Music store from Exercise 14 and have the selected song play 129 .Exercise – Notepad Controls Exercise 16 © 2013 SAP AG. All rights reserved.

Resource Repositories .

Overview In order to get UI5 running on a web page. All rights reserved. These options are available for referencing the UI5 runtime files:  CDN (content delivery network)  Runtime libraries (wars and jars)  SDK (repository / drop) © 2013 SAP AG. 134 . the UI5 resources need to be loaded by the browser.

com/community/dev eloper-center/front-end • Current version: 1. All rights reserved. 135 .1 • Includes static JavaScript-Files. war-Files and the Demokit © 2013 SAP AG.Public Trial A trial version of the SAPUI5 framework has been released in the SAP Community Network •

sap. You can include UI5 in any HTML file with the following script tag without actually deploying UI5. set the src of the script to: http://vesapui5.commons"> </script> The above example shows the URL which points you to the nightly built.dhcp.js veui5infra.wdf.CDN .corp:8080/sapui5/resources/sap-uicore.Content Delivery Network The content delivery network provides a ready-to-consume nightly-build version of is an internal server and you cannot ship your © 2013 SAP AG. <script id="sap-ui-bootstrap" src="http://veui5infra.12/resources/" data-sap-ui-theme="sap_goldreflection" data-sap-ui-libs="sap.dhcp. including the newest features but also the newest bugs. product referencing this CDN! 136 . All rights reserved.ui.wdf. To use a stable release.wdf.corp:8080/sapui5-1.dhcp.

documentation. © 2013 SAP AG.g. All rights reserved.corp:1080/repository/drop/  The latest public version is located in the latest-release directory. 137 .  The latest version. including internal releases is always available in the latest-milestone folder.wdf. Eclipse development Tools.SDK – repository/drop The SDKs contain almost everything that UI5 has to offer: Runtime. sample apps and can be downloaded from http ://veui5infra.  The zip file contains a readme.html file which explains the different parts of the SDK  Please be aware that an SDK drop also may contain stuff that is not intended and will not be shipped ( snippix).

ui5&a=sapui5&v=1.corp:8081/nexus/service/local/artifact/maven/redirect? r=deploy.html#nexus-search.wdf.9.0-static.snapshots&g=com.snapshots& © 2013 SAP x http://nexus.wdf.8. from lightweight releases in war packages or zip files to nightly builds.8.milestones/co ntent/com/sap/ui5/sapui5/ x Maven snapshots http://nexus:8081/nexus/service/local/artifact/maven/redirect? r=deploy.corp:8081/nexus/index.milestones&g=com. All rights reserved.9.0SNAPSHOT&e=zip&c=static http://nexus:8081/nexus/service/local/artifact/maven/redirect? r=deploy.Maven Nexus Repository In the Nexus repository you can find the runtime files for all versions of UI5. x x 138 .ui5&a=sapui5&v=1.corp:8081/nexus/service/local/repositories/ URL js http://nexus.quick~sapui5 war x Direct download http://nexus.

Resource Handling .

ABAP …).Resource Handler. Java. Both parts are not dependent on each other. independent of the server side technology. Furthermore they are complementary. © 2013 SAP AG.Overview Resource Handling The Resource Handling of SAPUI5 is separated in two parts: Client-side Mechanisms • Modularization ► Require/Declare for JavaScript files • Localization ► Resource Bundles Both concepts are loading additional resources from a server where this server might be any kind of web server (simple. All rights reserved. also supporting standard and test-relevant resources Additional features: ► Theme fallback ► Resource Bundle fallback SAPUI5 also provides a Resource Handler for the ABAP server which is used for SAPUI5 applications to serve the resources from the UI libraries properly. Server-side Mechanisms • • • SAPUI5 provides a Resource Handler for the Java server and the integration into the Eclipse IDE. 140 . aligned with the concept of the JavaServer Faces .

Modularization .

commons. function onPressButton() { sap. 142 .commons. which then can be loaded at runtime when they are needed.require must be used.ui.MessageBox.js” extension is added to create a path. individual files are called Modules in UI5.alert("Hello World!").” are replaced by “/” and an “.js This is an example: <script> jQuery. So sap.  To load a module.ui. These").sap.commons. an application can be split into smaller parts. All rights reserved.require("sap.MessageBox will become sap/ui/commons/MessageBox.Modularization using require The UI5 framework has built in support for modularizing larger JavaScript applications. } </script> © 2013 SAP AG.  Instead of defining (and loading) one large chunk of JavaScript code. the function jQuery.  In a module name all “.ui.

Core"). // list of dependencies of this module jQuery.  If a module is required (jQuery. This tells the UI5 runtime about the name of the". it calls the declare method.other.SampleModule = {}. UI5 runtime keeps track which modules are already loaded.Also".core. jQuery. 143 jQuery.require("you.require("some.useful. While it is carried Will ensure that the namespace ' it is loaded automatically.useful' exists.declare function.multiple. "list.Want"). All rights reserved.Modularization using declare In order to create your own JavaScript Module you need to “declare” the module  A file becomes a module by calling the jQuery.require) and it hasn’t been loaded before. "if.ui. // create the 'main' object of the module"my. creates it // declaration of the module.SampleModule"). © 2013 SAP AG. jQuery.can. so from now on UI5 knows that it has been loaded and when the next require comes about nothing needs to be done anymore  The declare function checks if the parent namespace object exists and if"sap.Module").

144 . All rights reserved. namely from the centrally deployed web application.registerModulePath UI5 by default will try to load any required modules from its resource root URL.registerModulePath Example of using registerModulePath: © 2013 SAP AG. This would fail for the modules contained in your web Mixed location scenarios are supported with jQuery.

Localization .

ui.getText(sKey).require("jquery. Get the resource bundle for a given language (if no locale is given.resources({url : sUrl. locale: sLocale}) which is aligned to the ResourceBundle concept in Java You can get the URL for a resource with this: var sUrl = sap. And then access the texts in the resource bundle var sText = oBundle.resources").Localization / Resource Bundle Exercise 17 UI5 has a built-in localization concept. 146 .properties").table". All rights reserved.ui.resource("sap. English is loaded by default) var oBundle = jQuery. © 2013 SAP AG."messagebundle.

commons.Button({ id : "myButton".ui. When using the bundle name the file must have the .getCore(). default is current language.ui. there is a wrapper for resource bundles that exposes the localized texts as a model for data binding. so better omit it }). // attach the resource model with the symbolic name "i18n" sap.setModel(oModel.ui. text : "{i18n>MY_BUTTON_TEXT}“ // this points to a named model }). All rights reserved. "i18n").model. 149 .resource. © 2013 SAP AG. var oControl = new bundleLocale: "en“ // optional.ResourceModel({ bundleUrl: "myBundle. Example: var oModel = new sap. A ResourceModel can be instantiated with a bundleName or a bundleUrl which points to a resource". // will use myBundle_en.Localization with Resource Model Exercise 18 With the ResourceModel.

Styling and Theming .

All rights reserved.. mixins...UI5 Theming • Based on CSS and CSS Parameters • Generator merges files and appends specific themes to base theme • • • • Replaces CSS Parameter usages Automatic right-to-left generation (For RTL languages like Hebrew) One CSS file per control library (library. 153 . Adjusting CSS directly with standard tools 2. Changing parameters for the main features of a theme using the Theme Designer See general SAPUI5 Theming Concept © 2013 SAP AG.) • UI5 Framework handles theme switching at runtime (see next slide) UI5 offers two main options to adjust themes: 1.css) SAPUI5 uses LESS to handle the CSS parameters (it also allows calculations.

OR OR = = 154 . All rights reserved.Switching Themes Themes can be applied via URL-parameters of via the bootstrap: © 2013 SAP AG.

155 .The library.css files © 2013 SAP AG. All rights reserved.

/* text color can be referenced multiple times*/ [.. /* text color is set to 'black' once*/ button { color: @sapUiTextColor. All rights reserved.. 156 ..CSS Parameters • • • • • Some values (often: colors) used for different elements Parameters: write once. /* text color can be referenced multiple times*/ [.] } h2 { color: @sapUiTextColor.. reference often Parameters are mixed into the CSS of the controls The parameters are usually set in central files With the LESS generator the parameter values are inserted and CSS only files are generated Example of a color parameter: @sapUiTextColor: #000000.] } © 2013 SAP AG.

var myColor = sap.ui. 157 .Parameters"). © 2013 SAP AG.ui. All rights reserved.require("sap.get("sapUiSemanticErrorColor").theming.Parameters.core. like Canvas or WebGL jQuery.CSS Parameters II Parameter values can be read at runtime with a JavaScript API • • This allows transferring UI5 theme parameters to own HTML parts Useful when one uses technology which cannot be influenced by CSS

One can add <style> or <link> tags in the HTML <head> tag to include new styles • These styles are always processed after the UI5 CSS from the themes • As the last processed CSS wins in case of multiple same CSS rules. 158 . Using the addStyleClass method that every UI5 control has • One can add a CSS class to the top level HTML element of the UI5 control USE THESE METHODS WITH CAUTION – MIGHT PRODUCE UNWANTED RESULTS WITH FUTURE SAPUI5 THEME UPDATES! © 2013 SAP AG. All rights reserved. the custom CSS always overwrites the standard UI5 CSS • The parts to be overwritten can be determined using tools like Firebug in Firefox (or press F12 in all other browsers) • It is also important to know that the id given to a control is also the id that the topmost HTML element of this control gets. 2.Adjusting Styles In some cases one needs to adjust only small parts of the theme. this id can be used as a reference in CSS • The CSS precedence rules may sometimes lead to the impression that UI5 CSS cannot be overridden. There are two options to style specific elements: 1. It needs to be understood that the more specific selector wins. Thus.

All rights reserved.Examples Exercise 19 Example of custom CSS via <style> tag Example of addStyleClass method © 2013 SAP AG. 159 .Adjusting Styles .

162 .The Theme Designer Parameters can be easily modified using the UI5 Theme Designer • • • Easy CSS-free theming/branding as long as mainly colors need to be changed Live preview in real applications Other SAP UI technologies like Web Dynpro are also covered © 2013 SAP AG. All rights reserved.

sap.commons.m Gold Reflection – only with sap.m High Contrast Black – only with sap. All rights reserved.viz Mobile Visual Identity (mobile devices only) – only with sap.ui.ui.ux3.table.ui.ui. sap.viz Blue Crystal Gold Reflection Demo-Link for Blue Cry stal Demo-Link for Gold Refl ection Use webkit browser ( switch to “Light Shell” such as Google Chrome under: Home > Options to view > Design ) © 2013 SAP AG.ux3.commons.Supported Themes Exercise 20 Themes currently shipped with UI5: • • • • Blue Crystal (mobile and desktop) – only with sap. sap. sap. sap. sap. Mobile Visual Identity High Contrast Black Demo-Link for Mobile Vis Demo-Link for High Cont ual Identity rast Black Use webkit browser such as Google Chrome to view 163 .table.ui.ui.

SAPUI5 Mobile
The “sap.m” library, available since SAPUI5 version 1.8

SAPUI5 Mobile
UI5 is intended to also run on tablets like iPad, but for a perfect user experience on
mobile, controls must be tailored to screen size, touch interaction and UI paradigms
A dedicated UI5 control library called “sap.m” has been created
 Contains 40 controls – number is growing
 Entirely optimized for smartphones and tablets
 Native-like visuals and interaction on Apple iOS and Android with the MVI Theme
(but using the black-and-golden SAP color scheme)
 Platform support:
iOS from build 5, Android from build 2.3, BlackBerry from build 10 (to be extended)
 MVI Theme only runs in webkit browsers like Google Chrome
 NEW: now also available for a unified design on desktops with touch screen
(Theme: Blue Crystal)

All core concepts of UI5 remain the same
 Data Binding, MVC, Theming, localization, control development model, …

© 2013 SAP AG. All rights reserved.


SAPUI5 Mobile Example Screens


“sap.m Explored” app (use Chrome browser!)
© 2013 SAP AG. All rights reserved.


fade.m.m. All rights reserved. flip)  Custom animations can be provided  Also takes care of setting up the screen to feel native-like (no zooming.Carousel control for swipe navigation between same-level pages sap.m.App control (and sap.List control with different ListItem types plays a central role for data display sap.m. slide.NavContainer) provides this navigation logic  Typically used as root control  sap.…) sap.makit Chart library as mobile-optimized alternative to CVOM charts © 2013 SAP AG.Page controls are added and navigated between  Animation can be chosen (show. 171 .Typical SAPUI5 Mobile Usage Typical Mobile application structure:  Pages between which the user can navigate  Navigation can imply drilldown semantics sap.m.

media (Event API for Screen width media queries) • sap.orientation (Orientation Change Event API – portrait or landscape) • sap.ui. 172 .os (information about the operating system of the device) • (information about detected capabilities of the used browser or device) Link to the Device Test Page with multiple detection features © 2013 SAP AG. Features that can be detected are: • sap.Device is the Device and Feature Detection API of the SAP UI5 Library.Device.ui.browser (information about the used browser) • sap. All rights reserved.ui.ui.Device API The sap.Device.Device.

sap.wdf.corp:8080/snippix/snippets/2378 © 2013 SAP AG.SAPUI5 Mobile Example Code Exercise 21 MVI Theme : Blue Crystal Theme : http://veui5infra. 173 .dhcp. All rights reserved.

Here is an example structure for a mobile application: <webapp_root_folder> • application.js • <css folder> … all CSS files go here (and potentially related images) o style. all file names shall start with an upper case letter • <img folder> … all image files go here (png. 176 . jpg. All rights reserved.css … plus potentially more stylesheets • <ext folder>… all reused third party java script goes here • <i18n folder> … all property files for localization go here o … • <model folder> • <util folder> .properties o i18n_en.js • index. gif. all helper classes go here • <view folder> .html More information about best Practice for Building Mobile Apps © 2013 SAP AG. …) • <someNamespace> … all on-the-fly controls defined within the application go here o <controlName>.properties o i18n_de. all view and view controller files go here..Best Practice for Mobile Applications When creating reasonably complex applications a clean architecture is key for efficient development and maintainability.

Extending SAPUI5 .

Inclusion of external JS libraries If UI5 doesn’t provide controls or behaviours that other JavaScript libraries offer.: • jQuery. an SVG-based graphical library to visualize data sets Other libraries need to be loaded separately. another library of interest is • Flot. a <canvas>-based jQuery plug-in for displaying data sets © 2013 SAP AG. these libraries can be included into the UI5 based pages Some JS libraries are already included in UI5 and used by UI5 runtime and can be used without additional loading. 178 .g. e. a Microsoft driven OData library which handles requests and takes care of creating and handling requests in JSON and XML format • D3. All rights reserved. jQuery UI • dataJS.

we take a look at an example using Flot  One can place the script tags for the library just behind the UI5 bootstrap script tag in the HTML <head> tag  the library can be downloaded and made part of the application project ►For pie chart support you need also the flot. All rights reserved.js plugin  You can see the pie chart example here © 2013 SAP AG.pie. 179 .Inclusion of external JS libraries To show how to load and use an external library.

HTML({ id: "pieContainer“.width: 500px\"></div>" }). // rendering pie chart { series: {  The HTML control provides an afterRendering event.Exercise 22 Inclusion of external JS libraries  Most libraries require a starting point or a placeholder // create the HTML control which will be a placeholder var oHTML = new sap.ui. 180 . All rights reserved. data.plot($("#pieContainer").core. //starts rendering when the placeholder is rendered  HTML control’s content is only rendered when the page is loaded or after an event handler is finished oHTML. //chart data array $. © 2013 SAP AG. which indicates when the HTML control is finished rendering pie: { show: true } } } }).  This HTML element can be provided by using the UI5 HTML control content: "<div id=pieContainer' style=\"height:500px.attachAfterRendering( function(oEvent){ var data = […].

Components .

185 . A UI5 component consists of a folder that has a name of the component and that at least contains two files: • • Component.Component Components can either inherit from their base classes or from other component in order to inherit and extend its functionality.core.js .ui. © 2013 SAP AG.the Component Controller that also includes the metadata for runtime component.UIComponent a Faceless Component does not (examples: data transfer helper) ► Base class for all Faceless Components: sap.Component descriptor that contains the metadata for design time There are two types of components: • • a UIComponent has a UI part (examples: custom button or a form) ► Base class for all UI Components: sap. All rights reserved.core.ui.Overview UI5 components are independent and reusable parts of the UI5 Application that may be developed by different development teams in different projects.json .

button. Define an new (UI)Component: Set the methods the component should have samples.declare("samples. All rights reserved.oButton = new"sap. 3. © 2013 SAP AG.Button").js 1.button. Set the metadata (properties.components.Creating a new Component – Component. 2.ui.ui. events of the new component) sap. { metadata : { properties : { text: "string" } }}).commons. }.Button("btn").oButton.require("sap.ui.UIComponent. return this.components. aggregations.components.createContent = function() { this.Component.UIComponent"). jQuery. 186 .extend("samples.Component ").commons.core.ui.button.Componen t".

0". "description": "Sample button components".json file is needed for design time environments so they know the specifics of the component. The file is not loaded during the runtime of an application and thus not needed there.components. "keywords": [ "button". "dependencies": { } } © 2013 SAP AG.Creating a new Component – component. 187 . All rights reserved. "version": "0.1.button". { "name": "samples. "example" ].json The component.

placeAt("content"). 188 . just like any other UI5 Component. All rights reserved.ui. settings: {text: "Hello World"} }). id: "Comp".core.components.getCore().corp:8080/snippix/snippets/69596 © 2013 SAP it can be used right away. var oComponent = sap.wdf. http://veui5infra.Using the new Component Exercise 23 Once the Component is defined as above. { component: oComponent }).button".ui. oCompCont. var oComponentCont = new sap.ComponentContainer("CompCont".createComponent({ name: "samples.dhcp.

CVOM Charts Library re-built for UI5 version 1.8 .

Demo Snippix Example for line chart 192 . All rights reserved.viz. CVOM API Reference © 2013 SAP AG.Overview The sap.ui5 charting library provides a set of flexible chart controls that allow to easily represent business data.

ui5.ui5.viz.ui5.Bubble sap.Pie sap.viz.Combinatio n sap.viz.ui5.viz.ui5.Scatter © 2013 SAP AG.Line sap.viz.Donut sap.viz.ui5.viz.Column sap.viz. All rights reserved.CVOM Chart Types / Part 1 Line Pie Donut Bar sap.ui5. 193 .ui5.Bar Column Combination Bubble Scatter sap.

ui5.viz.viz.ui5.viz.ui5.DualBar sap.viz.ui5. DualStackedColumn100 © 2013 SAP AG.viz.viz.viz.DualLine Dual Combination Dual Column Dual Stacked Column Dual Stacked Column (%) sap.ui5.ui5. All rights reserved. StackedColumn sap. DualCombination sap.CVOM Chart Types / Part 2 Exercise 24 Stacked Column Stacked Column (%) Dual Bar Dual Line sap. StackedColumn100 sap.ui5.ui5.viz. 194 . DualColumn sap. DualStackedColumn sap.

Optimizing UI5 Files .

but still requires the same number of requests as the uncached mode Modularization and Caching together form our development mode: you can modify a small file and – ideally – the browser has to reload only that module.Modularization in Development Mode If Modules are configured. All rights reserved. but also for our central installations. 198 . So whenever we update our central installation (usually several times a day). © 2013 SAP AG. We do not only use this internally for development. our server side component instructs the browser to use a ModifiedSince approach for detecting resource changes. the browser should detect changes and reload the files. This allows caching of the content.

All rights reserved. 199 .war. In the CtrlAlt-Shift-P Dialog you can toggle the debug mode. one can install sapui5-opt. “opt” additionally contains the non-minimized debug version of all The ‘opt’ version currently can be found in the Nexus repository only. line breaks and comments are removed from the source code. one can install sapui5-opt-light. During nightly build. These include minimized versions of our JavaScript files. we produce optimized versions of our © 2013 SAP AG.  sapui5-light.war. So instead of installing  sapui5. This considerably reduces the file size. it is not deployed to our central VMWare machines. the CSS files are not minimized.Minimized JavaScript Files Minimization means that unnecessary characters like whitespace.

831ms sap-ui-core-all.  only needed code is loaded  many requests sap-ui-core-all.js file for each used library. 1.54 MB.js: 99 requests. All rights reserved.06 MB.js) © 2013 SAP AG.js • loads library. sap-ui-core. but every module/control is only parsed when required (with sap-ui-core. 439ms 200 .js: 18 requests. 1. both advantages are combined: one request per library. including the code for all controls  less requests  bigger filesize. • loads control behaviour and rendering files when control is instantiated. all code is parsed In the „opt“ mode.Reducing the number of JavaScript files sap-ui-core.js • loads the complete library.

Please be aware.UI5 Download Configurator Tool The download tool creates merged js files with all desired modules.dhcp. that the above tool link creates the download configuration for the nightly build. You can mix such a merged file with the dynamic on-demand approach: load a big file with the most common modules and let UI5 load the others on http://veui5infra. 201 . All rights reserved.corp:8080/sapui5-internal/download/ © 2013 SAP AG.wdf. to load all used modules)  Press CTRL-ALT-SHIFT-P (UI5 Technical Info)  Expand the list of loaded modules. select and copy it  Start the merge tool  Paste your module list into the empty white text area on the right hand side  Download and Save the custom modules  Package the custom module into your application and load it in your page instead of the sap-ui-core. Usage:  Load your application page and navigate through it (.

our resource handler can be configured to use a different caching strategy (e. © 2013 SAP AG. The central UI5 installations are double-configuration installations.js to trigger this behavior. they use the development mode.g. When one doesn’t want to use the ModifiedSince requests. it is best practice to include some versionspecific into the requests URLs (cache buster). time-tolife).Configurable Caching With some configuration either in the web. When accessed via port 8080.xml or the server configuration. Our resource handler provides such a unique id and also provides a way to automatically convert a static URL request into a request with that ID.js instead of resources/sap-ui-core. but still wants the convenience of up-to-date checks. they use the caching-mode. but when accessed via port 8090. This avoids the ModifiedSince requests. Load resources/sap-ui-cachebuster/sap-ui-core. 202 . All rights reserved.

kunz@sap.Thank you! Andreas Kunz. AI Dev FIN – jo.meyer@sap.andreas. TIP Core UI .com Jörg .

All rights reserved. The information contained herein may be changed without prior All rights Nothing herein should be construed as constituting an additional warranty.epx#trademark for additional trademark information and notices. © 2013 SAP AG. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Please see http://www. National product specifications may vary. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services. without representation or warranty of any kind. 204 . These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only. and SAP Group shall not be liable for errors or omissions with respect to the materials. if any. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.© 2013 SAP AG.

Appendix A: Glossary Term Description ABAP Advanced Business Application Programming AJAX Asynchronous JavaScript and XML BSP Business Server Page CDN Content Delivery Network CSS Cascading Stylesheets DOM Document Object Model EDM Entity Data Model EDMX XML file that defines an Entity Data Model HTML Hypertext Markup Language I18N Internationalisation JSON JavaScript Object Notation © 2013 SAP AG. All rights reserved. 205 .

Appendix A: Glossary Term Description MVC Model-View-Controller NGAP Next Generation ABAP Platform OData Open Data Protocol RIA Rich Internet Application SDK Software Development Kit UI User Interface UX User Experience XHR XML-Http-Request XML Extensible Markup Language XSS Cross-Site-Scripting © 2013 SAP AG. All rights reserved. 206 .