SAP Fiori & UI5

An introduction

Thomas Dik
Gütersloh, 12.02.2019
Agenda !

FIORI & UI5 BIG PICTURE FIORI LAUNCHPAD SAP GATEWAY UI5
 What is Fiori?  Which systems are  What is that?  What is that?  Technologies
 What is UI5? involved?  What does it  Why do we need  IDEs
 How are they
 How do they present? the gateway?  Debugging
connected? interact?  How is it  How is the request  Build.me
connected? processed
technically?

BACKEND HELPING COSTS & ACCESS USAGE & EXAMPLES CURRENT PROGRESS
 How should the STRUCTURE  How is access  What is the perfect & FURTHER STEPS
backend be  How do I store management build scope of  Where are we now?
implemented? central data? in UI5/Fiori? application?  Where do we want
 How is it connected  How do I call oData-  How much costs  Which applications to go?
to the gateway? Services? this technology? do exist?  How do we want to
 What are  How is error achieve this goal?
metadata? handling done?

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 2

Fiori vs. UI5 – bring light to the dark
“So far, many software companies focused on features and capabilities
SAP Fiori rather than on the user being the focus of application design.”

 Reaction to the market: less functions and focus the user!

 Fiori is not an application, but a paradigm of how to implement applications
 The expression Fiori should connect SAP and design principles. The goals of the design principles are
 Usability
 User Experience
 Haptics
 To achieve those goals the SAP set some rules every Fiori developer should care about:

Role based Webdesign Simple Coherent Attractive

Every user has a The app has to run on Complex tasks should get By using the SAP UI- Because of the new design
completely individually every web browser, less complex by using the Framework the user specifications the apps are
customized launchpad and unattached by the OS 1-1-3 scenario. One user should recognize alike intuitive. The goal is to
can only see those apps, correctly. To guarantee this can work on one task with elements and is able to motivate the user to work
which he needs to the developer should use a maximum of three concentrate on the with the app.
successfully do his work. the SAP UI-Framework. screens. business process.

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 3

Fiori vs. UI5 – bring light to the dark

SAP UI5
Toolkit for implementing graphical user interfaces in the web
Fio



Innovation of the webDynpro
Meets the requirements for mobile terminals
ri
 Based on Model-View-Controller
 Contains several technologies:

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 4

The big picture

HTTP/S-request
(oData-request)
WebIDE
WebIDE
deploy
HTTP/S-request
(oData-request)

Dispatcher
Dispatcher
deploy SAP Gateway
(GTY, GIY, GPY)

Trusted-RFC

Connection to the backend in test-mode via VPN Trusted-RFC

CloudConnector

Backend-systems
(FS6, DPM, JP6)
Demilitarized zone (DMZ) Private network

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 5

 What is the Fiori Launchpad? And how is it connected?
Intern | Launchpad in integration system: https://giyint.arvato-scm.net/pl-fiori/#Shell-home
Extern | Launchpad in integration system: https://giyext.arvato-scm.net/pl-fiori/#Shell-home

Launchpad Designer

Semantic Object Action

(Business Entity)
SAP Gateway (Intent) Launchpad Designer

Group 1: LPP Group 2: PMI

FrontEnd – User perspective

Target Mapping for „SAPUI5 Fiori App“

Group 3: H&M
Application Type Title

Int. Process.
Outbound

Research
Inbound

Others
BackEnd – Admin Perspective
(Launchpad Designer)

URL (Component)-ID

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 6

 SAP Gateway

 Build to extend the scope of SAP business applications

 Address developers without knowledge in SAP

SAP Gateway

getting
frontend-
coding
finding the
request service to the
response alias (SICF)
forwarding
the request of Trusted-RFC
oData

Backend-Systeme
(FS6, DPM, JP6)

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 7

SAP UI5
„…is a collection of libraries, which developers can use to implement desktop and mobile applications, which are
executable in Browsers. Using the SAPUI5 JavaScript toolkit the developers build applications, which meets the HTML 5
Web-developing standards.“

WebIDE Eclipse

