Sapx05 en Col10 Show

"); }

Using an existing renderer: renderer: "sap.ui.commons.ButtonRenderer"

Control Renderer: Writing a Control Renderer Class

Ÿ Extract the implementation from the control to a separat rendering class: Method

Description

write()

Writes HTML output

writeControlData()

Writes ID and recognition data of control to HTML

renderControl()

Converts the specific control into HTML and adds the output to the HTML. This is used to render child components.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Control Definition: Basic Example

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Custom Controls: Example with Data Binding

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Demo 13: How to Create Custom Controls In this demo, we will show the steps to construct a custom control. (You will do your own custom control in a later exercise.) 1. Use sap.ui.core.Control.extend() to define the new control. 2. Add a metadata section to define the properties that will be in the new control. 3. Add an init method to create a div where our new control can be placed. 4. Add a renderer method to display the new content. 5. Add an onAfterRendering method to initialize the data for the control after it is rendered. 6. Add new control to view. Test.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Summary

You should now able to: Ÿ Create Custom Controls

© 2016 SAP SE or an SAP affiliate company. All rights reserved

SAPX05 SAP SAPUI5 User Experience Development

SAPUI5 Overview

SAPUI5 Development Options

SAPUI5 Project Basics

SAPUI5 Controls © 2015 SAP SE or an SAP affiliate company. All rights reserved

60 minutes

130 minutes

SAPUI5 Application Debugging

90 minutes

Layouts and Custom Controls

120 minutes

Data Handling

280 minutes

Additional SAPUI5 Development Features

180 minutes

SAPUI5 Branding

50 minutes

90 minutes

90 minutes

Unit 7: Data Handling

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Scenario

As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. One essential part of the user experience with SAPUI5 is the handling of data, displayed in various screens. This unit informs about the possibilities of handling data with SAPUI5.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 1: Exploring Model Types

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Explore the model types JSON, XML and OData

© 2015 SAP SE or an SAP affiliate company. All rights reserved

SAPUI5 Model Types The following model types are supported in binding data to controls:

XML model

JSON model Ÿ Supports data in a JavaScript Object Notation format Ÿ Client-Side Model Ÿ Supports two-way binding

Ÿ Supports XML data Ÿ Client-Side Model Ÿ Supports two-way binding

OData model Ÿ Supports OData compliant data Ÿ Server-Side Model Ÿ Creates OData requests and handles responses Ÿ Includes the open source library dataJS to handle OData requests and data Ÿ Experimental two-way binding

Ÿ Additionally, the ResourceModel helps binding translated texts Ÿ Applications can create their own Model implementations © 2015 SAP SE or an SAP affiliate company. All rights reserved

JSON Data Overview

What is JavaScript Object Notation? Ÿ Text-based open-standard designed for human-readable data interchange Ÿ Derived from the JavaScript language for representing simple data structures and associative arrays, called objects Ÿ Despite its relationship to JavaScript, it is language-independent, with parsers available for many languages Ÿ “:” Used to separate key:value Ÿ “{}” Used to enclose grouped properties which are separated by “,” Ÿ “[]” Used to enclose arrays of grouped properties which are separated by “,”

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Ÿ OData supports the JSON format to make consuming OData services from JavaScript applications simple since JSON can be easily be turned into JavaScript objects for programmatic manipulation

XML Data Overview

What is Extensible Markup Language? Ÿ Text-based open-standard designed for human-readable data interchange Ÿ Defined by the W3C’s XML 1.0 and other related specifications. Ÿ When data is encoded in XML, the result is typically larger than an equivalent encoding in JSON, mainly because of XML's closing tags. Ÿ There are alternative ways to encode the same information because some values can be represented both as child nodes and attributes. Ÿ Data is represented between and where tag is any value. Tags can be embedded and repeated to create groups and arrays. © 2015 SAP SE or an SAP affiliate company. All rights reserved

Also Possible:

OData Overview

Ÿ Based on HTTP, Atom Pub format and JSON Ÿ Enables provisioning of data services based on REST principles Ÿ Released under an “open specification promise” by Microsoft Ÿ Defines data queries using URLs constructed with specific rules Ÿ Defines data formats representing resources like collections, entries, etc. in either Atom or JSON format Ÿ Server-side interactions only for sorting, filtering, paging, etc. of the data. (* except with offline OData from SAP Mobility Platform).

OData URL structure: http://services.odata.org/OData/OData.svc/Category(1)/Products?$top=2 Service Root URI

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Resource path

Query options

OData – 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.odata.org/V3/OData/OData.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, types, properties and relationships exposed by the OData service:

http://services.odata.org/V3/OData/OData.svc/$metadata Ÿ Alternatively, this experimental API Explorer by the OData Service can be used: http://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.html

© 2015 SAP SE or an SAP affiliate company. All rights reserved

OData – System Query Options

When accessing an OData service, you can supply some system query options to influence the returned entries:

Parameter Description

Example

$orderby

Orders entries by the entity supplied

/Products?$orderby=Rating,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 and presented inline

/Categories?$expand=Products

$format

defines the format that the server must return

/Products?$format=json

$select

returns the subset of the specified properties

