SAP Fiori

By Viral Sakhalkar

For internal use

Agenda
Day 1 21st April,2015
Introduction to SAP Fiori UX
Overview and Introduction of Fiori Applications
Overview of Netweaver Gateway Odata Services
Basics of SAPUI5
Fiori Architecture
Fiori Installation
Fiori Configuration
Launchpad Overview
Q&A

Agenda
Day 2 22nd April,2015
Step by step Fiori configuration on Demo system ( Case Studies)
Theme Designer
Extensibility of Fiori Application
Addition of Custom Approval Workflow
Demos and Videos
Important links and sites
Q&A
Day 3 23rd April,2015
Custom Fiori Application
Odata service creation
SAPUI5 code development
Launchpad Configuration
Debugging
Q&A

Introduction to SAP Fiori UX

Introduction to SAP Fiori UX

Why User Experience (UX) Matters

Introduction to SAP Fiori UX

What Is SAP Fiori UX?

Introduction to SAP Fiori UX

Paradigm Shift: Designed for You, Your Needs, and How You Work

Introduction to SAP Fiori UX

Paradigm Shift: User Activity in End-to-End Business Processes

Introduction to SAP Fiori UX

Paradigm Shift: Coherent Across Functional Areas

Introduction to SAP Fiori UX

Design Inspiration
Skeuomorphic Design

10

Flat Design

Introduction to SAP Fiori UX

Design Inspiration

11

No Added Effects
Simple Elements
Use of colors
Minimalistic

Overview and Introduction of Fiori Application

12

Overview of SAP Fiori

13

Overview of SAP Fiori

14

Overview of SAP Fiori

Consumer user experience is the new standard for enterprise applications, but most users
still experience SAP through SAP GUI.
The goal of SAP Fiori is to provide immediate impact by renewing the user experience of
the most broadly and frequently used SAP software functions that can be accessed from
mobile and desktop devices.
SAP Fiori is a collection of simple and easy to use apps for broadly and frequently used SAP
software functions that work seamlessly across devices desktop, tablet, or smartphone.
SAP Fiori applications leverage SAP UI5 (with its mobile library, responsive layouts and the

Productivity Services for SAPUI5) and SAP NetWeaver Gateway.

There are 500+ apps that are delivered in the recent release of Fiori

15

Overview of SAP Fiori

Types of Applications

16

Overview of SAP Fiori

SAP Fiori Launchpad One Entry Point for the User

17

Overview of SAP Fiori

Simple, Delightful, and Intuitive User Experience

18

Overview of SAP Fiori

Customizable and Extensible UX

19

Overview of SAP Fiori

Benefits Across the Enterprise

20

Overview of SAP Fiori

Benefits Across the Enterprise

21

Overview of SAP Fiori

Homepage

22

Overview of SAP Fiori

Timesheet

23

Overview of SAP Fiori

My Paystubs

24

Overview of SAP Fiori

Track Sales Order

25

System Landscape

26

Overview of Netweaver Gateway Odata Services

27

SAP Netweaver Gateway

Moving Away From Point-to-point Solutions

28

SAP Netweaver Gateway

One Data Model One API Multiple End-user Experiences
SAP NetWeaver Gateway is a technology that provides a simple way to connect devices, environments and
platforms to SAP software based on market standards.

It offers connectivity to SAP applications using any programming language or model without the need for
SAP knowledge by leveraging REST services and OData/ATOM protocols

29

SAP Netweaver Gateway

Which Prerequisites Your System Needs to Fulfill

30

SAP Netweaver Gateway

The Three Deployment Options

31

SAP Netweaver Gateway

Hub Deployment with Service Development in the SAP Business Suite Backend

32

SAP Netweaver Gateway

Hub Deployment with Service Development in the SAP Gateway Hub

33

SAP Netweaver Gateway

Hub Deployment with Service Development in the SAP Gateway Hub

34

SAP Netweaver Gateway

What is the Open Data Protocol (OData)

35

SAP Netweaver Gateway

What Does OData Add to Atom?

36

SAP Netweaver Gateway

Output Formats Supported by OData

37

SAP Netweaver Gateway

Consumption of ODATA resources

38

SAP Netweaver Gateway

Obtaining OData Metadata

39

SAP Netweaver Gateway

HTTP Request OData Operation ABAP Method

40

Basics of SAPUI5

41

Basic of SAPUI5
Introduction to SAPUI5

42

Basics of SAPUI5
SAPUI5 - Powerful Theming & Branding
Easily customizable Themes
Browser-based Theme Designer
Allows change of themes for customer branding in an effective manner

43

