mob107

Wim Verhelst

October 2013

MOB107

Using SAPUI5 in Mobile Application Development

2013 SAP AG or an SAP affiliate company. All rights reserved. 2

Disclaimer

This presentation outlines our general product direction and should not be relied on in making a

purchase decision. This presentation is not subject to your license agreement or any other agreement

with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to

develop or release any functionality mentioned in this presentation. This presentation and SAP's

strategy and possible future developments are subject to change and may be changed by SAP at any

time for any reason without notice. This document is provided without a warranty of any kind, either

express or implied, including but not limited to, the implied warranties of merchantability, fitness for a

particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this

document, except if such damages were caused by SAP intentionally or grossly negligent.


Agenda

SAP UI5 Overview

SAP UI5 for Mobile Applications

SAP UI5 Mobile UI Controls and Features

Mobile Look and Feel

Events and Navigation

Phone/Tablet Specific Functionality

Deployment and Development Options

SAP UI5 and SAP Fiori


What is SAP UI5?

A development toolkit for HTML5

A cross-browser JavaScript library for building rich internet applications

Includes tooling support for development and testing

Used for the UI of standard SAP solutions and custom solutions

Available on desktop, mobile and cloud

Extensible; custom UI controls, custom theming,


Browser

How are SAP UI5 Applications developed?

SAP UI5 Applications run in a browser or a browser component

The start page of a SAP UI5 Application is a HTML page (e.g., index.html)

SAP UI5 Applications use the Model-View-Controller concept for the screens and logic

of the application

SAP UI5 Applications consist of

the standard SAP UI5 Libraries

custom files (Javascript, XML, CSS,..)

SAP UI5 Application

Models Views

index.html

Other components (formatter, app,)

SAP UI5 Libraries

Models Controllers Views


Model - View - Controller (MVC)

The Model-View-Controller concept is

used in SAP UI5 Applications

Controller

Model View

Define and

render the UI

Manage the

application data

Manage interaction

between View and

Model

Data binding

Types of SAP UI5 Views

XML View UI is defined in an XML file/string

Javascript View UI is constructed in a traditional manner

JSON View UI is defined via JSON in a file/string

HTML View UI is defined in an HTML file/string

Types of SAP UI5 Models

Resource Model Model based on resource bundles,

OData Model Model for data source in Odata format

XML Model Model for data source in XML format

JSON Model Model for data source in JSON format

Different types of Views and Models can be defined

and combined.


Con

trolle

r SAP UI5 Application

Sample code

Usually each SAP UI5 View has a corresponding Controller.

sap.ui.controller( "myproject.myview" ,{

// onInit: function(){},

// onBeforeRendering: function(){},

// onAfterRendering: function(){},

// onExit: function(){}

});

Vie

w

sap.ui.jsview("myproject.myview", {

getControllerName : function() {

return "myproject.myview";

},

createContent : function(oController) {

}

});

To retrieve corresponding controller

Here the UI controls will be added to the view

(for example buttons, edit boxes, images,)

Optional exit methods to manage the views behavior


SAP UI5 Application

Sample code

var view = sap.ui.view({id:"idmyview1",

viewName:"myproject.myview",

type:sap.ui.core.mvc.ViewType.JS});

view.placeAt("content");

Index.h

tml

Bootstrap the application

Declare the view

Add view to the content

The index.html file refers to the view


Agenda

SAP UI5 Overview









Goal of this session

SAP UI5 for Mobile

SAP UI5 Applications can be accessed on different devices;

SAP UI5 App

SAP

UI5

App SAP UI5 App

Desktop Tablet Phone

Focus of this session

+ +

SAP UI5 App Concept

SAP UI5 Screen Controls for Mobile


Topics covered

SAP UI5 Mobile Deployment Options

Integration with Mobile Device features


SAPUI5 for Mobile

Supported Mobile Platforms

The SAP UI5 sap.m library is required to define apps, screens, UI controls, for SAP UI5

mobile applications.

sap.m is supported on following plaforms :


Agenda

SAP UI5 Overview









SAP UI5 Mobile Controls

SAP UI5 comes with a lot of mobile specific Controls and Feature

This section will focus on 3 UI Controls; Lists, Charts and SplitApp Control

Features UI Controls

Button

CheckBox

DateTimeInput

Input

NavContainer