/Products?$select=Price,Name

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Creating a Model Instance

To use data binding in a SAPUI5 applications you will need to instantiate the appropriate model first. The constructor takes the URL of the model data or the data itself as the first parameter. JSON-Model:

XML-Model:

OData-Model:

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Model Assignment

Ÿ After the model has been created you can assign the model to the Core or specific controls with the setModel method Ÿ The relevant model for a control is the one which is nearest to it on the path up to the root. ‒ If there is no model in the root path found the one attached to the Core becomes the relevant model ‒ When using multiple SAPUI5 components, you must specify whether the Core model is propagated to any new component.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Summary

You should now able to: Ÿ Explore the model types JSON, XML and OData

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 2: Performing Binding Operations

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Perform Data Binding

© 2016 SAP SE or an SAP affiliate company. All rights reserved

UI5 Data Binding Ÿ In UI5, DATA BINDING is used to bind UI5 controls to a data source that holds the application data, so that the controls are updated automatically whenever the application data is changed.

Ÿ With TWO-WAY-BINDING the application data is updated whenever the value of a bound control changes, e.g. through user input.

application data

UI5 Control / Output

application data

John Doe

John Doe, 35

John Doe

John Doe

John Doe, 35

Age: 35

Age: 35 application data has been updated

UI5 Control / Output

Resulting UI5 Control / Output

Resulting application data

John Doe, 36

John Doe

Age: 36

UI5 Control / Output has been updated

John Doe, 36

Age: 36

Ÿ Data binding supports binding of simple controls like Text and list type controls like Table. Ÿ See the complete documentation on how data binding works and how to implement it in an application. © 2016 SAP SE or an SAP affiliate company. All rights reserved

Demo 14: How to Explore JSON In this demo, we will show how to create a JSON data model and bind it to UI controls. 1. Create a JSON string and fill it with the needed data. 2. Create a sap.ui.model.json.JSONModel(data); and initialize it with the JSON string. 3. In the XML view, bind the values from the model to the needed fields using the format {/property} Test.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Exercise 11: Explore JSON

15 minutes

Watch

Try

Self-Test

Print

© 2015 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will create a simple JSON model and bind the model to the fields we have displayed on the screen in previous exercises.

Summary

You should now able to: Ÿ Perform Data Binding

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 3: Performing Property Binding Operations

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Perform Property Binding

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Property Binding in an XML View

Assume the model shown on the right: Ÿ Use curly braces {} to surround the desired key. Ÿ If the key is an independent node, add a forward slash “/” in front of it. Ÿ Optionally set with the path property as: "{ path:'/node' }" where node is the desired key. Ÿ Using path is necessary if you need to set multiple/nested properties to an aggregation at the same time. Ÿ We bound the aggregation items to the collection node data. We omit the / when binding the dependent key and text values. © 2016 SAP SE or an SAP affiliate company. All rights reserved

Property Binding in JavaScript Ÿ Most of the properties of a control can be bound to model properties Ÿ There are two ways to bind properties to the model, in the constructor with curly braces or using the bindProperty method bindProperty method: • oControl.bindProperty("controlProperty", "modelProperty");

curly braces syntax: var oControl = new sap.m.Input({ controlProperty: "{modelProperty}" });

(alternatively) by path: var oControl = new sap.m.Input({ controlProperty: { path: "modelProperty" } }); © 2016 SAP SE or an SAP affiliate company. All rights reserved

JavaScript Binding Example for Simple Control

© 2016 SAP SE or an SAP affiliate company. All rights reserved

About Binding Paths

Ÿ Absolute binding paths within this model:

{ company: { name: "ACME", info: { employees: 3 }, contacts: [ { name: "Barbara", phone: "873" },{ name: "Gerry", phone: "734" } ] } } © 2016 SAP SE or an SAP affiliate company. All rights reserved

/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

Summary

You should now able to: Ÿ Perform Property Binding

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 4: Performing Advanced Binding Techniques

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Perform Advanced Binding Techniques

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Aggregation Binding Ÿ Aggregation binding is used to bind a collection of values, like binding multiple rows to a table. When binding to an aggregation, you will have to use a control that leverages a template. Aggregation

Data Collection Template

In JavaScript:

Ÿ The aggregation binding can also be defined using the bindAggregation method of a control.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Example of Aggregation Binding

The collection teamMembers is bound to the aggregation rows. The firstName and lastName properties can then be bound to the template for the Column. © 2016 SAP SE or an SAP affiliate company. All rights reserved

Multiple / 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. When binding at the collection or property level, add the model name followed by the “>” then the property / collection name.

JavaScript Examples:

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Extended Data Binding Syntax

Ÿ Instead of only using the token name of a model property, can also use the extended data binding syntax ‒ This enables you to use formatters and the type system for property binding and templates, filter and sorters for aggregation binding

Ÿ To use the extended syntax, you supply an object literal for the bound property/aggregation. Extended property binding:

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Extended aggregation binding:

Demo 15: How to Perform Aggregation Binding In this demonstration, we will show how to bind an aggregation of names to a ComboBox dropdown list. 1. Create/Fetch the data for the list and assign it into a model. 2. Bind the model to the ComboBox’s items. 3. Test the result.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 12: Perform Aggregation Binding

