SAP UX Strategy: Week 1 Unit 1: Introduction To

Week 1 Unit 1: Introduction to
SAP UX Strategy
Introduction to SAP UX Strategy
Course Structure and Objectives
Focus for the next 9 weeks
Week 1: Get to Know SAP Fiori UX
 How to design an SAP Fiori transactional app
 How to extend an SAP Fiori transactional app
Week 2: Design Your First SAP Fiori App
 How to develop an SAP Fiori transactional app
Approach for the next 9 weeks Week 3: Create Your First SAP Fiori App
 Videos and self-tests Week 4: Enhance an SAP Fiori App Master
 Weekly assignments Detail App
 Final assignment and final exam
Week 5: Extend SAP Fiori Apps
 Online forum
 Record of achievement
Week 6: Build Your Own SAP Fiori App
 Enter to win a MacBook Air
 ½ day of effort expected each week
Week 7-9: Final Assignment & Final Exam
© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Requirements and Prerequisites
 Requirements
– Basic understanding of how
business processes are typically
depicted in an SAP system
– Basic programming skills including
HTML and JavaScript
 Recommended (but not required)

– openSAP course Introduction to SAP
Fiori UX

Why User Experience (UX) Matters
Gain productivity
Increase user adoption
Decrease user errors
Save training costs

SAP’s Approach to UX

SAP’s Unified Cloud Experience

SAP’s Unified User Experience

Innovation and Design Thinking

SAP’s Commitment

Thank you
Contact information:
open@sap.com
© 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 affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
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 any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company 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.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

SAP Fiori UX
Introduction to SAP Fiori UX
What Is SAP Fiori UX?
SAP Fiori UX is the new face of SAP

to business users for ALL lines of business
across devices and deployment options

Paradigm Shift: Designed for You, Your Needs, and How You Work
Functional-based applications
Disaggregate apps for each role into granular, relevant tasks and activities

Paradigm Shift: User Activity in End-to-End Business Processes
Employee
Create Sales Create Sales Purchase Create Leave

Internal ATP Check Post Invoice
Quotation Order Material Request
Sales Rep
AR Accountant Credit Check
Warehouse Post Goods Create Post Goods

Worker Receipt Delivery Issue
Clear
Billing Admin
Incoming
Payment

Paradigm Shift: Coherent Across Functional Areas
Human
Finance Resources CRM Procurement
Provides only on the

relevant tasks and
activities for an end user

SAP Fiori Principles
Role-based Responsive Simple Coherent Delightful
Designed for you, Supports how Focuses on Provides one Makes an

your needs, and and where you what’s fluid, intuitive emotional
how you work work, at any important experience connection
time

SAP Fiori App Types
Transactional Analytical Fact Sheet
Task-based Access Insight to Action Search and Explore

Access to tasks like change, create, or Visual overview of a complex topic for View of essential information about an
entire processes with guided navigation monitoring or tracking purposes object and contextual navigation between
related objects
Runs on
SAP HANA Runs on SAP HANA
and any DB

SAP Fiori Launchpad – One Entry Point for the User
Search across and

Role-based with one within apps to get
common role immediate answers
definition
Color coding alerts
user to any overdue,
new, or immediate
actions
News and feeds to
enhance
SAP Jam integrated to
collaboration
provide instant feedback
on notifications and
group activity
Group tiles for Dynamic charts to

personalized provide high level,
content organization real-time overview

Simple, Delightful, and Intuitive User Experience
Launched Master List Detail Page/List Line Item/Detail

First Page Second Page Third Page Fourth Page
Launched Master List Detail Page/List Line Item/Detail

First Page Second Page Third Page Fourth Page

Customizable and Extensible UX
Theming
Dev. Tools

Unified Experience Across Different Device Types

Summary
Concept
Role-based Responsive Simple Coherent Delightful
Design Technology
Information Interaction User Interface
Visual Design
Architecture Patterns
Business Logic

Thank you
open@sap.com

Week 1 Unit 3: SAP Fiori Design Inspiration
From Skeuomorphism to a Flat World
SAP Fiori Design Inspiration
No Added Effects

No Added Effects

Simple Elements

Typography

Use of Colors

Minimalistic

Attention Span
9 sec 8 sec

A USER
INTERFACE
IS LIKE A JOKE.
IF YOU HAVE TO
EXPLAIN IT, IT’S
NOT THAT
GOOD
Thank you
open@sap.com
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 affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark
information and notices.
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company 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.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or
release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for
any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-

Week 1 Unit 4: SAP Fiori Tools and Resources
SAP Fiori Tools and Resources
Key Takeaway on UX Technologies
Choosing the right tool or

technology is one important step.
However, in order to achieve a

high level of user experience, it is
neither the first nor the most
important step.

SAP Fiori Apps Reference Library
http://www.sap.com/fiori-apps-library
Extensibility information
per app
Extension points
Technical
documentation
& much more…