Livedemo:
 Debugging
 Build.me

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 8

 SAP Backend

SAP R/3  Definition of the interface between

front- and backend in the backend-
Find and execute the demanded
put the information to the defined
system using the tcode „SEGW“
services from the oData-request in
the DPC (data provider class)
oData-model (business-logic)  Several ways to operate a business logic
find the service on
in the backend
the backend system
 Depends on the used database
SAP Gateway Provide the oData-model by using technology
(GTY, GIY, GPY) the MPC (model provider class)
 Depends on the way the
frontend sends the request

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 9

 Helping structure

ApplicationModel GatewayModel
Manifest

Because the model is loaded Is technically directly accessable, but

from component/manifest it is to separate the preparation for the
oData call and the call itself there is a
accessable from everywhere gateway controller.
Processing

AppData

BaseController
Get models from component,
loaded/defined from manifest

Every controller should extend from..

GatewayController

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 10

 Helping structure – ApplicationModel

BaseController

Manifest

ApplicationModel AppData

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 11

 Helping structure – GatewayModel

The controller of the

GatewayController is
BaseController, therefore the
GatewayController has all
BaseController functions from BaseController!

Manifest
GatewayController
GatewayModel

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 12

Helping structure – GatewayModel: example

MyClass

GatewayModel

GatewayController

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 13

Costs & Access

Costs Access
 Gateway is payed by the amount of processed transactions General
(‘fee’)  It is possible to access the Fiori Launchpad and the UI5
Developing licenses cost 600€ per year for 5 users applications from every web browser, which supports
 A buyable package includes 5 licenses HTML5, CSS3 and JavaScript
Costs for the Cloud Connector are negligible Admin
 In our case the Could Connector is set up redundant  Launchpad designer
https://gtyext.arvato-scm.net/sap/bc/ui5_ui5/sap/arsrvc_u
Costs for hosting of the gateway system
pb_admn/main.html
 Additional user licenses are not necessary, the ‘normal’ SAP User
GUI user license suffices. To access the WebIDE a s-user is
 It is possible to download the SAP Fiori app for mobile
mandatory.
devices (iOS and Android) to get an app supported access to
the applications
 Launchpad Test (GTY), Integration (GIY), Production (GPY):
https://gtyext.arvato-scm.net/pl-fiori/#Shell-home

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 14

 Usage & Examples

 Evolution of the WebDynpro

 Simplify your processes
 Perfect use in strict processes
 Less sources of errors
 Less manual activities (e.g. clearing)
 In case of manual activities the worker has
to report to the superior
 Fiori is not a replacement for the GUI (?)
 For simple and intuitive work and interfaces
 Effective work
 Examples: Employee Self System;

Transactional Analytical FactSheet

Apps Apps Apps
„…is an app, which you cantouse
is used to create
book several
surplusses transport
in the documents
cycle counting like the
process“
sending to the customer“
„…is an app, which is used to bulk packages for the freight optimization“
11.04.2024 | Thomas Dik | Arvato Distribution GmbH 15
User-Management
sees is granted User Interface (UI)

oData
Launchpad
refers to
refers to Auth.
PFCG Role
shows Catalog contains (Front-End)
uses Authorizations
Front-End-Server

Group contains Tile resolves Target Mapping

UI2 Launchpad starts

oData Service refers to

Fiori App
has
Model Provider

uses
determines
Data Provider
refers to Auth. Defaults

Auth. Objects
App-specific oData-
uses
calls Service

Launchpad Logic has Model Provider requires Start Auth.

Trusted-RFC

refers to Auth. Defaults refers to

Back-End-Server

PFCG Role

Auth. Objects
Data Provider (Back-End)
requires Start Auth. determines Authorizations
calls

Business Logic requires Business Auth. determines

11.04.2024 | Thomas Dik | Arvato Distribution GmbH 16

 So, where do we go next together?

Arvato Distribution GmbH

Thomas Dik
[email protected]
+49 5241/80 - 38125

11.04.2024 | Thomas Dik | Arvato Polska 17