OpenSAP Fiux2 Week 05 All Slides

8/18/2019 OpenSAP Fiux2 Week 05 All Slides

1/63

Week 5 Unit 1: Enhancing Your

SAP Fiori App with the Layout


2/63


3/63

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

Enhancing Your SAP Fiori App with the Layout Editor SAPUI5 controls

Drag & drop the SAPUI5 controls

from the Controls tab to the canvas.

See the control hierarchy in the

Outline tab. Add/Delete controls (no

drag & drop behavior yet).


4/63


Enhancing Your SAP Fiori App with the Layout Editor Properties & events

Properties pane

Edit the properties of the selected control.

The most common properties are at the top.

Events pane

To handle a control event, select an existingevent handler from the controller.


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

Enhancing Your SAP Fiori App with the Layout Editor Data binding

1. Select the data set for the View control

to define the data model.

2. Bind control properties or control

aggregations to the data model.



Enhancing Your SAP Fiori App with the Layout Editor Quick start

Create “QuickStartApplication” with Read-to-run project with a view

Data model with three simple entity

types

JSON files with local mock data

Layout Editor is launched



Enhancing Your SAP Fiori App with the Layout Editor Demo


8/63

Thank you

Contact information:

[email protected]



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

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAcompany) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema

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

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of a

affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate c

services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein sho

constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related

or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy

developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated

for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod

looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Reader

undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha

http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx


10/63

Week 5 Unit 2: Develop Challeng

Build Your Own App with Peer R


11/63


Develop Challenge: Build Your Own App with Peer ReviePoints and timing

Whe

15 assignments

5x30 = 150 points

Participate in

Weekly Assignment

(Weeks 1 - 7)

Design Mock-Up

with Peer Review

(Weeks 2 - 6)

75 points

Develop Your Own

App with

Peer Review

(Weeks 5 - 10)

75 points

+ top 3 each get

Apple iPad Pro


12/63


Develop Challenge: Build Your Own App with Peer RevieOverview

1/4 of final grade

End-to-end hands-on learningexperience

Peer review feedback involved

Re-submit latest Design Challengeassets

Points criteria separate from prize criteria


13/63


Develop Challenge: Build Your Own App with Peer ReviewCourse structure

Week 7Week 6Week 5Week 4Week 3Week 2Week 1 Week 8

Extend SAP

Fiori Apps

Enhance an

SAP Fiori

Master

Detail App

Create

Your First

SAP Fiori

App

Get Ready

to Create

Your First

App

Design

Your First

SAP Fiori

App

Get to

Know SAP

Fiori UX

Build Your

Own SAP

Fiori App

Design mock-up with peer review

Submit Evaluate peersView

results

Develop your own app with peer rev

Submit

No

Learning effort:

~3-4 hours/ week

Online forums during entire 10 weeks of course


14/63


Develop Challenge: Build Your Own App with Peer RevieDesign Challenge submission checklist recap

Story – make a case & tell a story(segmentation, targeting, & positioning)

Persona – explain the needs, goals, and painpoints addressed

User Experience Journey – map out thepersona’s mindset, actions, & touchpoints

Point of View (POV) – include user + need +insight/surprise

Mock-Up – create a user experience using SAPSplash and Build

Study – create a study to gather direct feedbackfrom other users

Peer Review – share your mock up for others toevaluate and participate


15/63


Develop Challenge: Build Your Own App with Peer RevieThe deliverables

Possible

Format:

Language:

Length:

File format, size & upload:

Anonymous participation:

English

PDF (design assets + screenshots) and/ovideo + latest mock-up link

9 pages max (design assets + SAP Web ID

screenshots) OR 9 minutes of video, or th

formats together where 1 page = 1 minute

Details in course section “Develop Challe


16/63


Develop Challenge: Build Your Own App with Peer ReviePoints criteria

Did you complete the peer review process?

Did you follow the SAP Fiori design guidelines and principles?

Simple and focused onwhat is most important

User-centric andintuitive

Leverage SAP Fiorilook and feel

Did you submit all components in a coherent format?

Latest design assets Latest mock-up link SAP Web IDEscreenshots