15 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will create a dropdown list of options for the first name field that you have created previously for your application.

Demo 16: How to Bind Data with AJAX In this demo, we will show how to obtain data from an external source and bind that data to a table. 1. Create an empty model. 2. Specify the service to be used to populate the model (along with any needed user-entered data) 3. Create controls for displaying the data, including a custom control. 4. Bind the fields from the model to the controls. 5. Create a routine to trigger the service to populate the model after the needed data is entered. Test.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 13: Use AJAX to bind Data

20 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will be starting with a provided template focused on using the SAPUI5 desktop libraries. You will expand this template to use an AJAX based service to search for and return a list of songs from Apple. Finally, you will create a custom SAPUI5 control to play a few seconds of a given song.

Master-Detail Interfaces Ÿ A master-detail relationship is a 1:n type relationship Ÿ Examples of a masterdetail 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 © 2016 SAP SE or an SAP affiliate company. All rights reserved

Example of Master-Detail Interaction

An entry selected in the Clients table will update the screen to show the address information and orders for that client. To accomplish this: Ÿ Listen for the event rowSelectionChange on Clients. Ÿ When the event is fired, adjust the binding for the address. Ÿ For the orders, we can filter the data being displayed. (More details on filtering in the a later section.) © 2016 SAP SE or an SAP affiliate company. All rights reserved

Select Master-Detail Coding

From the rowSelectionChange event on Clients, we get the rowContext and the id of the selected client. To bind the correct address to the controls, we use JQuery loop through the addresses until we find the one that matches our client. Then we bind that address to the container control that holds all the address data controls. For the Orders table, we filter the binding to show only the orders that match the selected client id.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Demo 17: How to use Explore_MasterDetailView In this demo, we will show controls that have Master and Detail data relationships and explain the steps necessary to bind the data. 1. Fetch/Create the related data and assign it to a model. 2. Create controls for the master and detail levels. 3. Bind initial data to the controls 4. On change of data at the master, update the detail controls with the appropriate data. Test.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Summary

You should now able to: Ÿ Perform Advanced Binding Techniques

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 5: Performing OData Query Options

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Perform OData Query Options

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Adding OData Query Options in an XML View

SAPUI5 handles most of the URL parameters for OData services automatically. You do have the ability to add query via declaration in an XML view as follows:

When the OData model is loaded from the associated service: 1. The rows of the Table will be bound to the Employees collection. 2. The load will also fetch the Orders that are linked to the Employees. 3. Only the Employees fields EmployeeID, FirstName, and LastName will be retrieved along with only the OrderID for the related orders. (Limiting the data retrieved is important for limiting network load and performance of the client.) © 2016 SAP SE or an SAP affiliate company. All rights reserved

Adding OData Query Options in JavaScript

In JavaScript, you have the option to manually add query options to the Odata call either by adding them to the service URL or passing a map of parameters when using bindElement or bindAggregation. Expand Parameter:

Select Parameter:

oControl.bindElement( "/Category(1)", { expand: "Products" } );

oControl.bindElement( "/Category(1)", { expand: "Products", select: "Name,ID,Products" });

oTable.bindRows({ path: "/Products", parameters: { expand: "Category" } });

© 2016 SAP SE or an SAP affiliate company. All rights reserved

oTable.bindRows({ path: "/Products", parameters: { select: "Name,Category" } });

Demo 18: How to use OData In this demo, we will show how to use an oData service via the Hana Cloud Platform and display that data in a table. 1. Create a new destination in HCP. 2. Configure the project to use the destination. 3. Create an empty model 4. Specify the service to be used to populate the model and when it should be triggered. 5. Create and bind controls for displaying the data. Test.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 14: Use OData

25 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will create an HCP destination that is used to access an OData service and then display the data in a Table.

Summary

You should now able to: Ÿ Perform OData Query Options

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 6: Performing Common Data Operations: Format

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Perform Common Data Operations: Format

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Formatting Data

Ÿ For properties you can supply a formatter function which will be called with the value of the model property. Ÿ The return value of the formatter function is used as the value of the bound control: In XML View:

In JavaScript:

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Type System and Formatting Data

Ÿ Data binding supports the definition of types which can be handed over when binding properties ‒ Bound properties with a defined type will automatically be formatted when displayed in the UI, input values in UI controls are parsed and converted back to the defined type in the model. Ÿ 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. ‒ constraints (optional): Constraints define how an input value entered in the UI should look. When parsing the value will be validated against these constraints.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Date Type Formatting Example

In XML View:

In JavaScript:

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Custom Type Example

Suppose we wanted a type that would format 10-digit telephone numbers as: “(123) 456-7890” where the original data is 1234567890

Original Model Data

Displayed Result

With a custom type, it is also possible to make changes as the data is parsed and to validate user input values. (More on that later.) © 2015 SAP SE or an SAP affiliate company. All rights reserved

