Click to edit Master title style

SAP FIORI

1
Click to edit Master title style

Fundamentals
SAP FIORI

2 2
Click to edit Master title style
Fundamentals

• Role Based
Each app is specific to a user’s role: manager, employee, salesperson, and
so on.
The role-based approach helps in developing user-centric apps.
Developers can visualize a specific user’s task and develop a UI that relates
to the nature of the user’s work.

3 3
Click to edit Master title style
Fundamentals

• Role Based

Classic SAP GUI SAP Fiori based UI

4 4
Click to edit Master title style
Fundamentals

• Responsive
Because it’s HTML5-based, Fiori works seamlessly across all screen sizes
and devices that have an HTML5-compatible browser.
Fiori apps adjust their layout based on the available screen real estate.
• Simple
The simple UI helps the user complete tasks quickly and easily.
Fiori apps emphasize a 1:1:3 approach: one user, one use case, and three
screens (desktop, tablet, and mobile).

5 5
Click to edit Master title style
Fundamentals

• Coherent
No matter how many apps Fiori has, they all have the same design footprint
and thus the same look and feel.
This helps users become familiar with Fiori apps. After using one Fiori app,
users feel comfortable with other Fiori apps, because every app speaks the
same design language.
• Instant Value
The time required to train users in the new UI is minimal for Fiori. The UI is
simple and follows the same design pattern across apps, which makes it
easier for users to adopt the new UI quickly. Hence the cost of training users
is also minimized.

6 6
Click to edit Master title style
Fundamentals
Types of FIORI Apps
• Analytical Apps
These apps give you insight into a particular area and provide reports that let you drill down into the app for further KPI analysis of
the data. The data used to generate these reports may be huge, ranging from several hundred megabytes to gigabytes. By using
the processing power of HANA, these apps generates reports in seconds.
• Fact Sheets
These apps are used for searching and exploring objects. They’re also used to navigate between related objects. For example, if
you search in the Fiori search window for a certain material, Fiori displays the material’s details in the search result. It searches the
ERP back end for the material and shows you the result.
• Transactional Apps
Fiori transactional applications let users perform transactional tasks like creating leave requests, creating travel requests, approving
purchase orders, and so on. Transactional apps support the HANA database and all other traditional databases that SAP ERP
supports..

7 7
Click to edit Master title style
Fundamentals
Types of FIORI Apps
• Analytical Apps

8 8
Click to edit Master title style
Fundamentals
Types of FIORI Apps
• Fact Sheets

9 9
Click to edit Master title style
Fundamentals
Types of FIORI Apps
• Transactional Apps

1010
Click to edit Master title style

Components and Architecture

SAP FIORI

1111
Click to edit Master
Components title style
and Architecture
• MVC Architecture Pattern

• Model
The Model represents data model layer and provides the
application data. It also represents and coordinates access to
the database. In addition, the Model often includes the
associated business logic. The relevant data is provided by
the Model; for this reason, the Model is also often called the
Publisher.
• View
The presentation layer is responsible for the display on the
device. The View receives the user actions, but does not
process them; it forwards them to the Controller instead.
• Controller
The Controller manages one or more Views, receives user
actions from them, and analyses them. There is one
Controller for each View. If a data change occurs during a
user action, the Controller performs the communication with
the Model.

1212
Click to edit Master
Components title style
and Architecture
• SAP FIORI Architecture

• Client/Browser
The client layer is where the actual
consumption of SAP Fiori apps takes place.
SAP Fiori launch pad is the entry point for all
SAP Fiori apps on mobile, desktop, or tablet.
• Web Dispatcher
Web dispatcher is a type of proxy server that sits behind the firewall in a private
network and directs client request to appropriate back end server. It provides an
additional layer of security and control to ensure the smooth flow of network
traffic between clients and servers.
• ABAP Front-end/Back-end Server
The ABAP front-end server is recommended for all app types. The ABAP front-
end server contains the UI layer and infrastructure components, as well as SAP
Gateway with OData enablement. The ABAP back-end server contains the
back-end business logic and search models for fact sheet apps.
• SAP HANA XS
SAP HANA XS is only required for analytical apps; it replicates data from the
backend server and remodels it using virtual data models (VDMs).
• Back-end Server
The back-end database can be any database for transactional apps or an SAP
HANA database for fact sheet and analytical apps.

1313
Click to edit Master
Components title style
and Architecture
• Components of SAP Fiori

ODATA, Integration Build, Integrate

Launchpad (CRUD) and Deploy

FIORI UX Adoption of Fiori UX

Development To build enterprise
Apps
UI5 Framework,
SAP UI5 Framework
WebIDE

HTML5, CSS,
Foundation for UI5
JS, JQuery

1414
Click to edit Master
Components title style
and Architecture
• SAP UI5 framework

SAPUI5, a UI development toolkit for HTML5, is a JavaScript UI control library that developers can use to build
business applications that run on any device, providing a lightweight programming model for desktop and mobile
applications. All SAP Fiori UIs are built using SAPUI5 technology.

1515
Click to edit Master
Components title style
and Architecture
• SAP Gateway and OData
• OData
Open Data Protocol (OData) is a REST-based protocol used to
expose and consume data on the web. It was built on web
technologies such as HTTP, Atom Publishing protocol (AtomPub),
XML, and JSON to provide access to information from a variety of
applications. It was originally developed by Microsoft and was
designed to provide a RESTful API accessible by forming an
appropriate Uniform Resource Identifier (URI) and assigning it to the
corresponding HTTP header. Essentially, anything that’s possible with
the UI becomes part of the API. Put simply, OData is used to expose,
access, and modify information from different sources.

• SAP Gateway
SAP Gateway is a technology that provides a simple way to connect devices, environments, and platforms to SAP
applications, using any programming language or model, by leveraging REST services and OData protocols.

1616
Click to edit Master
Components title style
and Architecture
• SAP WebIDE

• SAP WebIDE
SAP Web IDE is a browser-based tool that enables developers to build new UXs. It’s
designed to shorten the end-to-end application development lifecycle, from prototyping
to developing to instantly previewing to deploying SAP Fiori applications.

1717
Click to edit Master title style

Thank You

18