17/63


Develop Challenge: Build Your Own App with Peer RevieChallenge points and selection of best submissions

Peer grade

(max 75 points)

Bonus points:

Writing good

reviews

Challen

final po

Bonus points:

Accurate self-

evaluation

Review by

board of expertsPeers select

extraordinary submissions

“Best of”

page created


18/63


Develop Challenge: Build Your Own App with Peer ReviePrize Criteria & Process

Get flagged as extraordinary during the peer review process

Stand out, show more, and get further, but still adhere todesign and develop submission criteria

Top 3 to be determined by SAP experts and will eachreceive an Apple iPad Pro

Additional top submissions will be showcased on a “best of”page on the course site

Check out the FAQs for more details and post questions inthe discussion forum if needed


19/63

Thank you


[email protected]


20/63




SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA

company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema








or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategydevelopments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated

for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod





21/63

Week 5 Unit 3: Other Consideratiwhen Building an SAP Fiori App


22/63


ABAP Back End

Other Considerations when Building an SAP Fiori AppSAP Fiori Architectural Layers – Impact on performance

SAP Fiori Front-End Server

SAP Gateway

Desktop/Tablet/Smartphone

HTML5Browser SAP Fiori Apps

SAPUI5

SAP Fiori OData Service Proxy

SAP Business Suite

SAP Fiori Data + Model Provider

OData/HTTPS

Business Application

RFC

Business ContentCustomizing

Authorization

R

R

R

SAP Fiori AppsSAPUI5

Application DATA / SAP HANA / AnyDB

Front-End Server Performance Impact:

SAP UI Services , SAP Gateway

ABAP Server Performance Impact:

Application Business Logic, OData Model

DBMS Performance Impact:

SQL Statement Execution

Browser Performance Impact:

UI5 Rendering, UI5 Resource Loading,OData Consumption


23/63


Other Considerations when Building an SAP Fiori AppNon-cached SAPUI5 Resource Loading

1. Your startup is initiated once the SAP Fiori launchpad has done a link resolution to find oneeds to be fired up

2. Loading JavaScript files, style sheets, and other static artifacts. (There is not much you c

loading pattern).

3. SAPUI5 will load metadata of services that are bound to controls on your first page now.

4. For a master/detail pattern, the list on the left is now loaded. After that, is it determined wthe right side needs to be loaded

5. Once the app has decided which details should be retrieved, another call to the back endcase, there are multiple different bindings in different pieces of the OData services


24/63


Other Considerations when Building an SAP Fiori AppCached SAPUI5 Resource Loading

1. The link resolution takes place again. Further optimizations take place on the Fiori Launcthere is not much you can do about it yourself.

2. The metadata document is requested again, but this time it is delivered from the cache.

3. The only other back-end calls are now those for the data bindings, because OData data uncached as per security guideline

4. Subsequent batch calls do not require fetching of the XSRF token, because it is remembuntil it becomes invalid

Oth C id ti h B ildi SAP Fi i A


25/63


Other Considerations when Building an SAP Fiori AppOn-Demand Loading of Libraries

…"dependencies" : {

"libs" : [ "sap.m","sap.me"],“components”: []},…

UI5 JavaScript Snippet in Components.js

jQuery.sap.require(“sap.viz”);

UI5 JavaScript Snippet in your Controller

If you need specific libraries, load them as late as possible, unless needed on your initia

For example, if you need a big chart library (such as sap.viz), but the charts will only be additional navigation, you should only request them once such a navigation actually take

Normal startup library annotation in Component.js:

Specific loading of a library in your application controller:



26/63


Other Considerations when Building an SAP Fiori AppOne App/One Service

The basic SAP Fiori paradigm for using OData is "one app/one se

GW GW GW



27/63


Use $inlinecount=allpages for the count determination in UI5 lists/tables

Other Considerations when Building an SAP Fiori AppOData Consumption: Correct Usage of $inlinecount/$count

1st call: /sap/opu///$count?$filter=

2nd call: /sap/opu//?$skip=&$top=&$filter=


28/63


Do not trigger more than 2 sequential OData calls per dialog step