Basics of SAPUI5

44

Basics of SAPUI5
SAPUI5 Architecture: Overview

45

Basics of SAPUI5
SAPUI5 Architecture: sap.ui namespace

46

Basics of SAPUI5
UI5 Control Libraries

47

Basics of SAPUI5
Basic Model-View-Controller Concept

48

Basics of SAPUI5
UI5 Data Binding

49

Basics of SAPUI5
Structure of an SAP Fiori Application

50

SAP Fiori Architecture

51

SAP Fiori Architecture

52

SAP Fiori Architecture

Transactional Apps (AT1)

53

SAP Fiori Architecture

Analytical Apps (AT2)

54

SAP Fiori Architecture

Detailed Search and FIORI Fact Sheets(AT3)

55

Architecture

56

Architecture
Application delivery Pair components

57

Architecture
SAP Fiori Apps UI Add-on detail

58

Architecture
Backend integration add-on details

59

Implementation Flow

60

Fiori Installation

61

Fiori Installation
Check current system landscape
NetWeaver Gateway deployment option
Install NetWeaver Gateway
Install NetWeaver UI Add-on
Install Fiori Apps
Apply SAP Notes

62

Fiori Installation
Check current system landscape

63

Fiori Installation
Minimal stack definition
Detailed pre-requisites are available in the Installation Guide

64

Fiori Installation
Validating the Prerequisites
Detailed pre-requisites are available in the Installation Guide

65

Fiori Installation
Netweaver Gateway Deployment Options

66

Fiori Installation
What You Need to Deploy in the Frontend

67

Fiori Installation
Back-End Server Components Installation

68

Fiori Installation
Which Tools to Use

69

Fiori Installation
Install SAP Fiori apps

70

Fiori Installation
SAP Notes Release Notes for Fiori Apps

71

Fiori Configuration

72

Fiori Configuration
Before starting configuration
Configuration on ERP and SRM server
Configuration on Gateway server
Service registration
App specific settings
User Management

73

Fiori Configuration
Before starting configuration

74

Fiori Configuration
Configuration Building Blocks

75

Fiori Configuration
Connection Settings on the Backend System [ERP]

76

Fiori Configuration
Connection Settings: SAP NetWeaver Gateway to SAP Systems

77

Fiori Configuration
Connection Settings: SAP NetWeaver Gateway to SAP Systems

78

Fiori Configuration
Register services /IWFND/maint_service [GW]

79

Fiori Configuration
User and Role/Authorization

80

Fiori Configuration
Launchpad URL

81

Launchpad Overview

82

Launchpad Overview
With the launch of Fiori wave 2 and all the new apps, SAP has also come up with
Fiori Launchpad. Its the new entry point to all your Fiori apps.
To access Launchpad r use following link. :

83

Launchpad Overview
The Launchpad still has the original tiles feature in it. What it enhances is the
level of Personalization.
It allows you to create catalogs and groups for your homepage
Groups: Are predefined application categorized together. We can enter different tiles to a
group from a catalog. These groups can be assigned to PFCG roles,these roles are in turn
assigned to users.
Catalog: It defines the set of all tiles that users can use to personalize the home page.

The apps need to be configured and we need to add valid roles and registered
correctly in transaction LPD_CUST entries on the gateway system.
Launchpad Designer
Launchpad Designer can be used to configure your catalogs and groups from the
front end. And can be launched in a number of browsers.

84

Launchpad Overview
Advantages
Here are a few advantages of using the Fiori Launchpad. As we explore more we
can add to the list
1.
2.
3.
4.
5.
6.
7.

85

Search feature.
Single sign on.
Information at single place.
Real time information
Enables forecasting
Personalized interface
More interactive

Launchpad Overview
Prerequisites

Check NetWeaver kernel versions

Maintain SAP NetWeaver Gateway OData Services
Configure ICF Nodes

86

Launchpad Overview
Maintaining SAP Gateway OData Services

87

Launchpad Overview
Configuring ICF Nodes for Local Gateway Deployment SICF Services

88

Launchpad Overview
Configuring ICF Nodes for Remote Gateway System

89

Questions

90

Thanks
For more information please contact:
Viral Sakhalkar viral.sakhalkar@atos.net

Atos, the Atos logo, Atos Consulting, Atos Worldline, Atos Sphere,
Atos Cloud and Atos Worldgrid are registered trademarks of Atos SE.
August 2013
2013 Atos. Confidential information owned by Atos, to be used by
the recipient only. This document, or any part of it,
may not be reproduced, copied, circulated and/or distributed nor
quoted without prior written approval from Atos.

For internal use