Demo 19: How to Format Data In this demo, we will show how to create a custom formatter and to apply it to an input field. 1. Create the formatter routine. 2. Listen for the event when the input field to be formatted changes. 3. Trigger the formatter when the field has changed. 4. Update the model with the input value after it has been formatted. Test. 5. For non-input fields, attach the formatter directly to the control displaying the data.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Exercise 15: Format Data

20 minutes

Watch

Try

Self-Test

Print

© 2015 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will create a custom formatter that will format the data in a field of your application.

Demo 20: How to work with Date Types In this demo, we will show how to specifically type a date field and then leverage specialized formatting options for that type. 1. Add a date into the model. 2. Add the type specifier to the text definition of the displaying control. 3. Add the formatting options to be leveraged when displaying the screen. 4. Test

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Exercise 16: Work with Date Types

15 minutes

Watch

Try

Self-Test

Print

© 2015 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will format a date and display it in your application.

Summary

You should now able to: Ÿ Perform Common Data Operations: Format

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Lesson 7: Performing Common Data Operations: Sort and Filter

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Perform Common Data Operations: Sort and Filter

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Sorters and Filters on Controls

When using aggregation binding, you can provide initial sorters and filters:

sap.ui.model.Sorter

sap.ui.model.Filter

Ÿ path – The binding path used for the sorting.

Ÿ path – The binding path used for the filtering.

Ÿ descending – Boolean. False for ascending sort, true for descending sort.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Ÿ operator – Full options from sap.ui.model.FilterOperator. Partial list: BT – Between Contains EQ - Equals StartsWith …

Sorters and Filters with JavaScript

Ÿ An example in JavaScript:

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Demo 21: How to Sort and Filter Data In this demo, we will show how to sort and filter the data that makes up the dropdown in our ComboBox. 1. Retrieve the items binding of our ComboBox. 2. Create a new instance of a sorter with the desired values. 3. Attach the sorter to the items binding. 4. Create a new instance of a filter with the desired values. 5. Attach the filter to the items binding.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 17: Sort and Filter Data

15 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will sort and filter the data in the First Name ComboBox from a previous exercise. You will accomplish this both in the JavaScript controller as well as declaratively in the XML view.

Summary

You should now able to: Ÿ Perform Common Data Operations: Sort and Filter

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Exploring Model Types

Performing OData Query Options

Performing Binding Operations

Performing Common Data Operations: Format

Performing Property Binding Operations

Performing Common Data Operations: Sort and Filter

Performing Advanced Binding Techniques

Performing Common Data Operations: Calculated Fields and Data Validation

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Lesson 8: Performing Common Data Operations: Calculated Fields and Data Validation © 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Performing Common Data Operations: Calculated Fields and Data Validation

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Calculated Data Ÿ Calculated Fields allow the binding of multiple properties in different models to a single property of a control. ‒ E.g. value property of text field may be bound to a property firstName and a property lastName in a model. Ÿ Applications can access these values in a formatter function and decide how they will be processed or combined together: Property Declaration:

Formatter Function:

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Calculated Fields – Extended Syntax

Ÿ The extended syntax for calculated fields can be used in declarative views such as XML and HTML views Ÿ Because it is still experimental, it needs to be switched on via the configuration flag xx-bindingSyntax="complex" within the bootstrap This is added automatically in the SAPUI5 Application template of the Web IDE

Ÿ Now you can mix the text and calculated fields:

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Example of Calculated Fields

In the XML View, we specify the various needed parts for the calculated field and the formatter that will generate the resulting text. Since our formatter is in it’s own special class, we need to use require in the controller to have it available. In the generateDescription formatter, we can use all the parts that were sent to us to calculate a result.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Data Validation

Ÿ To catch invalid user input, you can register the following handlers to the SAPUI5 Core. ‒ attachFormatError ‒ attachParseError ‒ attachValidationError ‒ attachValidationSuccess Ÿ Example:

© 2016 SAP SE or an SAP affiliate company. All rights reserved

When this exception is thrown, the function will be triggered.

Data Validation – Full Custom Type Example

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Demo 22: How to work with Calculated Fields In this demo, we will show how to create a calculated field that takes multiple inputs. 1. Create a custom formatter routine taking with the appropriate arguments. 2. Add a control to display the calculated field. 3. Adjust the XML view to pass the desired input to the custom formatter. 4. Save and test.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 18: Work with Calculated Fields

15 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will use a calculated field to generate a single description from multiple values available from the model.

Summary

You should now able to: Ÿ Performing Common Data Operations: Calculated Fields and Data Validation

© 2016 SAP SE or an SAP affiliate company. All rights reserved

SAPX05 SAP SAPUI5 User Experience Development 60 minutes

SAPUI5 Overview

SAPUI5 Development Options

130 minutes

SAPUI5 Application Debugging

90 minutes

Layouts and Custom Controls

120 minutes

Data Handling

280 minutes

Additional SAPUI5 Development Features

180 minutes

SAPUI5 Branding

50 minutes

90 minutes

SAPUI5 Project Basics

90 minutes

SAPUI5 Controls © 2015 SAP SE or an SAP affiliate company. All rights reserved

Unit 8: Additional SAPUI5 Development Features

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Scenario

As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Working with Resources

Working with Charts

Building Apps Using Modularization