Other Considerations when Building an SAP Fiori AppOData Consumption: OData Call Choreography I

MasterCollection: /sap/opu/odata///?Detail: /sap/opu/odata//()/?

Master/Detail Request sequence

Example for sequential calls – Master/Detail Pattern

With more complex screens, you have to deal with several resources of your OData service afind an adequate choreography.

Boundary conditions:

Network work time increases with the # of http connections

Browsers allow per origin only a restricted # of parallel http connections

– Desktop Chrome/FF: 6

For the application startup, the SAP Fiori launchpad already sends OData requests (such a

Other Considerations when Building an SAP Fiori App


29/63


Other Considerations when Building an SAP Fiori AppOData Consumption: OData Call Choreography II

Bundling Mechanisms:

use $batch for the bundling of multiple parallel calls into single OData operations

In a $batch call, multiple OData requests are bundled into one physical request that en bloc by the receiving gateway and returned with all the individual results bundled response



30/63


Other Considerations when Building an SAP Fiori AppOData Consumption: OData Call Choreography III

Resources to be lo

1. Area1: Pageable

2. Area2: Custome

3. Area 3: Credit in

4. Timeline data

Loading proposal

1. Load areas 1+2

2. Load 3+4 in 1 $depending on tresources



31/63


Other Considerations when Building an SAP Fiori AppSecurity Best Practices I

User $BATCH/POST to wrap each OData request, and move sensitive data from the URLbody of the $BATCH/POST request.

Do not store or cache potentially sensitive data such as business data, personal data, or data persistently on the client side. (Exception: apps with offline support)

Do no switch between protocols, for example http ↔ https

No eval(), no inline scripts (like Link)

No injection of scripting in page

Only use external libraries from trusted sources



32/63


Other Considerations when Building an SAP Fiori AppSecurity Best Practices II

• Authentication is always handled centrally by frameworks• No own handling of tickets/tokens/assertions

• No own logoff functionality• Do not include the “authentication” section in the application’s .xsaccess file

• Authorization is not handled by the app. There are 3 levels where role and authorization maintained:

• The SAP Fiori launchpad – covering the assignment of apps to users• The Gateway/FES – covering the authorizations to call OData services in ABAP back• The back-end systems, covering the business authorizations

Proxy SAPGateway

MDMCertificateAuthority

Import Root CA Certificate

Mutual SSLHandshake


33/63

Thank you


[email protected]


34/63








These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of aaffiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate cservices are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein shoconstituting an additional warranty.


or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategydevelopments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliatedfor any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, codlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readerundue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha

W k 5 U it 4 C ti S



35/63

Week 5 Unit 4: Creating an S

Fiori App with a Smart Temp

Creating an SAP Fiori App with a Smart Template


36/63


This is the current state of planning and may be

Creating an SAP Fiori App with a Smart TemplateSmart template – The idea

View

Provide commonly used application patterns

according to the latest SAP Fiori Guidelines

The templates are applied to the data and use

annotations to understand the semantics behind

the data model

Smart Template

OData A

Goal: To improve SAP Fiori development efficiency



37/63


Creating an SAP Fiori App with a Smart TemplateCreate an SAP Fiori application

Create a new

project

Use a template of

a smart template

floorplan to create

an app

Set up a

connection to a

remote system



38/63


Creating an SAP Fiori App with a Smart TemplateSAP Web IDE on SAP HANA Cloud Platform

SAP HANA Cloud Connector

SAP HANA Cloud Platform

SAP Business Suite / ERP

HTTP(S)

Corporate Network /Intranet

Windows OS

Linux OS

Mac OS X

(all 64-bit)

HTTPS

For more details: http://scn.sap.com/docs/DOC-55466

Cockpit

Permanent File System

Trusted RFC

Internet / Cloud

OrionGit

(App Projects)

SAPUI5

Version

Browser

SAP Web IDE

SAP Gateway


http://scn.sap.com/docs/DOC-55466http://scn.sap.com/docs/DOC-55466


39/63


Creating an SAP Fiori App with a Smart TemplateSAP Web IDE smart template

SAP Web IDE Wizard

Guides the user through the definition of

an application and then generates the

code

Placeholders for static and dynamic data

SAP Fiori Smart Template

A template to generate an SAP Fiori smart

template app based on floorplans

At the time of recording, the availablefloorplan is:

List Report > Object Page > Object Page

NO modifications



40/63


g pp pSimulator (application instant preview)

Choice of simulator

Q



41/63


g pp pDemo


42/63

Thank you


[email protected]

© 2015 SAP SE or an SAP affiliate company All rights


43/63














developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliatedfor any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod



Week 5 Unit 5: Introduction



44/63

Week 5 Unit 5: Introduction

SAP Fiori Overview Page

Introduction to SAP Fiori Overview Page


45/63


The need

News?

Urgent

issues?

Trends?

What’snext?

Where’s

my focus?



46/63


• SAP Fiori Overview Page is a new interaction withinSAP Fiori UX

• Visualizing all the information needed for a businessdomain in one place

• Based on Cards – Smart, actionable, contextual,focused data points

• Data-driven based on smart templates technology

• Create OVPs at the speed of business

• Available both on-premise and on SAP HANA CloudPlatform

SAP Fiori Overview Page (OVP)



47/63


The endless opportunities to use OVP within your business

RetaiTransportation

Management

Maintenance

Manager

HRProject Management Strategic Procurement



48/63


Demo (1)

Introduction to SAP Fiori Overview PageD


49/63


Layouts

– Easy scan Cards

– List, table, stack, quickview

– Analytics cards: list bar chart, line chart,

bubble chart, donut chart

Global filters

Direct business actions from cards

Contextual navigation

Demo recap

Introduction to SAP Fiori Overview PageSAP Fi i O i P (OVP) i th SAP t h l tf li


50/63


HCP (Cloud) On-Premise External S

SAPUI5

SAPUI5 ABAP

Repository

SAP HANA

Cloud Platform

SAP Gat

OData Se

Annotat

SAP Fiori La

(FLP

SAP Web

Overview

Templa

Overview Page Library

SAP Fiori

Overview PageSAP Fiori


Overview Page*

SAP Fiori



Overview Page*

* SAP Fiori Overview Page is a

SAP Fiori Overview Page (OVP) in the SAP technology portfolio

Introduction to SAP Fiori Overview PageD (2)


51/63


Demo (2)

Introduction to SAP Fiori Overview PageOVP SAP Web IDE pl gin demo recap


52/63


OVP SAP Web IDE plugin

enablement

OVP generation

Adding cards to OVP

Testing

Deployment

OVP – SAP Web IDE plugin demo recap

Introduction to SAP Fiori Overview PageSAP Fiori Overview Page roadmap


53/63


This is the current state of planning an

Today Future DirecPlanned Innovations

SAP Fiori Overview Page roadmap

Technology

• Tools (SAP Web IDE) – Generate OVP based on layouts

and cards

• Layouts

– Easy scan

• Cards:

– List, table, quickview, stack

– Analytics cards: list bar chart, line

chart, bubble chart, donut chart• Global filters

• Direct business actions from cards

• Contextual navigation

• Available on-premise and on HCP

(Cloud)

Technology

• Tools (SAP Web IDE) – OVP editor

• Admin tools: Generate and edit OVP

• Additional layouts

• Additional cards

• Accessibility

• Cards drag & drop

• Personalization

• Integration with BUILD

Solutions

• IoT SAP Predictive Maintenance and

Service, cloud edition (PdMS)

• IoT SAP Assets Intelligence Network

(AIN)

• SAP S/4HANA Procurement

Technology

• Tools (SAP We – Generate OV

– Generate OV

• Non-SAP data

• Key user

• Multiple domai

• Wearables

• OVP usage an

• SAP Fiori Clien

Solutions

• SAP PPM

• Transportation

• SAP S/4HANA

Introduction to SAP Fiori Overview PageSummary


54/63


Smart templates-based SAP Fiori app

Business user’s domain home page Cards-based interaction pattern

Leverages existing investments in OData and

annotations

Fast and easy generation and modification

Codeless generation

Summary

Introduction to SAP Fiori Overview PageAdditional assets


55/63


Additional assets

SAP Fiori

SCN

SAP UX Explorer

experience.sap.com

SAP HANA Cloud Platform

SCNSAP UX Explorer

hcp.sap.com

Tools

SAP Web IDE

SAP Fiori launc

UI theme design

SAP HANA Cloud Portal

cloudportal.sap.com

SAP Fiori Overview Page

SCN Introduction Video SAP UX Explorer OVP Documentation

http://scn.sap.com/community/fiorihttps://uxexplorer.hana.ondemand.com/_item.html?id=154#!/overviewhttps://experience.sap.com/fiori/http://scn.sap.com/community/cloud-platformhttps://uxexplorer.hana.ondemand.com/_item.html?id=159#!/overviewhttp://hcp.sap.com/index.htmlhttp://scn.sap.com/docs/DOC-55465http://scn.sap.com/docs/DOC-53178http://scn.sap.com/docs/DOC-53179https://cloudportal.sap.com/http://scn.sap.com/docs/DOC-68528https://www.youtube.com/watch?v=0_gpY1f1vPc&feature=youtu.behttps://uxexplorer.hana.ondemand.com/_item.html?id=11065#!/overviewhttps://uxexplorer.hana.ondemand.com/_item.html?id=11065#!/overviewhttp://help.sap.com/saphelp_uiaddon20/helpdata/en/c6/4ef8c6c65d4effbfd512e9c9aa5044/content.htm?frameset=/en/62/244a942bd844678e7ab72a960ad6c9/frameset.htm&current_toc=/en/e4/843b8c3d05411c83f58033bac7f072/plain.htm&node_id=633&show_children=falsehttp://help.sap.com/saphelp_uiaddon20/helpdata/en/c6/4ef8c6c65d4effbfd512e9c9aa5044/content.htm?frameset=/en/62/244a942bd844678e7ab72a960ad6c9/frameset.htm&current_toc=/en/e4/843b8c3d05411c83f58033bac7f072/plain.htm&node_id=633&show_children=falsehttps://uxexplorer.hana.ondemand.com/_item.html?id=11065#!/overviewhttps://www.youtube.com/watch?v=0_gpY1f1vPc&feature=youtu.behttp://scn.sap.com/docs/DOC-68528https://cloudportal.sap.com/http://scn.sap.com/docs/DOC-53179http://scn.sap.com/docs/DOC-53178http://scn.sap.com/docs/DOC-55465http://hcp.sap.com/index.htmlhttps://uxexplorer.hana.ondemand.com/_item.html?id=159#!/overviewhttp://scn.sap.com/community/cloud-platformhttps://experience.sap.com/fiori/https://uxexplorer.hana.ondemand.com/_item.html?id=154#!/overviewhttp://scn.sap.com/community/fiori


56/63

Thank you


[email protected]



57/63
















Week 5 Unit 6: Deploying Y



58/63

Week 5 Unit 6: Deploying Y

App

Deploying Your AppAgenda


59/63


Agenda

Demo Content Overview

Deployment options in SAP Web IDE

What happens with “deploy” and “register” in SAP Web IDE SAP Web IDE folder structure and which files will really be

deployed

Further distribution steps on SAP HANA Cloud Platform

Deployment results on SAP HANA Cloud Platform

Registration in the Fiori Launchpad

Deployment in an on-premise ABAP back end

Local project export to an archive

Deploying Your AppDeployment and publishing options from SAP Web IDE to a destinatio


60/63


Deployment and publishing options from SAP Web IDE to a destinatio

SAP Web IDE

Export to a Local

Archive

SAPUI5 ABAP

Repository

(On-Premise)

GIT Repository

SAP HANA Cloud

Platform (HCP)

Standalone ap

SAP HANA Cl

(HC

Mobile via SAP

Platform mobile s

and SAP Mobile

SAP Fiori launchp

HANA Cloud P

Deploying Your AppDemo


61/63


Demo


62/63

Thank you


[email protected]



63/63
















Documents

OpenSAP Fiux2 Week 05 All Slides