MessageToast

Charts

Switch

RadioButton

Carousel

Lists

SplitApp

Popover

TileContainer

Pull to Refresh

Responsive Design

Growing Lists

Swipe Gestures

.


Lists Examples

SAP UI5 offers a variety of list types for mobile applications

Standard List Display List Input List Custom List Grouped List

Selection List HTML List Action List Inset List


Lists Examples

Lists as Table

List with HTML

formatting


Lists Definition

How do you define a list with SAP UI5?

For example:

sap.m.list sap.m.ListItem SAP UI5 List with ListItem + =

sap.m.list sap.m.StandardListItem SAP UI5 Standard List + =

sap.m.list sap.m.DisplayListItem SAP UI5 Display List + =

sap.m.list sap.m.CustomListItem SAP UI5 Custom List + =

sap.m.list . + =


Lists Definition

How do you define a list with SAP UI5?

For example:

sap.m.list sap.m.ListItem SAP UI5 List with ListItem + =

SAP UI5 Standard List SAP UI5 Input List


Lists Code Sample

var oListDisplay = new sap.m.List(

{

inset : false,

showUnread: true,

headerText : "Person",

...

items: [

new sap.m.DisplayListItem({

label : "First Name",

value : "Francis"}),

new sap.m.DisplayListItem({

label : "Last Name",

value : "Douglas"}),

....

]

});

List

List Properties

List Item Type

List Item Properties


Split App Control Examples Portrait Mode

ShowHide Mode Popover Mode Stretch Mode

Hide the master view automatically

when the user switches the device

into portrait mode

The master view is shown inside a

Popover when the user switches the

device into portrait mode

The master view is shown in both

the portrait and landscape mode of

the device


Split App Control Examples

Seamless transition to mobile phone screen size no separate screen definition necessary


SplitApp

Split App Control Definition

Master Detail

1. Define a SplitApp

2. Define Master Page(s)

3. Define Detail Page(s)

4. Add Master and Detail Pages to SplitApp

M1 D1

M1 D2 M1 D1 M2 D1 M1 D2


Split App Control Code Sample

var oSplitApp = new sap.m.SplitApp("mySplitApp", {});

var oDetailPage1 = new sap.m.Page("detail1", {

...

});

var oMasterPage2 = new sap.m.Page("master2",{

...

});

//add the master pages to the splitapp control

oSplitApp.addMasterPage(oMasterPage2);

//add the detail pages to the splitapp control

oSplitApp.addDetailPage(oDetailPage1);

oSplitApp.setMode("PopoverMode")

SplitApp Control

Define Detail Page 1

Define Master Page 1

Define SplitApp Control

Add Master and Detail

Pages to SplitApp Control

Set Mode of SplitApp Control


Mobile Analytics Kit (MAKit) Examples


Mobile Analytics Kit (MAKit) Definition

Categories

Values

Series Categories represent a criteria on which to

evaluate the data.

For example year, month, region

The series represent a type of the data.

For example laptop, pc, tablet,

The values express the value of the series

over the displayed categories.

For example, sales of laptops, pcs and tablets per year.


Mobile Analytics Kit (MAKit) Code Sample

var oChart = new sap.makit.Chart({

height: "80%", width: "100%"

category : new sap.makit.Category({ column : "yearCategory" }),

series : new sap.makit.Series({ column : "productSeries" }),

values : [new sap.makit.Value({ expression : "revenueValue"})]

});

...

var jsonModel = new sap.ui.model.json.JSONModel();

...

oChart.addColumn(new sap.makit.Column(

{name:"yearCategory", value:"{year}"}));


{name:"productSeries", value:"{product}"}));


{name:"revenueValue", value:"{revenue}", type:"number"}));

oChart.setModel(jsonModel);

oChart.bindRows("/mycollection");

MAKit Chart

Define Chart

Define Model

Add Columns to Chart

(Category, Series and

Values)

Define Category,

Series and Values

Bind Data Model

to Chart


Agenda

SAP UI5 Overview









Layout with Flexboxes

Screen

Flexbox

Screen

Flexbox

Row Layout

Column Layout

var oMyFlexbox = new sap.m.FlexBox({

items: [

new sap.m.Button(...),

new sap.m.Button(...)

]

});


items: [

new sap.m.Button(...),

new sap.m.Button(...)

],

