OpenSAP Fiux1 Get To Know SAP Fiori WW

Week 1 Unit 1: Introduction to
SAP UX Strategy
Introduction to SAP UX Strategy

Course Structure and Objectives
Focus for the next 9 weeks
How to design an SAP Fiori transactional app
How to extend an SAP Fiori transactional app
How to develop an SAP Fiori transactional app
Approach for the next 9 weeks

Videos and self-tests
Weekly assignments
Final assignment and final exam
Online forum
Record of achievement
Enter to win a MacBook Air
day of effort expected each week
2015 SAP SE or an SAP affiliate company. All rights reserved.
Week 1: Get to Know SAP Fiori UX

Week 2: Design Your First SAP Fiori App
Week 3: Create Your First SAP Fiori App
Week 4: Enhance an SAP Fiori App Master
Detail App
Week 5: Extend SAP Fiori Apps
Week 6: Build Your Own SAP Fiori App

Week 7-9: Final Assignment & Final Exam
Public

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
Public

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

SAPs Approach to UX
Public

SAPs Unified Cloud Experience
Public

SAPs Unified User Experience
Public

Innovation and Design Thinking
Public

SAPs Commitment
Public
Thank you
Contact information:
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.
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 SEs 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 forwardlooking 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.
Public
11

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
Public

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
Public

Paradigm Shift: User Activity in End-to-End Business Processes
Employee
Internal
Sales Rep
Create Sales
Quotation
Create Sales
Order
AR Accountant
Warehouse
Worker
Billing Admin
ATP Check
Purchase
Material
Post Invoice
Create Leave
Request
Credit Check
Post Goods
Receipt
Create
Delivery
Post Goods
Issue
Clear
Incoming
Payment
Public

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

relevant tasks and
activities for an end user
Public

SAP Fiori Principles
Role-based
Designed for you,

your needs, and
how you work
Responsive
Supports how
and where you
work, at any
time
Simple
Coherent
Focuses on
whats
important
Provides one
fluid, intuitive
experience
Delightful
Makes an
emotional
connection
Public

SAP Fiori App Types
Transactional
Analytical
Fact Sheet
Task-based Access
Insight to Action
Search and Explore
Access to tasks like change, create, or

entire processes with guided navigation
Visual overview of a complex topic for

monitoring or tracking purposes
View of essential information about an

object and contextual navigation between
related objects
Runs on
SAP HANA
and any DB
Runs on SAP HANA
Public

SAP Fiori Launchpad One Entry Point for the User
Role-based with one
common role
definition
Search across and

within apps to get
immediate answers
Color coding alerts
user to any overdue,
new, or immediate
actions
News and feeds to

enhance
collaboration
Group tiles for

personalized
content organization
SAP Jam integrated to

provide instant feedback
on notifications and
group activity
Dynamic charts to
provide high level,
real-time overview
Public

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
Public

Customizable and Extensible UX
Theming
Dev. Tools
Public
10

Unified Experience Across Different Device Types
Public
11

Summary
Concept
Role-based
Design
Visual Design
Information
Architecture
Responsive
Simple
Coherent
Delightful
Technology
Interaction
Patterns
User Interface
Business Logic
Public
12
Thank you
open@sap.com

Public
14
Week 1 Unit 3: SAP Fiori Design Inspiration

From Skeuomorphism to a Flat World
Public
Public
Public
Public
Public
Public
SAP Fiori Design Inspiration

No Added Effects
Public

No Added Effects
Public

Simple Elements
Public
10

Typography
Public
11

Use of Colors
Public
12

Minimalistic
Public
13

Attention Span
9 sec
8 sec
Public
14
A USER
INTERFACE
IS LIKE A JOKE.
IF YOU HAVE TO
EXPLAIN IT, ITS
NOT THAT
GOOD
Public
15
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 SEs 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 forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
Public
17
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.
Public

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

SAP UI Theme Designer
One tool for SAPs key user
interfaces
Corporate identity compliance
Increased theming efficiency
Low TCO through Cloud option
Quick, expert and pure CSS mode
Technology specific theme

properties
Add Preview
Page
Load preview
controls
Key capabilities
Browser-based WYSIWYG editor for

controls and applications
Multi-Level approach: Quick, expert, CSS

Support cross-technology theming
Preview
Basic cross-technology
options (Quick
Theming)
https://themedesigner.hanatrial.ondemand.com/
Public

Apply Your Brand UI Theme Designer
Public

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
Public

Realize
Innovation
Made Simple with SAP Rapid Deployment Solutions
SAP Fiori Design RDS
Benefits of
Deploy and Configure Fiori Apps
Design and Create Fiori Apps
UX Rapid-Deployment
Solutions
http://service.sap.com/rds-fiori-apps
http://service.sap.com/rds-ui-sapui5
SAP Mobile Platform RDS
SAP Mobile Secure RDS
SAP Fiori Apps RDS
Enhance and Mobilize Fiori Apps
Secure and Monitor Fiori Apps
http://service.sap.com/public/rds-sup
http://service.sap.com/rds-mobilesecure
SAP Screen Personas RDS
Fast no need for lengthy

