CD168-Building SAP Fiori-like UIs With SAPUI5

Frederic Berg, Bertram Ganz, Oliver Graeff, Thomas Marz, SAP AG

October 2013

CD168

Building SAP Fiori-like UIs with SAPUI5

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.


SAPUI5 Introduction

SAPUI5 Overview, Model View Controller, a SAP Fiori Application (User Interfaces, Files & Architecture)

Whats new: Changes in SAPUI5 Runtime version 1.16

Exercise Preparation (live demo)

Developing SAPUI5 applications with Eclipse and Google Chrome (Exercise 0: Getting Started)

Building SAP Fiori-like UI with SAPUI5 in 10 hands-on Exercises

1 Resource Model > 2 Object Controls > 3 Formatter > 4 Search > 5 Split App & Shell > 6 Additional Device Adaptation > 7 Info Tab > 8 Approval Process > 9 Line Item > 10 Grouping

Key Takeaways

Appendix: SAP Fiori Applications, SAP NetWeaver User Interface Services

References: Related Resources, Supportability & Security, SAP UX Explorer, Further Information

Agenda

SAPUI5 Introduction SAPUI5 Overview, Model View Controller,

SAP Fiori Application (User Interfaces, Files & Architecture)


UI development toolkit for HTML5 (SAPUI5) SAPs HTML5 Toolkit for building lightweight business UIs on multiple platforms

Key Features and Benefits

Built with Leading Web Technologies

jQuery OData OpenAJAX LESS D3.js ARIA CSS3

Runs on Various SAP and Non-SAP Platforms

SAP HANA XS SAP NetWeaver AS ABAP

Open Source Platforms (testing)

SAP HANA Cloud

SAP NetWeaver AS Java / Portal SAP Mobile Platform (planned)

HTML5

Enterprise Readiness

Eclipse-Based Design Time

Openness and Flexibility Fast Release Cycles

Unmatched Extensibility

Powerful Theming & Branding

Any Screen on Any Device

Cutting-Edge Controls

Build on STANDARDS Foster INNOVATION Delight USERS

Efficiency and Performance User Interface Services Well-known and easy to learn

Timeless SAP Data Consumption

Read more: Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5): http://scn.sap.com/docs/DOC-31625


Basic Model-View-Controller Concept in SAPUI5

Views with sap. libraries

Controllers

Models JSON, XML or OData

implementation

interface

implementation data binding

Views can be defined using

XML with HTML, mixed or standalone (sap.ui.core.mvc.XMLView)

JavaScript (sap.ui.core.mvc.JSView)

JSON (sap.ui.core.mvc.JSONView)

declarative HTML (sap.ui.core.mvc.HTMLView)

Controllers

bound to a view or standalone

can also be used by multiple views

Model: Data binding can be used on the views

Read more: SAPUI5 Demo Kit Developer Guide SAPUI5 Runtime Programming & API Application Development Topics MVC https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/MVC.html


Phone Desktop Tablet

Master Page Detail Page

sap.m.App

Master Page Detail Page

sap.m.SplitApp Master Page Detail Page

sap.m.SplitApp

SAP Fiori Application Details User Interfaces


App Controller App View

sap.m.App / sap.m.SplitApp

Component.js

Master

Controller

Detail

Controller

Mock

Model

i18n

Model util (Formatter.js)

index.html

Navigation

Master View

sap.m.Page

Detail View

trigger

call call

call

call

SAP Fiori Application Details Files & Architecture

sap.m.Page

Read more: SAPUI5 Demo Kit Developer Guide SAPUI5 for Mobile Best Practice https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/BestPractice.html


Whats New: Changes in SAPUI5 version 1.16*

SAPUI5 Component replaces the Application.js (deprecated) read more: https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Components.html

sap.m.IconTabBar replaces sap.me.TabContainer (deprecated)

sap.m.Table as separate control independent of sap.m.List

No more custom CSS for spacing

* SAPUI5 version 1.16: part of UI Add-on 1.0 SP06 for SAP NetWeaver and applied to next wave of SAP Fiori applications

Exercise Preparation:

Developing SAPUI5 Applications SAPUI5 Tools in Eclipse, Google Chrome browser

Step-by-step description: see CD168 Excercises.docx > Exercise 0 Getting Started

Building an SAP Fiori-like UI with SAPUI5

in 10 Exercises*

Exc1 Resource Model > Exc2 Object Controls >