Using Third-party Libraries

Performing Application Localization

Optimizing SAPUI5 Apps

Working with Components

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 1: Working with Resources

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Work with Resources

© 2015 SAP SE or an SAP affiliate company. All rights reserved

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, Java, ABAP …), independent of the server side technology.

Ÿ

Server-side Mechanisms Ÿ SAPUI5 provides a Resource Handler for the Java server and the integration into the Cloud, SAP Web IDE, and Eclipse, aligned with the concept of the JavaServer Faces Resource Handler, also supports 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.

Both parts are not dependent on each other. Furthermore they are complementary.

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Summary

You should now able to: Ÿ Work with Resources

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Working with Resources

Working with Charts

Building Apps Using Modularization

Using Third-party Libraries

Performing Application Localization

Optimizing SAPUI5 Apps

Working with Components

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 2: Building Apps Using Modularization

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Build Apps Using Modularization

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Modularization with Require Ÿ The UI5 framework has built in support for modularizing larger JavaScript applications. ‒ Instead of defining (and loading) one large chunk of JavaScript code, an application can be split into smaller parts, which then can be loaded at runtime when they are needed. These smaller, individual units are called Modules in UI5. ‒ To load a module, the function jQuery.sap.require may be used. ‒ In a module name all “.” are replaced by “/” and an “.js” extension is added to create a path. So sap.m.MessageBox will become sap/m/MessageBox.js

Ÿ This is an example: <script> jQuery.sap.require("sap.m.MessageBox"); function onPressButton() { sap.m.MessageBox.alert("Hello World!"); } © 2016 SAP SE or an SAP affiliate company. All rights reserved

Modularization with Declare In order to create your own JavaScript Module you need to “declare” the module: ‒ A file becomes a module by calling the jQuery.sap.declare function. This tells the UI5 runtime about the name of the module. UI5 runtime keeps track which modules are already loaded. ‒ If a module is required (jQuery.sap.require) and it hasn’t been loaded before, it is loaded automatically. While it is carried out, it calls the declare method, 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 not, creates it. // declaration of the module. Will ensure that the namespace 'my.useful' exists. jQuery.sap.declare("my.useful.SampleModule"); // list of dependencies of this module jQuery.sap.require("sap.ui.core.Core"); jQuery.sap.require("some.other.Module"); jQuery.sap.require("you.can.Also", "list.multiple.Modules", "if.you.Want"); // create the 'main' object of the module my.useful.SampleModule = {}; © 2016 SAP SE or an SAP affiliate company. All rights reserved

registerModulePath Function

Ÿ UI5 by default will try to load any required modules from its resource root URL, namely from the centrally deployed web application. This would fail for the modules contained in your web application. Ÿ Mixed location scenarios are supported with jQuery.sap.registerModulePath

Ÿ Example of using registerModulePath:

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Streamlined Modularization with sap.ui.define

•

Usage is one top-level call in one JavaScript resource (file).

•

If module name is omitted, name will be determined by location in project and the JavaScript file name.

•

Designed to support Asynchronous Module Definitions (AMD) – although currently internally still using the old UI5 synchronous load behavior.

•

In our exercises, this is used for all JS files – controllers, formatters, components

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Empty Controller Example webapp/controller/View1.controller.js

•

Best Practice: Don’t global references as module values (or the 4th parameter)

Add module dependency with sap.ui.require

Synchronous Retrieval of Single Module Value Example:

Asynchronous Loading of Multiple Modules Example: (Return in this case is undefined*)

* Experimental API – Not all aspects of sap.ui.require are settled yet.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Summary

You should now able to: Ÿ Build Apps Using Modularization

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Working with Resources

Working with Charts

Building Apps Using Modularization

Using Third-party Libraries

Performing Application Localization

Optimizing SAPUI5 Apps

Working with Components

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 2: Performing Application Localization

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Perform Application Localization

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Localization with Resource Bundles

Ÿ UI5 has a built-in localization concept, which is aligned to the ResourceBundle concept in Java. ‒ You can get the URL for a resource with this: var sUrl = sap.ui.resource("sap.ui.table","messagebundle.properties");

Ÿ Get the resource bundle for a given language (if no locale is given, English is loaded by default): jQuery.sap.require("jquery.sap.resources"); var oBundle = jQuery.sap.resources({url : sUrl, locale: sLocale});

