OpenSAP Fiux1 Get to Know SAP Fiori Ww

Week 1 Unit 1: Introduction to

SAP UX Strategy

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

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

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

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


Introduction to SAP UX Strategy 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


Introduction to SAP UX Strategy Why User Experience (UX) Matters

Gain productivity

Increase user adoption

Decrease user errors

Save training costs


Introduction to SAP UX Strategy SAP’s Approach to UX


Introduction to SAP UX Strategy SAP’s Unified Cloud Experience


Introduction to SAP UX Strategy SAP’s Unified User Experience


Introduction to SAP UX Strategy Innovation and Design Thinking


Introduction to SAP UX Strategy SAP’s Commitment

Thank you

Contact information:

[email protected]


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

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




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


Introduction to SAP Fiori UX 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


Create Sales

Quotation

Create Sales

Order

Credit Check

Purchase

Material

Post Goods

Receipt

Create

Delivery

Clear

Incoming

Payment

Post Invoice Internal

Sales Rep

AR Accountant

Warehouse

Worker

Billing Admin

ATP Check

Post Goods

Issue

Create Leave

Request

Employee

Introduction to SAP Fiori UX Paradigm Shift: User Activity in End-to-End Business Processes


Provides only on the

relevant tasks and

activities for an end user

Finance Human

Resources CRM Procurement

Introduction to SAP Fiori UX Paradigm Shift: Coherent Across Functional Areas


Introduction to SAP Fiori UX SAP Fiori Principles

Supports how

and where you

work, at any

time

Provides one

fluid, intuitive

experience

Makes an

emotional

connection

Designed for you,

your needs, and

how you work

Focuses on

what’s

important

Responsive Simple Coherent Delightful Role-based


Introduction to SAP Fiori UX SAP Fiori App Types

Transactional

Insight to Action

Visual overview of a complex topic for

monitoring or tracking purposes

Search and Explore

View of essential information about an

object and contextual navigation between

related objects

Analytical Fact Sheet

Task-based Access

Access to tasks like change, create, or

entire processes with guided navigation

Runs on

SAP HANA

and any DB

Runs on SAP HANA


Introduction to SAP Fiori UX SAP Fiori Launchpad – One Entry Point for the User

Search across and

within apps to get

immediate answers

Role-based with one

common role

definition

Group tiles for

personalized

content organization

News and feeds to

enhance

collaboration

Color coding alerts

user to any overdue,

new, or immediate

actions

Dynamic charts to

provide high level,

real-time overview

SAP Jam integrated to

provide instant feedback

on notifications and

group activity


Introduction to SAP Fiori UX Simple, Delightful, and Intuitive User Experience

Launched

First Page

Launched

First Page

Detail Page/List

Third Page

Detail Page/List

Third Page

Master List

Second Page

Master List

Second Page

Line Item/Detail

Fourth Page

Line Item/Detail

Fourth Page


Introduction to SAP Fiori UX Customizable and Extensible UX

Theming

Dev. Tools


Introduction to SAP Fiori UX Unified Experience Across Different Device Types


Concept

Role-based Simple Responsive Coherent Delightful

Technology Design

Information

Architecture Visual Design

Interaction

Patterns

User Interface

Business Logic

Introduction to SAP Fiori UX Summary

Thank you


[email protected]

Week 1 Unit 3: SAP Fiori Design Inspiration

From Skeuomorphism to a Flat World


SAP Fiori Design Inspiration No Added Effects


SAP Fiori Design Inspiration Simple Elements


SAP Fiori Design Inspiration Typography


SAP Fiori Design Inspiration Use of Colors


SAP Fiori Design Inspiration Minimalistic


8 sec 9 sec

SAP Fiori Design Inspiration Attention Span


A USER

INTERFACE

IS LIKE A JOKE.

IF YOU HAVE TO

EXPLAIN IT, IT’S

NOT THAT

GOOD

Thank you


[email protected]



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 Tools and Resources SAP Fiori Apps Reference Library

http://www.sap.com/fiori-apps-library

Extensibility information

per app

Extension points

Technical

documentation

& much more…








SAP Fiori Tools and Resources 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

Key capabilities

› Browser-based WYSIWYG editor for controls and applications

› Multi-Level approach: Quick, expert, CSS

› Support cross-technology theming

Basic cross-technology options („Quick

Theming“)

Technology specific theme properties

Load preview controls

Preview