SAP UI Theme Designer
Technology specific theme
properties
One tool for SAPs key user Add Preview
Page
interfaces
› Corporate identity compliance
› Increased theming efficiency
› Low TCO through Cloud option Load preview
controls
› Quick, expert and pure CSS mode
Key capabilities
› Browser-based WYSIWYG editor for
controls and applications
› Multi-Level approach: Quick, expert, CSS
Basic cross-technology
› Support cross-technology theming Preview options („Quick
Theming“)
https://themedesigner.hanatrial.ondemand.com/
Apply Your Brand – UI Theme Designer

SAP Fiori Communities
• SAP UX - SAP Fiori Community: http://scn.sap.com/docs/DOC-61694

• SAP Fiori - Learning Community: http://scn.sap.com/docs/DOC-53241
• SAP Web IDE - Enablement: http://scn.sap.com/docs/DOC-55465
• SAP User Experience RDS Community: http://scn.sap.com/community/ux-rds
User Interface https://sapui5.netweaver.ondemand.com/sdk/content/Overview.html
Business Logic https://sapui5.netweaver.ondemand.com/sdk/explored.html

Realize
Innovation Made Simple with SAP Rapid Deployment Solutions
SAP Fiori Apps RDS SAP Fiori Design RDS Benefits of

UX Rapid-Deployment
Deploy and Configure Fiori Apps Design and Create Fiori Apps Solutions
http://service.sap.com/rds-fiori-apps http://service.sap.com/rds-ui-sapui5
 Fast – no need for lengthy
blueprinting process
SAP Mobile Platform RDS SAP Mobile Secure RDS  Predictable – predictable
scope, timeline, and outcome
Enhance and Mobilize Fiori Apps Secure and Monitor Fiori Apps
http://service.sap.com/public/rds-sup http://service.sap.com/rds-mobilesecure  Seamless – integrate with
existing SAP on-premise,
cloud, or hybrid solutions
SAP Screen Personas RDS

 Simple – easily expand
functionality as needs change
Productivity via Personalization
http://service.sap.com/rds-ui-personas

Thank you
open@sap.com

SAPUI5 and OData
Introduction to SAPUI5 and OData
What Is the Open Data Protocol (OData)?
 OData is an open standard originally developed by

Microsoft, but now managed by Oasis. SAP Annotations
 It is based on the Atom Publishing and Atom Syndication
standards, which in turn are based on XML and HTTP(S). OData
 Provide a vendor-neutral, Web-based API that fully Atom
complies with the design principles of representational state Publishing
transfer (REST). Atom

JSON
 OData is also extensible. This allows SAP to supplement Syndication
the data types to support the ABAP Dictionary. XML
HTTP(S)
OData URL structure:
http://services.odata.org/OData/OData.svc/Category(1)/Products?$top=2
Service root URI Resource path Query options
What Does OData Add to Atom?
 The Atom Publishing Format does not specify how data

should be encoded within a feed, so messages are not
self-describing.
SAP Annotations
 OData extends Atom by providing message metadata OData
Atom
 OData provides definitions for: Publishing
• Simple types
Atom
• Complex types JSON Syndication
• Associations between entries

XML
• Navigation paths between entries
• Custom behavior beyond the standard QUERY, CREATE, HTTP(S)
READ, UPDATE, DELETE (QCRUD) operations

Consumption of ODATA resources
GET http://services.odata.org/v4/TripPinServiceRW/People HTTP/1.1
OData-Version: 4.0
OData-MaxVersion: 4.0

Output Formats Supported by OData
JSON (JavaScript Object Notation) XML / ATOM

Obtaining OData Metadata
In order to consume an OData service, one should retrieve the metadata that describes the service.
This is done by adding the suffix $metadata to the Service Document URL. (OData metadata is
only available in XML format, not JSON)
http://services.odata.org/OData/OData.svc/$metadata
This will now return an Entity Data Model (edmx) XML description of the service:

OData Query String Options
When accessing an OData service, system query options are used to influence the returned entries.
Parameter Description Example

$orderby Orders entries by the entity supplied /Products?$orderby=Rating,desc
$top accessingSelects
When only theservice,
an OData first N items
youin acan
collection /Products?$top=5
supply some system query options to influence the
returned entries.
$skip selects entries starting by N+1 /Products?$skip=2
$filter filters entries based on the criteria /Suppliers?$filter=Address/City

eq 'Redmond'
$expand expanded Entries are eagerly loaded and /Categories?$expand=Products
presented inline
$format defines the format that the server must return /Products?$format=json
$select returns the subset of the specified properties /Products?$select=Price,Name

What Is SAPUI5?
SAPUI5 is a client-side HTML5 and JavaScript-based rendering library

and programming model that is optimized for consumption of SAP data
 Well-designed API, easy to consume and use

 Extensible UI component model, including tooling support
 High performance, SAP product standard-compliant
 Powerful theming support based on CSS
 Provides Ajax capabilities
 Based on open standards like OpenAjax, JavaScript, CSS, HTML 5, and so on
 Using and including the popular jQuery library

SAPUI5 Architecture: Overview