blueprinting process
Predictable predictable
scope, timeline, and outcome
Seamless integrate with
existing SAP on-premise,
cloud, or hybrid solutions
Simple easily expand
functionality as needs change
Productivity via Personalization

http://service.sap.com/rds-ui-personas
Public
Thank you
open@sap.com

Public

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.
It is based on the Atom Publishing and Atom Syndication
standards, which in turn are based on XML and HTTP(S).
Provide a vendor-neutral, Web-based API that fully
complies with the design principles of representational state
transfer (REST).
OData is also extensible. This allows SAP to supplement
the data types to support the ABAP Dictionary.
SAP Annotations
OData
Atom
Publishing
Atom
Syndication
JSON
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
Public

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.
OData extends Atom by providing message metadata
SAP Annotations
OData
Atom
Publishing
OData provides definitions for:
Simple types
Complex types
Associations between entries
Navigation paths between entries
Custom behavior beyond the standard QUERY, CREATE,
READ, UPDATE, DELETE (QCRUD) operations
JSON
Atom
Syndication
XML
HTTP(S)
Public

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

Output Formats Supported by OData
JSON (JavaScript Object Notation)

XML / ATOM
Public

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:
Public

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
only theservice,
first N items
in acan
collection
/Products?$top=5
$top accessingSelects
When
an OData
you
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

presented inline
/Categories?$expand=Products
$format
defines the format that the server must return
/Products?$format=json
$select
returns the subset of the specified properties
/Products?$select=Price,Name
Public

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
Public

SAPUI5 Architecture: Overview
Public

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
sap.ui.core
sap.ui.base
sap.ui.model
Controls
sap.ui.m
sap.ui.base SAPUI5 base classes
sap.ui.commons
sap.ui.layout
sap.ui.table
sap.ui.model The SAPUI5 Data Binding API
sap.m: Controls designed for mobile devices and tablets.

Can also be used for desktop
sap.ui.commons: SAPUI5 library with most common controls.
sap.ui.layout: Library with layout controls.
Can be combined with all other libraries
jQuery
data.js
sap.ui.core The SAPUI5 Core Runtime. Also Contains the UI5 jQuery
plugin (jQuery.sap.*), the Core and all its components, base classes
for Controls and the Model View Controller components.
sap.ui.ux3
sap.ui.table: SAPUI5 library with table controls.

Public
10

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

sap.ui.core.IconPool
Public
12

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
Public
13

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>
Public
14
UI5 Data Binding

In UI5, DATA BINDING is used to bind UI5 controls to a
data source that holds the data used in the application, so
that the controls are updated automatically whenever the
model data is changed.
Model data
John Doe
UI5 Control / Output
John Doe, 35
Age: 35
Model data
has been updated
John Doe
With TWO-WAY-BINDING the model data is updated

whenever the value of a bound control changes, e.g. through
user input.
Model data
John Doe
John Doe, 35
Age: 35
Resulting
John Doe, 36
Age: 36
Resulting
Model data
John Doe

has been updated
John Doe, 36
Age: 36
Public
15

Structure of an SAP Fiori Application
Public
16
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 SEs 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.
Public
18

OpenSAP Fiux1 Get To Know SAP Fiori WW

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

OpenSAP Fiux1 Get To Know SAP Fiori WW

Transféré par

Droits d'auteur :

Formats disponibles

Week 1 Unit 1: Introduction to

Introduction to SAP UX Strategy

Approach for the next 9 weeks

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

Week 1: Get to Know SAP Fiori UX

Week 6: Build Your Own SAP Fiori App

Introduction to SAP UX Strategy

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

Introduction to SAP UX Strategy

Save training costs

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

Introduction to SAP UX Strategy

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

Introduction to SAP UX Strategy

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

Introduction to SAP UX Strategy

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

Introduction to SAP UX Strategy

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

Introduction to SAP UX Strategy

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

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

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

Week 1 Unit 2: Introduction to

Introduction to SAP Fiori UX

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

Introduction to SAP Fiori UX

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

Introduction to SAP Fiori UX

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

Introduction to SAP Fiori UX

Provides only on the

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

Introduction to SAP Fiori UX

Designed for you,

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

Introduction to SAP Fiori UX

Search and Explore

Access to tasks like change, create, or

Visual overview of a complex topic for

View of essential information about an

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

Runs on SAP HANA

Introduction to SAP Fiori UX

Search across and

News and feeds to

Group tiles for

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

SAP Jam integrated to

Introduction to SAP Fiori UX

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

Introduction to SAP Fiori UX

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

Introduction to SAP Fiori UX

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

Introduction to SAP Fiori UX

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

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

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

Week 1 Unit 3: SAP Fiori Design Inspiration

2014 SAP SE or an SAP affiliate company. All rights reserved.

2014 SAP SE or an SAP affiliate company. All rights reserved.

2014 SAP SE or an SAP affiliate company. All rights reserved.