direction: "Column"

});

Screen

element 1

Screen

element 2

Screen element 1

Screen element 2


Flexbox


Horizontal Alignment

Screen

element 1

Screen

element 2 Justify - Start


items: []

});

oMyFlexbox.setJustifyContent('Start');


items: []

});

oMyFlexbox.setJustifyContent(Center');


items: []

});

oMyFlexbox.setJustifyContent(End');

Flexbox

Screen

element 1

Screen

element 2 Justify - Center

Flexbox

Screen

element 1

Screen

element 2 Justify - End



Vertical Alignment

var oMyFlexbox =

new sap.m.FlexBox({

items: []

}).setAlignItems('Start);

Flexbox

Screen element 2

Screen element 1

Justify - Start

var oMyFlexbox =

new sap.m.FlexBox({

items: []

}).setAlignItems(Center);

Flexbox

Screen element 2

Screen element 1

Justify - Center

var oMyFlexbox =

new sap.m.FlexBox({

items: []

}).setAlignItems(End);

Flexbox

Screen element 2

Screen element 1

Justify - End


Adapting to Platform and Screen Size

SAP UI5 adapts to the Mobile OS, browser and screen size;

1. Automatic Adaptation

The Look & Feel of SAP UI5 screen elements is automatically adapted to reflect the Mobile

OS and/or device running the SAP UI5 application.

2. Manual Adaptation

SAP UI5 Developers can selectively override the automatic adaptation and adapt the Look &

Feel of the SAP UI5 application for a specific Mobile OS and/or devices.



Automatic Adaptation

new sap.m.List({

items: [

new sap.m.InputListItem({

label: Vendor",

value : Pacific United",

}),

new sap.m.InputListItem({

label: Status",

value : Dirty",

}),

],

});

iOS Look & Feel

+ SAP Gold Theme

Android Look & Feel

+ SAP Gold Theme



Automatic Adaptation

new sap.m.Slider(...);

iOS Look & Feel

+ SAP Gold Theme

Android Look & Feel

+ SAP Gold Theme

new sap.m.Switch(...);

new sap.m.CheckBox(...);

new sap.m.Label(...);

New sap.m.Input(...);


SAP UI5 Control

CSS


Manual Adaptation

Mobile OS specific styling with CSS

SAP UI5 provides standard CSS classes for each

mobile OS type;

sap-ios

sap-android

sap-winphone

sap-bb

Developers can use these standard CSS classes to

apply custom styling based on the mobile OS type.

iOS

.sap-ios #myControl {

color: red;}

var oLabel = new sap.m.Label(

"myControl",

{text : "sample text"});

non-iOS



Manual Adaptation

Mobile OS specific styling with CSS

SAP UI5 provides standard HTML tag attributes;

data-sap-ui-browser : for browser and browser version information

data-sap-ui-os for OS and OS version information

Developers can use these standard CSS attributes

to apply custom styling based on the browser and/or

mobile OS type (including version).

SAP UI5 Control

CSS

iOS 5 non-iOS 5

html[data-sap-ui-os="iOS5.0"] #myControl {

color: red;}

var oLabel = new sap.m.Label(

"myControl",

{text : "sample text"});


Agenda

SAP UI5 Overview









Navigation

Concept

Recommendation : For SAP UI5 Mobile Applications use the SAP UI5 App concept

App

The root element of the mobile app

Handles navigation

Event Bus

Event broker of the mobile app

Allows to publish and subscribe to events

App

EventBus

View 1

Controller 1

View 2

Controller 2

App View

App

Controller


Navigation

How does navigation work?

Step 1 : App Controller subscribes to Navigation Events of Event Bus (at start up)

Subscribe to events

App Controller

onInit : function() {

...

var bus = sap.ui.getCore().getEventBus();

bus.subscribe("nav", "to", this.navTo, this);

bus.subscribe("nav", "back", this.navBack, this);

...},

navTo : function() {

...

this.app.to();

...},

navBack : function() {

...

this.app.back();

...}

App

EventBus

View 1

Controller 1

View 2

Controller 2

App View

App

Controller

Nav

Button


Navigation


Step 2 : View 1 triggers navigation to View 2 by calling Controller 1

Trigger

Navigation

View 1