SAPUI5 Architecture: sap.ui namespace
SAPUI5 provides a set of JavaScript and CSS libraries as well as a mobile library. Different libraries can be used
in one application
Core Controls
sap.ui.m sap.ui.core The SAPUI5 Core Runtime. Also Contains the UI5 jQuery
sap.ui.core plugin (jQuery.sap.*), the Core and all its components, base classes
sap.ui.base for Controls and the Model View Controller components.
sap.ui.model sap.ui.base SAPUI5 base classes
sap.ui.commons sap.ui.model The SAPUI5 Data Binding API
sap.ui.layout
sap.m: Controls designed for mobile devices and tablets.
Can also be used for desktop
sap.ui.table sap.ui.commons: SAPUI5 library with most common controls.
jQuery sap.ui.layout: Library with layout controls.
Can be combined with all other libraries
data.js sap.ui.ux3 sap.ui.table: SAPUI5 library with table controls.

UI5 Control Libraries
sap.ui.table sap.ui.commons
Includes the Table control Includes “bread and butter" controls like TextField, Button

sap.ui.core.IconPool

Basic Model-View-Controller Concept
SAPUI5 provides an implementation of the MVC design pattern

 Model: Manages the application data
• sap.ui.model.odata.ODataModel
• sap.ui.model.json.JSONModel
• sap.ui.model.resource.ResourceModel
• sap.ui.model.xml.XMLModel
 View: Defines and renders the UI
• sap.ui.core.mvc.ViewType.XML
• sap.ui.core.mvc.ViewType.HTML
• sap.ui.core.mvc.ViewType.JS
• sap.ui.core.mvc.ViewType.JSON
• sap.ui.core.mvc.ViewType.Template
 Controller: Modifies the view and model
• reacts to user interactions
• separates the view logic from the model logic
• can also be used by multiple views

View and Controller
In this example, the JavaScript view controller uses a view defined in XML. The controller
implements a mandatory onInit() method and a sayHello() method.
// Declare a controller for handling an Address
sap.ui.controller("sap.hcm.Address", {
onInit : function() { this.counter = 0; },
sayHello: function() { alert("Said hello " + this.counter++ + " times."); }
});
sap.ui.xmlview("sap.hcm.Address").placeAt("uiArea");
The view then implements a button on which is the text "Say Hello" and that when pressed, will
invoke the sayHello() method.
<core:View xmlns:core="sap.ui.core" xmlns="sap.ui.commons" controller="sap.hcm.Address">
<Panel>
<Button press="sayHello" text="Say Hello" />
</Panel>
</core:View>

UI5 Data Binding
In UI5, DATA BINDING is used to bind UI5 controls to a With TWO-WAY-BINDING the model data is updated
data source that holds the data used in the application, so whenever the value of a bound control changes, e.g. through
that the controls are updated automatically whenever the user input.
model data is changed.
Model data UI5 Control / Output Model data UI5 Control / Output
John Doe John Doe, 35 John Doe John Doe, 35

Age: 35 Age: 35
Model data Resulting Resulting UI5 Control / Output

has been updated UI5 Control / Output Model data has been updated
John Doe John Doe

John Doe, 36 John Doe, 36
Age: 36 Age: 36

Structure of an SAP Fiori Application

Thank you
open@sap.com
© 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 affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company 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.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

SAP UX Strategy: Week 1 Unit 1: Introduction To

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SAP UX Strategy: Week 1 Unit 1: Introduction To

Transféré par

Droits d'auteur :

Formats disponibles

Week 1 Unit 1: Introduction to

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

 Recommended (but not required)

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

Increase user adoption

Decrease user errors

Save training costs

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

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

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

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

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

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

National product specifications may vary.

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

SAP Fiori UX is the new face of SAP

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

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

Create Sales Create Sales Purchase Create Leave

AR Accountant Credit Check

Warehouse Post Goods Create Post Goods

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

Provides only on the

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

Role-based Responsive Simple Coherent Delightful

Designed for you, Supports how Focuses on Provides one Makes an

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

Transactional Analytical Fact Sheet

Task-based Access Insight to Action Search and Explore

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

Search across and

Group tiles for Dynamic charts to

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

Launched Master List Detail Page/List Line Item/Detail

Launched Master List Detail Page/List Line Item/Detail

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

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

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

Role-based Responsive Simple Coherent Delightful

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

National product specifications may vary.

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

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 8

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 9

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 10

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 11

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 12

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 13

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 14

National product specifications may vary.

© 2014 SAP SE or an SAP affiliate company. All rights reserved. Public 17

Choosing the right tool or

However, in order to achieve a

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

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

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

• SAP UX - SAP Fiori Community: http://scn.sap.com/docs/DOC-61694

User Interface https://sapui5.netweaver.ondemand.com/sdk/content/Overview.html

Business Logic https://sapui5.netweaver.ondemand.com/sdk/explored.html

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

SAP Fiori Apps RDS SAP Fiori Design RDS Benefits of

SAP Screen Personas RDS

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