Ÿ And then access the texts in the resource bundle: var sText = oBundle.getText(sKey);

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Localization with Resource Model Ÿ With the ResourceModel, there is a wrapper for resource bundles that exposes the localized texts as a model for data binding. Ÿ A ResourceModel can be instantiated with a bundleName or a bundleUrl which points to a resource bundle. When using the bundle name the file must have the .properties suffix. var oModel = new sap.ui.model.resource.ResourceModel({ bundleUrl: "myBundle.properties", // will use myBundle_en.properties bundleLocale: "en" // optional, default is current language, so better omit it }); // attach the resource model with the symbolic name "i18n"

sap.ui.getCore().setModel(oModel, "i18n"); // Use the model in an XML View or JavaScript

var oControl = new sap.m.Button({ id : "myButton", text : "{i18n>MyButtonText}"}); © 2016 SAP SE or an SAP affiliate company. All rights reserved

// this points to a named model

Demo 23: How to perform Application Localization In this demo, we will show how to incorporate localization into our existing application. 1. Create appropriate properties files. 2. Add key=value entries to the main properties file and the translation files. 3. Create a resource model based on the properties file. 4. Replace hard-coded texts with bound values from the resource model. 5. Test.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 19: Perform Application Localization

20 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will localize selected fields from your application. You will also test your application in multiple languages.

Summary

You should now able to: Ÿ Perform Application Localization

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Working with Resources

Working with Charts

Building Apps Using Modularization

Using Third-party Libraries

Performing Application Localization

Optimizing SAPUI5 Apps

Working with Components

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 4: Working with Components

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Work with Components

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Components Overview

Ÿ UI5 components are independent and reusable parts of the UI5 Application that may be developed by different development teams in different projects. Ÿ A UI5 component consists of a folder that has a name of the component with the following files: ‒ Component.js – the Component Controller that also includes the metadata for runtime ‒ manifest.json – Component descriptor that contains the metadata for design time (optional)

Ÿ 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.ui.core.UIComponent ‒ a Faceless Component does not (examples: data transfer helper)

§ Base class for all Faceless Components: sap.ui.core.Component

Ÿ Components can either inherit from their base classes or from other component in order to inherit and extend its functionality.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Component Creation: Component.js

1. Define an new (UI)Component: jQuery.sap.require("sap.ui.core.UIComponent"); jQuery.sap.require("sap.m.Button"); jQuery.sap.declare("sap.sapx05.components.button.Component");

2. Set the metadata (properties, aggregations, events of the new component): sap.ui.core.UIComponent.extend("sap.sapx05.components.button.Component", { metadata : { properties : { text: "string" } }});

3. Set the methods the component should have: sap.sapx05.components.button.Component.prototype.createContent = function(){ this.oButton = new sap.m.Button("btn"); return this.oButton; }; © 2016 SAP SE or an SAP affiliate company. All rights reserved

Component Creation: manifest.json

Ÿ The manifest.json file is not necessary, but it can be used and leveraged by designtime tools. The Template we use for the exercises leverages this file. Ÿ The file is not loaded during the runtime of an application and thus not needed there. { "name": "sap.sapx05.components.button", "version": "0.1.0", "description": "Button component", "keywords": [ "button", "example" ], "dependencies": { } }

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Component Use

Ÿ Once the Component is defined as above, it can be used right away, just like any other UI5 Component. In an XML View:

In JavaScript: var oComponent = sap.ui.getCore().createComponent({ name: "sap.sapx05.components.button", id: "Comp", settings: {text: "Hello World"} }); var oComponentCont = new sap.ui.core.ComponentContainer("CompCont", { component: oComponent }); oCompCont.placeAt("content"); © 2016 SAP SE or an SAP affiliate company. All rights reserved

Demo 24: How to create an Application Utilizing a Component In this demo, we will show how to create a reusable component and use that component inside of an application. 1. Create a Component.js file at the root of the new component. 2. Use sap.ui.core.UIComponent.extend() to define the component. 3. Define how the component will be created. 4. Define any needed component overrides. 5. Add the component into our existing view. 6. Save and Test.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 20: Create an Application Utilizing a Component

25 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will create a simple button component and add it to your application. Then you can turn your full application into a component.

Summary

You should now able to: Ÿ Work with Components

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Working with Resources

Working with Charts

Building Apps Using Modularization

Using Third-party Libraries

Performing Application Localization

Optimizing SAPUI5 Apps

Working with Components

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 5: Working with Charts

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Work with Charts

© 2016 SAP SE or an SAP affiliate company. All rights reserved

sap.viz Library

Ÿ The sap.viz.ui5 charting library provides a set of flexible chart controls that allow to easily represent business data.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Chart Types

Line

Pie

Donut

Bar

sap.viz.ui5.Line

sap.viz.ui5.Pie

sap.viz.ui5.Donut

sap.viz.ui5.Bar

Column

Combination

Bubble

Scatter

sap.viz.ui5.Column

sap.viz.ui5.Combination

sap.viz.ui5.Bubble

sap.viz.ui5.Scatter

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Additional Chart Types

Stacked Column

Stacked Column (%)

Dual Bar

Dual Line

sap.viz.ui5. StackedColumn

sap.viz.ui5. StackedColumn100

sap.viz.ui5.DualBar

sap.viz.ui5.DualLine

Dual Combination

Dual Column

Dual Stacked Column

Dual Stacked Column (%)

sap.viz.ui5. DualCombination

sap.viz.ui5. DualColumn

sap.viz.ui5. DualStackedColumn

sap.viz.ui5. DualStackedColumn100

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Demo 25: How to use Charts In this demo, we will show how the sap.viz library can be used to create charts. 1.

Decide on the type of chart that is appropriate.

2.

Bind the data to the chart.

3.

Create a FlattenedDataset to bind the data to the chart.

4.

For a Donut Chart, add the dimensions and measures aggregations.

5.

Test on Large and Medium screens.

6.

Notice differences on based on desktop or mobile.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 21: Use Charts

20 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will add a sap.viz chart to your application.

Summary

You should now able to: Ÿ Work with Charts

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Working with Resources

Working with Charts

Building Apps Using Modularization

Using Third-party Libraries

Performing Application Localization

Optimizing SAPUI5 Apps

Working with Components

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 6: Using Third-party Libraries

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Use Third-party Libraries

© 2016 SAP SE or an SAP affiliate company. All rights reserved

External JavaScript Library Usage Ÿ If UI5 doesn’t provide controls or behaviours that other JavaScript libraries offer, 3rd party libraries can added into UI5 based pages Ÿ Some JS libraries are already included in UI5 and used by UI5 runtime and can be used without additional loading, e.g.: ‒ jQuery, jQuery UI ‒ dataJS, a Microsoft driven oData library which handles requests and takes care of creating and handling requests in JSON and XML format ‒ D3, an SVG-based graphical library to visualize data sets (used in sap.viz)

Ÿ Other libraries need to be loaded separately, another library of interest is ‒ Flot, a -based jQuery plug-in for displaying data sets © 2016 SAP SE or an SAP affiliate company. All rights reserved

External JavaScript Library Usage – Flot

Ÿ To show how to load and use an external library, 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 tag.

‒ The library can be downloaded and made part of the application project: ► For pie chart support you need also the flot.pie.js plugin

© 2016 SAP SE or an SAP affiliate company. All rights reserved

External JavaScript Library Usage // create the HTML control which will be a placeholder var oHTML = new sap.ui.core.HTML({

Ÿ Most libraries require a starting point or a placeholder

id: "pieContainer“, content: "

Ÿ This HTML element can be provided by using the UI5 HTML control

style=\"height:500px;width: 500px\">

" }); //starts rendering when the placeholder is rendered oHTML.attachAfterRendering(

Ÿ HTML control’s content is only rendered when the page is loaded or after an event handler is finished

function(oEvent){ var data = […]; //chart data array $.plot($("#pieContainer"), data, // rendering pie chart { series: {

Ÿ The HTML control provides an afterRendering event, which indicates when the HTML control is finished rendering

pie: { show: true } } } });