createContent : function(oController) {

var oButton = new sap.m.Button({

...

tap : [oController.buttonPushed, oController]

...});

}

View 1

Controller 1

View 2

Controller 2

Nav

Button

App

EventBus

App View

App

Controller


Navigation


Step 3 : Controller 1 publishes navigation event to the Event Bus

View 1

Controller 1

View 2

Controller 2

Publish Event

Controller 1

buttonPushed: function() {

...

var bus = sap.ui.getCore().getEventBus();

bus.publish("nav", "to", {

id : "View2"

...});

...},

Nav

Button

App

EventBus

App View

App

Controller


Navigation


Step 4 : The App receives navigation event and switches the display to View 2

View 1

Controller 1

View 2

Controller 2

Nav

Button

Switch to View 2

Detect Navigation Event

App

EventBus

App View

App

Controller


Mobile Events

SAP UI5 Mobile Applications support all desktop events and additionally some mobile specific

events.

Usually, on handler methods are used to react to these events.

click

select

Desktop Events Mobile Browser Events Other Mobile Events

touchstart

touchend

swipe

swipeleft

scrollstart

tap

swiperight

scrollstop

dragstart

touchmove

touchcancel

SAP UI5 Mobile Events

+ +


Mobile Events

Mobile specific SAP UI5 screen controls support the relevant mobile events.

View

var showToast = function()

{

jQuery.sap.require("sap.m.MessageToast");

sap.m.MessageToast.show("Tapped");

};

var oButton = new sap.m.Button(

{text: "Tap me",

width : "100%",

tap : showToast});

Before

Button

tapped

After

Button

tapped

To debug touch events, set the UI5 configuration parameter"xx-test-mobile" to "true on non-touch devices, for example by appending the url parameter "sap-ui-xx-test-mobile=true".


Agenda

SAP UI5 Overview









Triggering Phone / SMS / E-Mail

SAP UI5 allows to trigger the mobile devices phone, SMS and E-mail functionality and to launch custom URLs on the device.



Phone

Trigger Phone : sap.m.URLHelper.triggerTel( [Telephone Number] );

View

var triggerPhone =

function(){

sap.m.URLHelper.triggerTel(

0032496000000);

};

var oButtonPhone =

new sap.m.Button(

{text: "Call",

width : "100%",

tap : triggerPhone});



E-mail

View

var triggerMail =

function(){

sap.m.URLHelper.triggerEmail(

"[email protected]",

"SAP UI5 for Mobile",

"Hello" );

};

var oButtonMail =

new sap.m.Button(

{text: "Send an E-mail",

width : "100%",

tap : triggerMail});

Trigger E-mail : sap.m.URLHelper.triggerEmail( [Address], [Subject], [Text], [CC], [BCC] );


Agenda

SAP UI5 Overview









Deployment Scenarios

Option 1 : Deployment on Servers

SAP UI5 Mobile Applications can be

deployed on a variety of servers

SAP HANA Cloud

SAP NW ABAP Server

SAP NW Java Server

3rd Party Java Application Server

3rd Party Static Web Server

The app will run in the browser on the

mobile device

Data Service

SAP

UI5 App

SAP

UI5 App

SAP

UI5 App

SAP

UI5 App

NW

ABAP

Server

NW

Java

Server

Java

Appl.

Server

Static

Web

Server

SAP

UI5 App

SAP HANA

Cloud Mobile Browser

runs SAP UI5

App


Deployment Scenarios

Option 2 : Deployment in Web Container

SAP UI5 Mobile Applications can be

deployed as a Web Container App

A Web Container App uses a hybrid approach;

Data Service

SAP UI5 App runs as a

Web Container App

SAP

UI5 App

The UI and logic of the app are developed in HTML/Javascript/CSS

(with SAP UI5 in this case)

These HTML/Javascript/CSS pages are packaged inside a native app that is

deployed as a standalone app to the device


Running in Web Containers

Example : Generating a native Android SAP UI5 App with Cordova

Develop SAP UI5 as Web App

Test SAP UI5 App on server

Using Cordova, generate a native mobile OS

application project

Import native mobile OS application project into

native OS IDE

Import SAP UI5 libraries and SAP UI5 App Files

into native mobile OS application project

Compile native mobile OS application project into

native app and deploy

SAP UI5 Eclipse

Server

Cordova

Android Eclipse

SAP UI5