Exc3 Formatter > Exc4 Search > Exc5 Split App & Shell >

Exc6 Additional Device Adaption > Exc7 Info Tab >

Exc8 Approval Process > Exc9 Line Item >

Exc10 Grouping

Step-by-step description: see CD168 Excercises.docx

*based on UI development toolkit for HTML5 runtime version 1.16

Key Takeaways


UI development toolkit for HTML5 (aka HTML5) Key takeaways

HTML5 is a specification for building highly interactive and flexible UI`s

SAPUI5 bundles a UI control library and tooling for building delightful desktop and mobile UIs for consumer-grade user experience

following web standards

SAPUI5 is your best choice when developing enterprise ready lightweight

business applications in the SAP context running on various

platforms

SAPUI5 is available, bundled with several platforms and products

SAP Fiori Apps are built with SAPUI5 and SAP NetWeaver UI Services

SAPUI5 opens up a broad range of opportunities for SAP customers

SAP Fiori Applications SAP Fiori approach and key criteria

SAP NetWeaver User Interface Services

For more details join sessions CD119, CD205, TEC149, TEC217


The SAP Fiori approach*

Responsive Simple Impactful Coherent Instant Value

All Sizes | Devices |

Versions |

Channels

Focused on user experience

outcomes over

features and

functions

Renewed

based on usage Assortment of apps

that speak the

same

language

Out of the box

Easy to adopt Easy to adapt Easy to deploy Easy to introduce Easy to grow

*follows SAP UX strategy RENEW most broadly used scenarios


SAP Fiori Apps are built with SAPUI5 and SAP NetWeaver UI Services Key criteria for SAP Fiori-like applications

I N S TA N T

R E S P O N S I V E

S I M P L E

S A P U I 5


SAPUI5 meets key criteria for SAP Fiori-like applications

Criteria Description

INSTANT

VALUE

Easy to adopt and deploy: no upgrades, works on SAP releases with largest installed

base and SAP HANA (cross-release, SAPUI5 also cross-platform). Little admin. Easy

to adapt: theming and extensibility. Easy to introduce: no training

RESPONSIVE UI designed for all device types (cross-device). UI adapts to device form factors. Use responsive patterns of SAPUI5 (SplitApp, DesktopShell, Object Header/List, Form)

SIMPLE 1-1-3 principle: one user, one use case, three screens. Keep simple things simple: focus on user experience outcomes over features and

functions. Make the important things really easy to use and learn. Little apps combined

into a collection of functions (home screen)

SAPUI5 SAPUI5 control library (for mobile and desktop), cross-device theme (SAP Blue Crystal) with UI theme designer for custom theming and branding,


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

SAP Fiori Home Pages are built with


Personalize tile order

Display tiles based on user role


SAP NetWeaver User Interface Services Key Capabilites SAP Fiori Home Pages are built with SAP NetWeaver User Interface Services

Add enterprise qualities to your SAPUI5 application by providing service APIs that make application

development easier

Examples: navigation, launch pads, PFCG content,

UI adaptations, building pages, authoring and

content provisioning

Investment protection by integrating SAPUI5 applications with existing SAP UI technologies

Services available to SAPUI5 application as JavaScript and/or REST (OData) based APIs

Enable without disruptions in any AS ABAP release (higher than 7.0) via a non-modifiable NW UI add-on

for SAP NetWeaver

Client container (desktop/mobile)

SAPUI5 User Interface

Applic

ation

CLIE

NT

SAP NetWeaver AS ABAP

7.0-7.02/7.31 SP4 / 7.40

Applic

ation

SE

RV

ER

UI add-o

n for

SA

P

NetW

eaver

1.0

SAP NetWeaver

User Interface

Services

Existing repository /

functionality Application backend

Application

service

Read more: Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5): http://scn.sap.com/docs/DOC-31625 Developer Guide: http://help.sap.com/nw-uiaddon#section3 Developers Guide: UI Add-on 1.0 SP04 for SAP NetWeaver (PDF)


SAP NetWeaver User Interface Services Documentation and Blogs

Developer Guide: User Interface Add-on 1.0 for SAP

NetWeaver Support Package Stack 03 (PDF)

http://help.sap.com/nw-uiaddon#section3

JavaScript Services: client-side CHIPs in SAPUI5, Shell API http://help.sap.com/javadocs/ui-services/index.html

OData Services: Launchpad Service (chapter 4)

ABAP APIs: Launchpad Service API

SCN Blog: Introducing the new UI Add-On for SAP

NetWeaver: http://bit.ly/OkOkkq

SCN Blog: Get to Know the UI Development Toolkit for

HTML5 (aka SAPUI5) Foster INNOVATION SAPUI5 Productivity Services: http://scn.sap.com/docs/DOC-31625

References SAPUI5 Related Resources, Supportability & Security,

SAP UX Explorer, Further Information


SAPUI5 Related Resources

Resource Link / Description

SCN Space scn.sap.com/community/developer-center/front-end

scn.sap.com/docs/DOC-31625 SCN blog Get to know SAPUI5

SAPUI5 Demo Kit sapui5.netweaver.ondemand.com/sdk/#content/Overview.html Overview, Developer Guide, Controls, API Reference, TestSuite

Tool Update Sites tools.netweaver.ondemand.com/ SAPUI5 Tools and ABAP Team Provider

saptools-saptools.netweaver.ondemand.com/juno/com/sap/ui5tp/updatesite/

SAP Online Help help.sap.com/nw-uiaddon UI Add-on for SAP NetWeaver AS ABAP see Developers Guide, Security Guide, incl. UI theme designer and UI Services

SAP Fiori http://www54.sap.com/pc/tech/mobile/software/lob-apps/fiori/index.html

highlights, solution brief, eBook and more http://scn.sap.com/docs/DOC-4159 SCN Doc on What is SAP Fiori


SAPUI5 Supportability Problem Message Handover

If you need to send problem messages to SAP, use the following SAP component hierarchy

names:

SAP Component Hierarchy Name Description

CA-UI5 SAPUI5 Core Framework and Libraries

CA-UI5-MOB SAPUI5 Mobile Library

CA-UI5-TOL SAPUI5 Tools including UI theme designer

CA-UI2 UI Integration

CA-UI2-INT-BE UI Integration - Backend Enablement: OData services, ABAP APIs

CA-UI2-INT-FE UI Integration - Frontend Enablement: JavaScript services

Source: SAP Online Help User Interface Add-on for SAP NetWeaver Admin Guide Supportability: http://help.sap.com/nw-uiaddon


SAPUI5 Security Information How to ensure the required security for SAPUI5 applications

It is important to understand that SAPUI5 is a client side JavaScript library, so while the

library itself is designed and tested to be secure, it can not ensure the application to be

secure!

Application developers need to understand the security threats and actively prohibit exploitation.

Also the correct configuration of the HTTP server which is used is important.

User authentication, session handling, authorization handling or encryption are not part of SAPUI5 and need to be handled by the server side framework and/or custom code of the application

For more Details read

SAPUI5 Demo Kit Developer Guide General Information Security Information https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/SecurityGuide.html

Or as PDF doc: http://help.sap.com/nw-uiaddon#section4 Security Guide


New SAP UX Explorer Get more insight into the different ways to improve your user experience

New online tool that is aimed to provide

transparency in the area of user

interfaces (UI) and user experience (UX)

everybody is looking for. Answers

questions like

Which items of the SAP UX portfolio are really of INTEREST for me?

Are there RELATIONS to other items that I need to know?

Which of these items provide the VALUE I am searching for?

How can I start USING them?

SCN Blog: http://bit.ly/15TC5UF

SAP UX Explorer http://uxexplorer.hana.ondemand.com

SAPUI5 page: http://bit.ly/1aw1JBL


Further Information

Watch SAP TechEd Online

www.sapteched.com/online

SAP Public Web

scn.sap.com/community/developer-center/front-end

experience.sap.com, uxexplorer.hana.ondemand.com

Related SAP TechEd Sessions

CD110 Toolkit for SAPUI5 App Development (1h Lecture)

CD119 Building Responsive SAPUI5 Applications Following the SAP Fiori Approach (1h Lecture)

CD167 New User Interface Theme Designer (2h Hands-on)

CD205 Add Enterprise Qualities to Your SAPUI5 Applications (1h Lecture)

TEC149 SAP UX Strategy and UI Roadmap (1h Lecture)

TEC217 SAP Fiori Technology Behind the Scenes (1h Lecture)

SAP Education and Certification Opportunities

training.sap.com WDE300: Developing UIs using HTML5 Fundamentals

WDE350: Developing UIs using HTML5 and SAPUI5


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 CD168.

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.

Documents

CD168-Building SAP Fiori-like UIs With SAPUI5