XML: © 2016 SAP SE or an SAP affiliate company. All rights reserved

Demo 26: How to Add Chart Capabilities via 3rd Party Library In this demo, we will leverage a 3rd Party Library (Flot) to plot a segmented bar graph. 1.

Add a new destination to access the Flot Libraries.

2.

Configure the project to use the new destination.

3.

Add the script tags with the location of the Flot Libraries.

4.

Add the style setting for the chart.

5.

Add the div to attach the chart.

6.

onAfterRendering set up the data and plot the chart.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Exercise 22: Add Chart Capabilities via 3rd Party Libraries

20 minutes

Watch

Try

Self-Test

Print

© 2016 SAP SE or an SAP affiliate company. All rights reserved

In this exercise, you will use the 3rd party JavaScript library Flot to add a simple stacked bar chart to your application.

Summary

You should now able to: Ÿ Use Third-party Libraries

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Working with Resources

Working with Charts

Building Apps Using Modularization

Using Third-party Libraries

Performing Application Localization

Optimizing SAPUI5 Apps

Working with Components

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Lesson 7: Optimizing SAPUI5 Apps

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Optimize SAPUI5 Apps

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Modularization

• UI5 has a built-in Modularization concept that allows to split larger JavaScript development into so called modules. ‒ Modules are loaded synchronously (although working toward asynchronous capabilities with sap.ui.define / sap.ui.require)

• If configured, our server side component instructs the browser to use a ModifiedSince approach for detecting resource changes. ‒ This allows caching of the content, 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 ‒ We not only use this internally for development, but also for our central installations. ‒ So whenever we update our central installation (usually several times a day), the browser should detect changes and reload the files.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

JavaScript File Reduction sap-ui-core.js Ÿ loads library.js file for each used library. Ÿ loads control behavior and rendering files when control is instantiated. $only %

needed code is loaded

many requests

sap-ui-core-all.js

sap-ui-core.js: 99 requests, 1,06 MB, 831ms

Ÿ loads the complete library, including the code for all controls $less %

requests

bigger file size, all code is parsed

Ÿ In the ”opt“ mode, both advantages are combined: one request per library, but every module/control is only parsed when required (with sap-ui-core.js) © 2016 SAP SE or an SAP affiliate company. All rights reserved

sap-ui-core-all.js: 18 requests, 1,54 MB, 439ms

Request Reduction via Component-preload.js You may have noticed that, when first running our component based exercise, it had a failed call to Component-preload.js (in red) before it went ahead and loaded each of our application files separately (in blue). You may have also thought, if this was a big application, that would be a lot of requests for each of the files. The idea behind Component-preload.js is that it contains all of the other XML and JS custom files needed for our application and can be loaded in one request. Component-preload.js could be further optimized by reducing the payload of the JavaScript and XML by removing line breaks, whitespace, or even shortening variable names. © 2016 SAP SE or an SAP affiliate company. All rights reserved

