8/18/2019 OpenSAP Fiux2 Week 05 All Slides
1/63
Week 5 Unit 1: Enhancing Your
SAP Fiori App with the Layout
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
2/63
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
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).
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
4/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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.
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
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.
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
6/63© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
7/63© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Enhancing Your SAP Fiori App with the Layout Editor Demo
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
8/63
Thank you
Contact information:
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
9/63© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
10/63
Week 5 Unit 2: Develop Challeng
Build Your Own App with Peer R
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
11/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
12/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
13/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
14/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
15/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
16/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
17/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
18/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
19/63
Thank you
Contact information:
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
20/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 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 SA
company) 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’ 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
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
21/63
Week 5 Unit 3: Other Consideratiwhen Building an SAP Fiori App
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
22/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
23/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
24/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
25/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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:
Oth C id ti h B ildi SAP Fi i A
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
26/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Oth C id ti h B ildi SAP Fi i A
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
27/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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=
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
28/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
29/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Other Considerations when Building an SAP Fiori App
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
30/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Other Considerations when Building an SAP Fiori App
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
31/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Other Considerations when Building an SAP Fiori App
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
32/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
33/63
Thank you
Contact information:
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
34/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 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 SA
company) 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 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.
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’ 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
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
35/63
Week 5 Unit 4: Creating an S
Fiori App with a Smart Temp
Creating an SAP Fiori App with a Smart Template
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
36/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Creating an SAP Fiori App with a Smart Template
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
37/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Creating an SAP Fiori App with a Smart Template
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
38/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Creating an SAP Fiori App with a Smart Template
http://scn.sap.com/docs/DOC-55466http://scn.sap.com/docs/DOC-55466
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
39/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
Creating an SAP Fiori App with a Smart Template
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
40/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
g pp pSimulator (application instant preview)
Choice of simulator
Q
Creating an SAP Fiori App with a Smart Template
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
41/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
g pp pDemo
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
42/63
Thank you
Contact information:
© 2015 SAP SE or an SAP affiliate company All rights
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
43/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 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 SA
company) 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 affiliatedfor 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
Week 5 Unit 5: Introduction
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
44/63
Week 5 Unit 5: Introduction
SAP Fiori Overview Page
Introduction to SAP Fiori Overview Page
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
45/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
The need
News?
Urgent
issues?
Trends?
What’snext?
Where’s
my focus?
Introduction to SAP Fiori Overview Page
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
46/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
• 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)
Introduction to SAP Fiori Overview Page
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
47/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
The endless opportunities to use OVP within your business
RetaiTransportation
Management
Maintenance
Manager
HRProject Management Strategic Procurement
Introduction to SAP Fiori Overview Page
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
48/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Demo (1)
Introduction to SAP Fiori Overview PageD
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
49/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
50/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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 PageSAP Fiori
Overview Page*
SAP Fiori
Overview PageSAP Fiori
Overview PageSAP 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)
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
51/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Demo (2)
Introduction to SAP Fiori Overview PageOVP SAP Web IDE pl gin demo recap
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
52/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
53/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
54/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
55/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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¤t_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¤t_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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
56/63
Thank you
Contact information:
© 2015 SAP SE or an SAP affiliate company. All rights
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
57/63
© 2015 SAP SE 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 SE or an
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
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 affiliatedfor 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
Week 5 Unit 6: Deploying Y
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
58/63
Week 5 Unit 6: Deploying Y
App
Deploying Your AppAgenda
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
59/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
60/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
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
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
61/63
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Demo
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
62/63
Thank you
Contact information:
© 2015 SAP SE or an SAP affiliate company. All rights
8/18/2019 OpenSAP Fiux2 Week 05 All Slides
63/63
© 2015 SAP SE 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 SE or an
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
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 affiliatedfor 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