App Files

Android

Project

SAP UI5

App Files

SAP UI5

Libs

SAP UI5

App Files

SAP UI5

Libs

Android App

SAP UI5

Libs

SAP UI5 App

SAP UI5 Libs

Android

Project

1

2

3

4

5

1

2

3

5

6 4

6


Development Tips & Tricks

To improve performance of SAP UI5 mobile applications deployed in a web container, minimize

the SAP UI5 standard libraries by removing unnecessary files:

Delete the files of the themes you don't use (for example the "base" and the "sap_bluecrystal" theme)

Delete the files for the MAKit Charts if you don't use MAKit Charts

Each SAP UI5 Javascript file comes with a debug version; delete debug-version of each file for productive apps

Delete JQuery files when SAP UI5 is used in the regular way (with sap-ui-core.js)

Consult the SAP UI5 documentation before removing any standard SAP UI5 files.


Agenda

SAP UI5 Overview









Introducing SAP Fiori

A collection of apps with a simple, easy to

use consumer-grade user experience for

broadly and frequently used SAP software

functions that work seamlessly across

devices desktop, tablet, or smartphone


First wave of SAP Fiori already includes 25 apps

My Leave Requests

My Timesheet

My Travel Requests

My Shopping Cart

Track Shopping Carts

Approvals

Insights

Approve Requests

Approve Leave Requests

Approve Timesheets

Approve Travel Requests

Approve Travel Expenses

Approve Shopping Carts

Approve Purchase Orders

Approve Requisitions

Approve Purchase Contracts

Purchasing

My Spend

Track Purchase Order

Order from Requisitions

Requests Insights My Paystub

My Benefits

Purchasing

Agent

Manager Employee

Transactions

Insights

SAP

Fiori Sales Rep

Create Sales Orders

Change Sales Orders

Check Price and Availability

Track Sales Orders

Track Shipments

Customer Invoices

SAP Fiori allows employees to work seamlessly across devices desktop, tablet, or smartphone. It provides improved user satisfaction and enables quicker approvals and better decisions.


Architecture SAP Fiori components

SAP NetWeaver AS ABAP

SAP NetWeaver Gateway

Desktop/Tablet/Smartphone

HTML5

Browser SAP Fiori Apps

SAPUI5

Fiori OData Service Proxy

SAP Business Suite

Fiori Data + Model Provider

Odata/HTTPS

Business Application

RFC

Business Content Customizing

Authorization

R

R

R

SAP Fiori Apps

SAPUI5

Fiori components


How to modify a SAP Fiori App?

Export SAP UI5 Code of SAP Fiori App that needs

to be changed

Create a new SAP UI5 Project

Import SAP UI5 Code of SAP Fiori App in SAP

UI5 Project

Make changes in SAP UI5 Project

Export SAP UI5 Code of modified SAP Fiori App

Upload SAP UI5 Code of modified SAP Fiori App

SAP Gateway

Eclipse SAP UI5 SDK

SAP UI5 App Code

SAP UI5

App Files

Upload /

Download

Report

SAP UI5 Project

SAP UI5 App Code

1

2

3

4

5

6

1

2

3

4

5

6

Conclusion


Further Information

SAP Education and Certification Opportunities

www.sap.com/education

Watch SAP TechEd Online

www.sapteched.com/online

SAP Public Web

scn.sap.com

www.sap.com


SAP TechEd Virtual Hands-on Workshops and SAP TechEd Online Continue your SAP TechEd education after the event!

SAP TechEd Virtual Hands-on Workshops

Access hands-on workshops post-event

Available January March 2014

Complementary with your SAP TechEd registration

SAP TechEd Online

Access replays of keynotes, Demo Jam, SAP TechEd LIVE interviews, select lecture sessions, and more!

View content only available online

http://saptechedhandson.sap.com/

http://sapteched.com/online

Feedback Please complete your session evaluation for MOB107.

Thanks for attending this SAP TechEd session.


2013 SAP AG or an SAP affiliate company. All rights reserved.

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 information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and

SAP Group shall not be liable for errors or omissions with respect to the materials. 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, if any. Nothing herein should be construed as constituting an additional warranty.

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.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

mob107

Documents

sap ag

sap fiori

sap affiliate company

development options

ui of standard sap solutions

model view

odata model model

xml format json model