Add Preview Page

https://themedesigner.hanatrial.ondemand.com/




SAP Fiori Tools and Resources Apply Your Brand – UI Theme Designer


SAP Fiori Tools and Resources SAP Fiori Communities

User Interface

Business Logic

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

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

• 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





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












http://scn.sap.com/community/ux-rds





Realize

Benefits of

UX Rapid-Deployment

Solutions

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

SAP Screen Personas RDS

SAP Fiori Design RDS

Design and Create Fiori Apps http://service.sap.com/rds-ui-sapui5

SAP Fiori Apps RDS

Deploy and Configure Fiori Apps http://service.sap.com/rds-fiori-apps

SAP Mobile Secure RDS

Secure and Monitor Fiori Apps

http://service.sap.com/rds-mobilesecure

SAP Mobile Platform RDS

Enhance and Mobilize Fiori Apps

http://service.sap.com/public/rds-sup

SAP Fiori Tools and Resources Innovation Made Simple with SAP Rapid Deployment Solutions

Productivity via Personalization http://service.sap.com/rds-ui-personas

http://service.sap.com/rds-ui-sapui5





http://service.sap.com/rds-fiori-apps












http://service.sap.com/rds-ui-personas






Thank you


[email protected]


SAPUI5 and OData


Introduction to SAPUI5 and OData What Is the Open Data Protocol (OData)?

SAP Annotations

OData

Atom

Syndication JSON

HTTP(S)

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.

Atom

Publishing

XML

OData URL structure:

http://services.odata.org/OData/OData.svc/Category(1)/Products?$top=2

Service root URI Resource path Query options

https://www.oasis-open.org/committees/tc_home.php?wg_abbrev=odata


Introduction to SAPUI5 and OData 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

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

SAP Annotations

HTTP(S)

XML

JSON Atom

Syndication

Atom

Publishing

JSON

OData


Introduction to SAPUI5 and OData Consumption of ODATA resources

GET http://services.odata.org/v4/TripPinServiceRW/People HTTP/1.1

OData-Version: 4.0

OData-MaxVersion: 4.0


Introduction to SAPUI5 and OData Output Formats Supported by OData

XML / ATOM JSON (JavaScript Object Notation)


Introduction to SAPUI5 and OData 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:


Introduction to SAPUI5 and OData OData Query String Options

When accessing an OData service, you can supply some system query options to influence the

returned entries.

Parameter Description Example

$orderby Orders entries by the entity supplied /Products?$orderby=Rating,desc

$top Selects only the first N items in a collection /Products?$top=5

$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

When accessing an OData service, system query options are used to influence the returned entries.


Introduction to SAPUI5 and OData 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


Introduction to SAPUI5 and OData SAPUI5 Architecture: Overview


Introduction to SAPUI5 and OData SAPUI5 Architecture: sap.ui namespace

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.base SAPUI5 base classes

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

sap.ui.table: SAPUI5 library with table controls.

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

sap.ui.table

sap.ui.ux3

jQuery

data.js

sap.ui.core

sap.ui.base

sap.ui.model

sap.ui.m

sap.ui.commons


Introduction to SAPUI5 and OData UI5 Control Libraries

sap.ui.commons Includes “bread and butter" controls like TextField, Button

sap.ui.table Includes the Table control

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/3529


Introduction to SAPUI5 and OData sap.ui.core.IconPool


Introduction to SAPUI5 and OData 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


Introduction to SAPUI5 and OData View and Controller

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

// 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");

In this example, the JavaScript view controller uses a view defined in XML. The controller

implements a mandatory onInit() method and a sayHello() method.

The view then implements a button on which is the text "Say Hello" and that when pressed, will

invoke the sayHello() method.


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.

With TWO-WAY-BINDING the model data is updated

whenever the value of a bound control changes, e.g. through

user input.

Model data

Model data

has been updated

John Doe

Age: 35

John Doe

Age: 36

UI5 Control / Output

John Doe, 35

Resulting


John Doe, 36

Model data

Resulting

Model data

John Doe

Age: 35

John Doe

Age: 36


John Doe, 35


has been updated

John Doe, 36


Introduction to SAPUI5 and OData Structure of an SAP Fiori Application

Thank you


[email protected]


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




OpenSAP Fiux1 Get to Know SAP Fiori Ww

Documents

Transcript of OpenSAP Fiux1 Get to Know SAP Fiori Ww