Currently, the Web IDE doesn’t do this automatically – but there is an open source tool available using Grunt.

Component-preload.js

Grunt is a task-runner based on node.js that is used to automate the process of creating the Component-preload.js file. SAP has provided an open source Grunt plugin for SAPUI5/OpenUI5 available at: https://github.com/SAP/grunt-openui5 Details are available on the site, but basically you have to: Ÿ Create a configuration file using openui5_preload. Ÿ Have it execute against locally available files. For Web IDE, you can clone the Git repository to have the files available for the generation. Ÿ This capability may eventually become a feature of the Web IDE.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Caching

Ÿ

With some configuration either in the web.xml or the server configuration, our resource handler can be configured to use a different caching strategy (e.g. timeto-life). Ÿ This avoids the ModifiedSince requests.

Ÿ

The central UI5 installations are double-configuration installations. Ÿ When accessed via port 8080, they use the development mode, but when accessed via port 8090, they use the caching-mode.

Ÿ

When one doesn’t want to use the ModifiedSince requests, but still wants the convenience of up-to-date checks, it is best practice to include some versionspecific into the requests URLs (cache buster). Ÿ 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.

Ÿ

Load resources/sap-ui-cachebuster/sap-ui-core.js instead of resources/sap-ui-core.js to trigger this behavior.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Summary

You should now able to: Ÿ Optimize SAPUI5 Apps

© 2016 SAP SE or an SAP affiliate company. All rights reserved

SAPX05 SAP SAPUI5 User Experience Development

SAPUI5 Overview

SAPUI5 Development Options

SAPUI5 Project Basics

SAPUI5 Controls © 2016 SAP SE or an SAP affiliate company. All rights reserved

60 minutes

130 minutes

SAPUI5 Application Debugging

90 minutes

Layouts and Custom Controls

120 minutes

Data Handling

280 minutes

Additional SAPUI5 Development Features

180 minutes

SAPUI5 Branding

50 minutes

90 minutes

90 minutes

Unit 9: SAPUI5 Branding

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Scenario

As a Business Process owner you are requested to permanently improve the user experience in your area of responsibility. Creating user interfaces is a critical aspect in the user experience. In this training, you will learn how to develop SAPUI5 user interfaces to induce a great user experience.

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Using Themes in SAPUI5

Adding Styles to an Application

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Lesson 1: Using Themes in SAPUI5

© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Use Themes in SAPUI5

© 2015 SAP SE or an SAP affiliate company. All rights reserved

SAPUI5 Theming

Ÿ Based on CSS and CSS Parameters Ÿ CSS files are separated by control at development time ‒ Additionally: global.css, shared.css

Ÿ Every theme uses “base” CSS plus specific theme related CSS files on top Ÿ Generator merges files and appends specific themes to base theme ‒ ‒ ‒ ‒ ‒

Replaces CSS Parameter usages Optional compression/optimization Automatic right-to-left generation (For RTL languages like Hebrew) One CSS file per control library (library.css) SAPUI5 uses LESS to handle the CSS parameters (it also allows calculations, mixins,...)

Ÿ UI5 Framework handles theme switching at runtime (see next slide)

UI5 offers two main options to adjust themes: 1. 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 © 2015 SAP SE or an SAP affiliate company. All rights reserved

SAPUI5 Theming: Supported Themes

Ÿ Themes currently shipped with UI5: ‒ Blue Crystal (mobile and desktop) ‒ Gold Reflection ‒ High Contrast Black (Mobile and Desktop)

Blue Crystal

Gold Reflection

Use webkit browser such as Google Chrome to view © 2015 SAP SE or an SAP affiliate company. All rights reserved

High Contrast Black

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 The Theme Designer is also a subscription that can be added to your HCP trial account

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Dynamic Theme Selection Ÿ Themes can be applied via URL-parameters of via the bootstrap: OR

OR

=

=

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Summary

You should now able to: Ÿ Use Themes in SAPUI5

© 2015 SAP SE or an SAP affiliate company. All rights reserved

Agenda

Using Themes in SAPUI5

Adding Styles to an Application

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Lesson 2: Adding Styles to an Application

© 2016 SAP SE or an SAP affiliate company. All rights reserved.

Learning Objective

After completing this lesson, you will be able to: Ÿ Add Styles to an Application

© 2016 SAP SE or an SAP affiliate company. All rights reserved

CSS Parameters Ÿ Some values (often: colors) used for different elements Ÿ Parameters: write once, 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; /* text color is set to 'black' once*/ button { color: @sapUiTextColor; /* text color can be referenced multiple times*/ [...] } h2 { color: @sapUiTextColor; /* text color can be referenced multiple times*/ [...] } © 2016 SAP SE or an SAP affiliate company. All rights reserved

CSS Parameters

Ÿ 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 directly, like Canvas or WebGL jQuery.sap.require("sap.ui.core.theming.Parameters"); var myColor = sap.ui.core.theming.Parameters.get("sapUiSemanticErrorColor");

© 2016 SAP SE or an SAP affiliate company. All rights reserved

Adjusting Styles

In some cases one needs to adjust only small parts of the theme. There are two options to style specific elements: One can add