sap fiori architecture overview to deep dive - with focus...

PUBLIC

Version 4.3

October 2017

SAP Fiori Architecture Overview to Deep Dive - with focus on S/4 HANA

2PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ This presentation and SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind,either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. This

presentation is not subject to your license agreement or any other service or subscription agreement with SAP. SAP has 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's strategy and possible future developments, products and or platforms directions and

functionality are all subject to change and may be changed by SAP 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. This document is provided without a warranty of any

kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-

infringement. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors

or omissions in this document, except if such damages were caused by SAP´s willful misconduct or gross negligence.

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.

Legal disclaimer

This presentation and SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice.This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for aparticular purpose, or non-infringement


SAP Fiori AppsProduct Qualities

Modern, award winning UX+++

Role based+++

Multi-device support+++

Simple task-oriented apps+++

Consistent look and feel

across all apps

UX Qualities Cloud Qualities

Simple Extensibility for

Business Experts:

Custom fields and business logic

without backend development

+++

Scalable apps w/ large number of users

+++

Low TCO in cloud-like operation

Real-Time Qualities

Offer power of HANA

to the End-User+++

Real-time for all apps with search,

analytics and transactional capabilities+++

Embedded Analytics

Completely Fiori HANA OptimizedCloud Ready


SAP Fiori AppsProduct Qualities - Design

Role-based

➢ Deliver the right information at the right time via multi-

faceted user interfaces

Adaptive

➢ Get instant, relevant insight – whether using mobile

apps or a desktop computer

Simple

➢ Zero in on your most important tasks, functions, and

activities

Coherent

➢ Deliver a consistent UX across the enterprise – whether

you need to fulfill a sales order, review your latest KPIs,

or manage leave requests

Delightful

➢ Enrich your work experience with intuitive, easy-to-use

SAP Fiori apps


SAP Fiori AppsTechnical Capabilities

➢ Availability - On Demand and On Premise

➢ Support for multiple devices and form factors - Maximize usability using

a desktop PC, tablet, or smartphone

➢ Central Access via SAP Fiori launchpad - Access your SAP Fiori apps

from a central launchpad (navigation, personalization, support, and

configuration)

➢ Role-based authentication and authorization - Harness role-based single

sign-on (SSO) mechanisms for secure access

➢ Secure provisioning and consumption of data - Provide access to

business logic (SAP back-end system) data via OData services

➢ Corporate identity theming - Simply and effectively implement themes for

SAP Fiori apps and SAP Fiori launchpad

➢ Embedded Analytics – efficiently include compelling KPIs, charts, and

analytical tables in your SAP Fiori apps providing real-time insights and

offering immediate actions

➢ SAPUI5 based - Enterprise-ready UI development toolkit based on HTML5

and JavaScript

➢ App Extensibility - Enhance your SAP Fiori apps using templates in the

SAP Web IDE

➢ Custom development - Rapidly design, build, and deploy SAP Fiori apps

for browsers and mobile devices in the SAP Web IDE


SAP Fiori Architecture Consequences for Architecture

Consequences for Architecture ➢ Not tied to a device

➢ Not tied to a session

➢ Not tied to a user

Modern UX through draft enabled Architecture

➢ Start now – save incomplete – continue later

➢ Keep working – data is saved automatically and

asynchronously

➢ Start on one device – continue on other device

➢ Start now – let someone else continue later

➢ Collaborate with others on the same task/document

stateless

data access protocol


SAP Fiori ArchitectureOverview

➢ SAP Fiori apps built with SAPUI5 technology (web) and / or

iOS native (iOS native is not in scope of this presentation)

➢ Support of smartphones, tablets, and desktop (by responsive design patterns)

with single code line

➢ SAP Fiori apps are launched and run in the SAP Fiori launchpad

➢ Business data is retrieved at runtime (via OData services)


On-PremiseSAP S/4HANA Cloud

SAP Fiori ArchitectureHigh-Level Overview

SAP S/4HANA

SAP S/4HANA Business Logic

SAP Fiori front-end server

SAP Fiori apps OData ServicesSAP Fiori apps OData Services

SAP Business Suite

(ERP, SRM, …)SAP S/4HANA …

Developer

SAP Cloud Platform

On-Premise

ABAP in Eclipse

Backend Services

SAP Web IDE

SAP Fiori user

interfaces

SAP Fiori Client

Packaged apps

Web


SAP Cloud Platform On-Premise

SAP Fiori ArchitectureHigh-Level Overview – SAP Fiori Cloud (internal data access point1)

SAP S/4HANA

OData Services

* Optional offering for on-premise

SAP Business Suite systems, for

selected SAP Fiori apps Reverse Proxy

SAP Fiori ClientWeb Developer

SAP Cloud Platform

On-Premise

ABAP in Eclipse

Backend Services

SAP Fiori Cloud

SAP Fiori apps

SAP Web IDE

SAP Fiori user

interfaces

1) For clients accessing the system from within the corporate firewall:

no SAP S/4HANA business data passes through the cloud


SAP Cloud Platform On-Premise

SAP Fiori ArchitectureHigh-Level Overview – SAP Fiori Cloud (external data access point)

SAP Business Suite(ERP, SRM, …)

** SAP

S/4HANA …

SAP Fiori apps OData Services

*

* Optional offering for on-premise


selected SAP Fiori apps


SAP Fiori ClientWeb Developer

SAP Cloud Platform

On-Premise

ABAP in Eclipse

Backend Services

SAP Fiori Cloud

SAP Fiori apps OData Provisioning

SAP Web IDE

SAP Fiori

user interfaces

**planned


SAP Cloud Platform

On-Premise

SAP Fiori ArchitectureHigh-Level Overview – SAP HANA Cloud Platform, mobile service for SAP Fiori – for on premise


SAP S/4HANA …



SAP HANA Cloud Platform, mobile service for SAP Fiori

SAP Fiori Client /

packaged appWeb /

SAP Fiori ClientDeveloper

On-Premise

Fiori User

Interfaces

ABAP in Eclipse

Backend Services

Build/Packaging

Services

SAP Web IDE

SAP Fiori user

interfaces

Build/Packaging

Services (opt.)

Runtime ServicesDeployment/

Discovery Services


SAP Fiori Client /

packaged app

SAP Cloud Platform

On-Premise

SAP Fiori ArchitectureHigh-Level Overview – SAP HANA Cloud Platform, mobile service with SAP Fiori Cloud


** SAP

S/4HANA …

Web /

SAP Fiori Client


Runtime Services

Developer

On-Premise

Fiori User

Interfaces

ABAP in Eclipse

Backend Services

Deployment/

Discovery Services

SAP Web IDE

SAP Fiori user

interfaces

Build/Packaging

Services (opt.)

SAP Fiori Cloud

SAP Fiori apps OData Provisioning

* Optional offering for On-Premise


selected SAP Fiori apps

*

**planned


Cloud

SAP S/4HANA Cloud

SAP Fiori Client /

packaged app

SAP Cloud Platform

On-Premise

SAP Fiori ArchitectureHigh-Level Overview – SAP HANA Cloud Platform, mobile service for SAP Fiori: SAP S/4HANA Cloud


SAP

S/4HANA …

Web /

SAP Fiori Client

SAP S/4HANA business logic

Developer

On-Premise

SAP Web IDE

(HCP)

Fiori User

Interfaces

ABAP in Eclipse

Backend Services

Build/Packaging

Services


SAP Web IDE

SAP Fiori user

interfaces

Build/Packaging

Services (opt.)

Customer/Partner extensions

ODataSAP Fiori apps


Runtime ServicesDeployment/

Discovery Services


SAP S/4HANA Cloud

SAP Fiori ArchitectureHigh-Level Overview - Cloud

SAP S/4HANA

SAP S/4HANA Business Logic


Developer

SAP Cloud Platform

On-Premise

ABAP in Eclipse

Backend Services

SAP Web IDE

SAP Fiori user

interfaces

SAP Fiori Client

Packaged app

Web

Fiori Configuration

Cockpit

(FCC)

SAP Cloud

ProductsSAP Cloud

ProductsSAP Cloud

Products


Backend System

Database Server

Backend Server

R

R

Fiori UserFiori User

Client

R

SAP Fiori ArchitectureSimplified Top-Level View

Desktop and mobile interaction patterns

Common data access protocol for

business data and metadata via HTTP

The backend server exposes services that

either directly call SQL on the database or

invoke business logic in an application tier.

Coded or declared artefacts

where necessary for business logic

Database shall foster code pushdown

and model simplificationSAP HANA is the preferred database

Static UI content via HTTP

Fully exploit SQL capabilities


SAP Fiori Architecture SAP S/4HANA – Principle of one archetype

SAP Fiori Architecture for SAP S/4HANA consists of only one

archetype for all (transactional, analytical and search)

➢ One User / Authorization Management via ABAP Server

➢ One Business Model

➢ One Gateway / OData protocol implementation

➢ One Lifecycle


SAP Fiori Architecture SAP S/4HANA – Principle of one archetype

SAP Fiori Architecture for SAP S/4HANA supports

transactional, analytical and search in SAP Fiori apps

➢ SAP Fiori technology components

➢ SAP Fiori launchpad

➢ Fiori Elements to easily define SAP Fiori UIs (based on metadata)

➢ ABAP infrastructure components

➢ SADL for CDS read access

➢ Transactional infrastructure including Draft

➢ Analytical Engine (embedded BW) for analytical CDS access

➢ SAP Gateway for OData exposure

➢ CDS Views (ABAP managed)

➢ Uniform Business Object Modelling

➢ Central repository for Metadata


SAP Fiori ArchitectureSAP Fiori launchpad - Key Features and Capabilities

Role-based

• Apps assignment via role-specific business catalogs

• Predefined groups for FLP home page

Personalized

• Add / remove apps from home page

• (Re)arrange tiles and groups

• Change titles

• Select custom themes

Search – across apps and business objects

Navigation – fast, easy and contextual navigation

Responsive

• Adaptive design to run on multiple devices

• Configuration allows to start device specific apps

Theming and branding - via UI theme designer


Dynamic charts to provide

high level, real-time

overview

Edit mode for instant

personalization of groups

and tiles

SAP Fiori ArchitectureSAP Fiori launchpad – User Experience

Search across and within

apps to get immediate

answers

Anchor navigation

allows direct access to

groups

Group tiles for

personalized content

organization

Link lists provide

access to a large

number of apps

News and feeds to

enhance collaboration

Launch SAPUI5, Web

Dynpro ABAP*, SAP GUI

for HTML* and arbitrary

URLsColor coding alerts user for

any overdue, new or

immediate actions

*on selected devices


SAP Fiori ArchitectureSAP Fiori launchpad - Architecture

SAP Fiori launchpad is a runtime container

supporting intent-based navigation for

➢ SAPUI5 Components

➢ Web Dynpro ABAP or SAP GUI apps

➢ External URLs

It provides platform-independent service APIs with

adapters for different front-end servers (ABAP, SAP

Enterprise Portal, SAP HANA Cloud Platform) and local

consumption (Sandbox for testing in SAP Web IDE,

mobile offline).


SAP Fiori ArchitectureSAP Fiori launchpad – Authorization: Content Model for ABAP platform (on premise)

Transaction PFCG

➢ Assign groups and catalogs to roles

➢ Roles are the means to assign catalogs and their apps to users

SAP Fiori launchpad designer (FLPD)

Content can be configured system wide (configuration) or client specific

(customizing):

➢ Target Mapping: maps navigation intent to concrete (logical

application/target)

➢ Tile: used to launch an application from the homepage

➢ Catalog: set of applications a user can use and add to his homepage

➢ Group: predefined set of tiles a user sees on his homepage


SAP Fiori ArchitectureSAP Fiori launchpad - Delivered Content Model Artifacts (Simplified Picture) (on premise)

FLPD:

Catalog (TC)

Navigation Target

Application

(UI5 BSP)

TA “PFCG”: Roles (TCR)

FLPD:

App Launcher

TA „PFCG“:

Backend Role

for OData Service

FLPD:

Catalog (BC)

TA “PFCG”: Roles (BCR)

FLPD:

App Launcher

FLPD:

Group (BCG)

Fro

nte

nd

BE

FLPD:

Target Mapping

FLPD:

Target Mapping

Technical Content• grouped by application area

• repository for admins

• for custom content

Business Content• grouped by business role

• serves as demo content

Fro

nte

nd

BE


SAP Fiori ArchitectureSAP Fiori launchpad - User Assignment and Authorizations of Content (on premise)

Fro

nt-

En

d

Se

rve

r

Ba

ck-E

nd

Syste

m

Authorization Objects

Authorization Objects

Launchpad PFCG Role(Front-End)

Target Mapping

shows

starts

App-specificOData Service

uses

UI2 Launchpad OData Service

uses

Model Provider

Data Provider

Start Authorization

Start Authorization

Business Authorizations

PFCG Role(Back-End)

has

has

requires

requires

refers to

determines

Business Logicrequires

calls

UI

OData

Auth.

calls

Authorization Defaults

Authorization Defaults

uses

uses

Fiori App

refers to

refers to

User

Tile(App Launcher)

sees is granted

Model Provider

Data Provider

resolvesLaunchpad Logic

Trusted RFC

contains Authorization Profile

Authorization Profile

determines

determines

refers to

refers to

Groupcontains

resolves

Catalog

Menu


SAP Fiori ArchitectureSAP Gateway – Architecture – on Premise

Business Functionality (Backend)

SAP S/4HANA

OData

SAP HANA DB

SAP Gateway

Recommended Development option

Core Data Services (CDS views)

access the SAP S/4HANA Business

Data via SAP Gateway.

SAP HANA DB

Browser(SAP Fiori Launchpad)

SAP Fiori App

SAPUI5

Frontend-Server

SAP Fiori AppSAP Fiori

launchpad

SAP Gateway Hub

(OData Service)

BackendSAP NetWeaver

SAP Gateway OData Provider

(Backend provider)

Query

(SADL)

Draft

Engine

(BOPF)

Backend Business Logic

(Classes, BAPI, …)

CDS View Draft Table Appl. Table

Trusted RFC

HTTPSHTML / OData

Read & write

Read Write

Read

Write

& write


SAP Fiori ArchitectureSAP Fiori Cloud Deployment Options for SAP Gateway and OData Provisioning

SAP Fiori, cloud edition

CP cloud connector

SAP backend

SAP Gateway (embedded)

Embedded Deployment+ quick and easy way to expose

SAP Gateway services from a

single backend

‒ disadvantages when combining

data from several backends

‒ downtime for Business Suite

systems when upgrading UI

components


CP cloud connector

SAP backend

SAP Gateway (hub)

Gateway Hub+ administration advantages

through central deployment

+ multi-origin composition

+ routing support for connecting

to multiple backend systems

+ enhanced security

‒ additional server required


CP cloud connector

SAP backend

CP OData Provisioning

OData Provisioning+ „Gateway hub in the cloud“

+ included in license for


+ cloud benefits (upgrades,

scaling, security,…)

+ integrated with other HCP

services

‒ no integration of 3rd party data

sources


CP cloud connector

SAP backend

CP Integration

Cloud Platform Integration+ full extensibility options for Fiori

+ integration of SAP and 3rd party

data sources & web services

+ cloud benefits (upgrades, scaling,

security,…)

+ integrated with other HCP services

1 2 31


SAP Fiori ArchitectureSAP CP ODATA Provisioning – Architecture - Cloud (a.k.a Gateway-aaS/HCI OData Provisioning)

SRM SCM ERPPLMCRM

SAP Business Suite SAP HANA

SAP Gateway Backend

Provisioning

HCP OData

provisioning

HCP

OData Strategic service to administer(register, activate, maintain) OData

services on Hana Cloud Platform exposed from SAP Business Suite

backend. Services to be developed in SAP backend(ABAP).

o SAP Gateway Backend (IW_BEP 200) component to be installed as add-

on in SAP Business Suite Backend Systems that are based on SAP

NetWeaver 7.0, 7.01, 7.02, 7.03, and 7.31.

o For SAP NetWeaver 7.40 or higher it comes pre-installed with

“SAP_GWFND 740/750” component which contains full functional scope

of Gateway.

Engineered for Cloud: Low TCO, Multi-tenancy, rolling software

updates, horizontal scalability, subscription-based usage

Connectivity to on-premise system using HCP Cloud Connector

Leverages all cloud qualities of HCP, viz. monitoring, supportability,

security etc.

Re-uses the same investments done for OData enablement of on-

premise SAP systems using Gateway (IWBEP) for cloud scenarios

Some features of on-prem Gateway HUB not available yet, but

planned for roadmap of this year (viz. user based routing, softstate,

notification support)

Currently bundled with SAP Fiori Cloud Edition license, HCI and few

HCP Bundles, however needs valid SAP Gateway Backend license for

connected Suite systems

Gateway

License

(Details)

Bundled with

other

products

Cloud

Connector

https://jam4.sapjam.com/groups/28EPQSN6TaQsFXXQLN9Ekc/documents/bXzZmv21HqHdkACBRqnnX5/slide_viewer

https://jam4.sapjam.com/wiki/show/PfMH8Rb7pQWv2PR8OrS72F

https://jam4.sapjam.com/wiki/show/PfMH8Rb7pQWv2PR8OrS72F

https://jam4.sapjam.com/groups/28EPQSN6TaQsFXXQLN9Ekc/documents/bXzZmv21HqHdkACBRqnnX5/slide_viewer


SAP Fiori Architecture Analytics: Consumption patterns

List Reporting & Charting build with

List Report & Analytical List Page Template

KPI Monitoring & Analysis

build with

Smart Business &

Analysis Path Framework

Multidimensional Analysis

build with

Design Studio

Analysis App

Adding transactions to aggregated data

▪ Cost center hierarchy: Plan budgets and disaggregate

▪ Any grouped data: offer mass actions on lower level items

85

Built-In Analytics

build with

Controls:

Analytical Table &

Analytical Chart

DSDemo.mp4


SAP Fiori ArchitectureAnalytics: Conceptual View

SAP HANA

CDS Data Model

Application Infrastructure

UI

Consumption View

Interface View

OData Adapter

Transaction Handler

Core Controls

Smart Controls

UI Annotations

SAP Fiori elements

Application Generic Player

UI Annotations

Annotations

Analytical Table, Chart

Smart Table

List Report

Analytic Query View

Analytical views for

dimensions, facts, cubes,

aggregation levels

Planning

OData plus InA

KPI, Report, …

SAP BusinessObjects Design

Studio Analysis App, SAP

Smart Business Drilldown App

Data Point, Selection,

Presentation (Chart, …)

Analytical view categories

and details


SAP Fiori ArchitectureAnalytics: Design Time (Developer & Key User)

SAP HANA

CDS Data Models


UI

Consumption Views

Interface Views

OData Adapter

Transaction Handler

Core Controls

Smart Controls

UI Annotations

SAP Fiori elements

Application Generic Players

UI Annotations

Annotations

RepositoriesDevelopment Environments

Web IDE

Design Studio

KPI Modeler

UI Artifact,

e.g. Fiori Application

DS Application

KPI Definition

ABAP in EclipseAnalytical

CDSView


SAP Fiori ArchitectureAnalytics: Runtime (End-User) (based on NW AS ABAP 7.50 or higher On Premise / NW AS ABAP 7.60 or higher Cloud)

SAP HANA

CDS Data Models


UI

Consumption Views

Interface Views

OData Adapter

Transaction Handler

Core Controls

Smart Controls

UI Annotations

SAP Fiori elements

Applications Generic Players

UI Annotations

Annotations

Fiori Shell

Analytical AppSmart Business

KPI Monitoring

Design Studio

Analysis App

SAP NetWeaver 7.6x

Analytical OData Service

Transaction Handler Analytic Engine

HANA / Any DB

Business Data

ROData RInA

RR

ROpen SQL

Read AccessRSQL

SQL View

R

Annotations


SAP Fiori ArchitectureSearch Scenarios

Enterprise Search

➢ Integrated into SAP Fiori launchpad

➢ State-of-the-art search experience across

business objects, SAP Fiori apps and documents

➢ Filtering facets and full S/4HANA authorizations support

➢ Flexible navigation from search results based on standard

semantic objects’

In-App Search

➢ Available for every SAP Fiori App and OData service

➢ Greatly simplifies filtering and value help UIs

Shared Programming model

➢ CDS (VDM) views serve as basis for the modelling of

search behavior

➢ Based on the powerful HANA text processing functionality

and CONTAINS predicate

S/4HANA

ABAP

SAP

HANA

S/4HANA Tables

Enterprise Search (ABAP)

SADL

ABAP CDS Views

Enterprise Search (HANA)

SQL Processor

CONTAINS

SQL Views

RSQLRSQL

R

SAP

Fiori

UI

Enterprise

Search APPFiori APP

ROData RsINA/OData

FTIs


SAP Fiori ArchitectureEnterprise Search Details

Key User Tools

➢ Boosting Cockpit allows for fine tuning of the business

related ranking of search results.

➢ Query Log for analyzing and optimizing the search

behavior

➢ Synonyms editor for advanced search experience

Technology

➢ Two types of models are supported: table and CDS based

➢ Proprietary table based models are mapped to join views

and supported for legacy and performance reasons

➢ CDS models fully leverage the standard S/4HANA

development model and should become the only

modelling type

➢ ABAP API for integrations of ranking functionality into

S/4HANA apps

SAP Fiori UI

S/4HANA

ABAP

SAP

HANA

S/4HANA Tables & FTIs

Enterprise Search

(ABAP)

Enterprise Search (HANA)

SQL Views Processor

SQL Views

Enterprise

Search APP

Table based models

ABAP CDS Views

Boosting Cockpit

R

R

R

Query LogSynonyms

Editor

R

Join Views Processor

Join Views

R

Business User

Key User

R R


SAP Fiori ArchitectureDocument Search

Key Features

➢ Search in documents attached to the S/4HANA business

objects

➢ File Processing service supports text, topics and metadata

extraction from various types of documents (pdf, word etc.)

➢ File Processing service is running on the SAP CP (Cloud

Foundry based)

➢ Integration with supported types of document storage

solutions with both KPRO and CMIS APIs

➢ Available in S/4HANA on-premise solution

➢ In the evaluation in S/4HANA Cloud solution

Note: For the sake of simplicity the block diagram doesn’t show some details

like search model or HANA part of the Enterprise Search

SAP

HANA

S/4HANA

ABAP Document

Storage Solution

File Processing

DMS

File Processing results:

text extracts and metadata

R

FPRO

Client

R

Enterprise

Search

R

R


SAP Fiori Architecture Notifications Component Overview

This presentation and SAP‘s strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice.This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for aparticular purpose, or non-infringement


SAP Fiori ArchitectureSAP Fiori Cloud

SAP Fiori Cloud provides SAP S/4HANA and SAP Business Suite customers a simple approach to

adopt the SAP Fiori user experience (UX) by leveraging SAP Fiori pre-packaged content and

services in the cloud

Enable a modern, intuitive user experience for SAP business

processes (SAP S/4HANA & SAP Business Suite) with

reduced cost and effort

Combine SAP and non-SAP business processes with

a consistent UX

Simplify on-premise landscape with efficient cloud services,

enabling fast innovation cycles

Provide access to SAP business process from anywhere at

anytime via a secured connectivity between on-premise to cloud

SAP

Business Suite

SAP

S/4HANA

SAP Cloud Platform

SAP Fiori UX


Fiori-related Cloud offerings

▪ SAP Fiori CloudFLP apps and configurations

managed in the cloud

▪ On-Premise Shipment Shipment and lifecycle of the apps and

configurations on-premise

▪ S/4HANA CloudABAP system with Frontend Server

managed in the cloud

SAP Fiori ArchitectureSAP Fiori Cloud – in the context of other SAP Fiori offerings

Fiori apps and

Configurations

ABAP BE

Minimized

Frontend Server

SAP Fiori Cloud

Fiori apps and

Configuratins

ABAP BE

S/4HANA Cloud

Fiori apps and

Configurations

ABAP BE

On-Premise

Shipment

SAP Cloud Platform

BE=Backend


SAP Fiori Architecture SAP Fiori Cloud - Architecture at a Glance

SAP HANA Cloud Connector

Other

Backends SAP ABAP Backend

SAP Gateway Hub

OData

SAP HANA Cloud Platform (HCP)

OData

http

http

ON

-PR

EM

ISE

CL

OU

D

UI

SE

RV

ICE

SD

AT

A &

PR

OC

ES

SW

S

SAP Fiori launchpad

SAP Fiori Apps

SAP Cloud Platform Cockpit

UI theme designer

Launchpad Config Cockpit

Identity Authentication

SAP Fiori mobile service

Web IDE


SAP Fiori Architecture SAP Fiori on mobile devices

1

Push

Offline

GPS

Voice Recording

Camera

Barcode

Calendar Printing

LifeCycle Management

3rd party

Plug-ins

Web App Hybrid Mobile App

Settings Security

TasksContacts


SAP Fiori ArchitectureSAP Fiori Runtimes

Fiori in browser

Browser based apps Runs on all devices No installation required Coherent UX across devices

SAP Fiori Client

Downloadable ‘native’ app Pre-packaged with commonly used Cordova

plug-ins for native device integration Full screen operation Attachment viewing Native device integration Notification App Updates

➢ Selected Mobile Platform Services can be used

Fiori Mobile with ‘Kapsel’ SDK(packaged apps)

Custom packaged & branded app Can be delivered on company store Native device integration Offers App Administration & Reporting Push Notifications* Offline application data* Use additional SAP Mobile Platform

services

Mobile Platform required

ONE ACCESS

Browser (Desktop or Mobile) Mobile only*requires adoption of SAP Fiori application

SAP Fiori launchpad SAP Fiori launchpad

PlannedInnovations


SAP Fiori ArchitectureSAP Fiori Consumption Options

URL

Fiori front-

end server

App

OData

Fiori in browser

SAP Fiori launchpad

and applications

Fiori front-

end server

App

SAP Fiori

Client

URL

OData

SAP Fiori Clientor custom Fiori Client

SAP Fiori launchpad

and applications

SAP Fiori Cloud premium, mobile

service for development and operations

or

SMP 3.0 SP03 PL02+

SAP Mobile

Platform

* in future release

Fiori front-

end server

SAP Fiori Cloud premium, mobile

service for development and

operations or

SMP 3.0 SP03 PL02+

OData

SAP Mobile

Platform

Fiori Mobile

app

App

Fiori Mobilewith ‘Kapsel’ SDK

*

Kapsel AppUpdate

(optional)

http://www.google.com/url?sa=i&source=images&cd=&cad=rja&docid=04ZVwJWXIo0wXM&tbnid=7uisyz4uMvBP_M:&ved=0CAgQjRwwAA&url=http://www.logiciel.net/apple-ios-victime-dune-faille-de-securite-critique.htm&ei=XdHBUfSGCJLW8gSgkICwCA&psig=AFQjCNEbVyvQBMObGr8WOUlMR9vohcYcaQ&ust=1371742941183070



SAP Fiori ArchitectureSAP Fiori Client - with SAP Fiori Cloud

– End to End solution for mobilizing SAP Fiori apps.

– Supports all features of SAP Fiori client

– Provides as part of a single, integrated solution:

• Build/Packaging service transforms your SAP Fiori web app into

a native/hybrid app, necessary to leverage native device

features.

• App deployment service enables app lifecycle management and

an enterprise app store app for deployment, ratings and reviews.

• Data service provides infrastructure support for advanced mobile

features such as push and offline.

• Mobilizes SAP Fiori Cloud apps and SAP Fiori on-premise apps

with a single solution.

• Integrates with SAP HCP, mobile service for app and device

management

• Simplifies support for basic and advanced SAP Fiori use cases.

Fiori Frontend Server (SAP Fiori Cloud or on-premise)

(e.g. SAP Gateway)

SAP Fiori Cloud

premium

Optimized

Optimized

DirectDirect

Any Browser SAP Fiori Client


SAP Fiori Architecture SAP Fiori Client - with SAP Mobile Platform 3.0 / HCPms

– Support of native device capabilities

▫ Camera, Geo-Location, Barcode, Printing, Calendar, Contacts,

enhanced Voice Recording incl. attachment,

▫ Access manageable via SAP SMP Administration Cockpit

– Support of enterprise capabilities

▫ Secure Onboarding

▫ Enhanced security (Secure, remote access without VPN)

▫ Support of additional security scenarios

(SAML2, X.509 via SAP Afaria, Mutual Authentication, OAuth …)

▫ Enforced application passcode

▫ Logging & Tracing (incl. set log level & retrieve log from remote)

– EMM integration for configuration & certificate management

– Supportability Enhancements

– Android Third Party Attachment Viewer

– NEW: Cloud Build Feature allows developers to create a

custom SAP Fiori Client with no on-premise developer

footprint.

– Demo Mode (http://www.sapfioritrial.com/) Fiori Frontend Server

(e.g. SAP Gateway)

SAP Mobile Platform

3.0 SP03 PL02 /

HCPms

Optimized

Optimized

DirectDirect

Any Browser SAP Fiori Client

http://www.sapfioritrial.com/


SAP Fiori Architecture SAP Fiori Client - Available on all major App Stores

Google Play Store for AndroidApple App Store for iOS

Support: iOS 9.x – 10.x Support: Android 4.13 – 7.x Support: Windows Phone 10 & Windows 10

Microsoft App Store for WP & Windows

https://play.google.com/store/apps/details?id=com.sap.fiori.client

https://itunes.apple.com/de/app/sap-fiori-client/id824997258?mt=8

http://apps.microsoft.com/windows/de-de/app/sap-fiori-client/1c835454-bb59-4078-ad31-f3e4719baba9

SAP Fiori Architecturewith focus on SAP S/4HANA

System Landscape Recommendations

https://eaexplorer.hana.ondemand.com/rest/mimeRepositories/11168/file/Deployment_Recommendations_SAP_Fiori_2017_July.pdf


SAP Fiori ArchitectureSAP Fiori Front-end server

➢ Single point of UI maintenance like browser support or SAPUI5 provisioning

➢ Central place for theming and branding

➢ Single place for configuration, personalization, and SAP Fiori shell services

➢ Rule-based dispatching of requests in a multi-system landscape

(e.g. for approvals incl. aggregation)

➢ Security considerations

➢ Similar to an application-level gateway (ALG) with protocol switch and whitelisting (excl. search)

➢ Admin for UI meta data does not need to have admin rights in backend (data sensitivity)


Deployment of Fiori Frontend Server (FES)

Central Hub Deployment

General Recommendation

Deployment of Fiori Apps and UI content on separate systems

Deployment of the GW components as described in landscape use case II

of the GW landscape deployment recommendations

Enablement of OData access for multiple SAP Backend systems

Benefits

Fiori UI Software Update cycles decoupled from backend system*

Better handling of innovations for Fiori UIs and UI content

FES deployed as one instance incl. central Fiori Launchpad

Routing mechanism in several backend systems

Scaling-Up is manageable independent from backend system

FES can be implemented in segmented networks (e.g. DMZ) to serve security needs

Input validation functions and business logic on two different systems (security requirement)

Central management of connections, central access for devices

Backend development placed in the system where the data is stored

Considerations

Additional NW ABAP System

Web Dispatcher (Reverse Proxy) is mandatory when using analytical Fiori apps

Example:

*for S/4H only valid for SPSs


Deployment of Fiori Frontend Server (FES)

Add-on Deployment in Application Backend System

Possible Exception

Deployment of needed Fiori UI content on each required

SAP Backend system (ERP, CRM etc.)

Multiple deployment/configuration of Gateway Server and

Gateway content (on each SAP Backend)

Acceptable for single system infrastructures e.g. Proof of Concepts or single

instance productive systems (starting point for Fiori)

Benefits

No additional NW ABAP system needed less TCO

Less runtime overhead no remote-call

Direct access to metadata and business data

Later scale-out to central hub deployment possible

Considerations

Innovation speed of Fiori UI/GW and backend must be synchronized

Update strategy must reflect dependencies between software components

Cross-System composition (e.g. usage of one Fiori Launch Pad) is not advisable

SAP Backend must fulfill minimum system-requirements

Possible scale-up of SAP backend (resizing)

Currently the majority of customers are on central hub deployment

Example:

ERP on HANA

Frontend – HTML5

ECC

Server

Gateway enabl.

Gateway

Server

Fiori UIs

ABAP

AS ABAP

ERP Content

SAP CRM

CRM

Server

Gateway enabl.

Gateway

Server

Fiori UIs for CRM

ABAP

AS ABAP

CRM Content

HANA

SAP SRM

SRM Server

Gateway enabl.

Gateway

Server

Fiori UIs for SRM

ABAP

AS ABAP

SRM Content

HTTP/ODATA

UI Technology UI Technology UI Technology

HTTP/ODATA

HTTP/ODATA HTTP/ODATA

Frontend – HTML5 Frontend – HTML5

HTTP/ODATAHTTP/ODATA

Web Dispatcher


SAP Fiori Architecture SAP Fiori Front-end server - Landscape Planing

▪ The SAP Fiori Front-end server provides the UI resources and routes the

OData Service calls to the backend.

▪ It can be deployed

Standalone, as a HUB or

Embedded, co-deployed onto the backend

▪ Indicators for one central instance as a HUB deployment

Serves Multiple Backend-Systems, incl. Routing

Decouples Lifecycle Management

Scales Backend-independent

Increases Security: FES can run in dedicated network segment (e.g. DMZ);

Request Validation and Business Logic are managed in different systems

Indicators for an embedded deployment

▫ Cost: reduced number of systems, 1 Backend System only.

SAP Fiori Cloud eliminates the need for a Front-end server in the Customer

Landscape - More information:

https://eaexplorer.hana.ondemand.com/_item.html?id=11166#!/overview

https://eaexplorer.hana.ondemand.com/_item.html?id=11166#!/overview


SAP backend

(SAP Gateway service

implementation)


SAP backend

(SAP Gateway service

implementation)

SAP S/4HANA*

Web

SAP Fiori Client

Packaged app

SAP Fiori Front-end Server(based on AS ABAP)

SAP Fiori launchpad & apps

SAP Gateway hub components

(OData provisioning)

The SAP Fiori Front-end Server

o Runs on AS ABAP

o Provides the required technology stack for SAP Fiori Apps

(front-end components) comprising

• SAP User Interface Technology

• SAP Gateway hub components

o Provides the OData Services for the SAP Gateway service

implementations of the backends.

Can be deployed as

o HUB (dedicated Server, recommended for most scenarios) or

o Embedded in the backend

Additional Information

o 2219596 – Central Note for SAP Fiori Front-End Server 2.0

o 2355644 – Central Note for SAP Fiori Front-End Server 3.0 (incl. Fiori 2.0)

*SAP S/4HANA requires to run SAP Fiori Front-end Server with SAP Database

SAP Fiori ArchitectureSAP Fiori Front-end server – on Premise

https://launchpad.support.sap.com/#/notes/0002219596

https://launchpad.support.sap.com/#/notes/0002355644


SAP Fiori Architecture Scenariosusing Fiori within a SAP S/4HANA on premise single system

Single System S/4H on premise

Starting point for S/4H on premise customer (net-new, or upgrade from ERP)

Recommended approach if there is no business requirement for a separate HUB

(e.g. multi-system integration)

Benefits

Usage of optimized “micro-hub” within S/4H backend system

The S/4H UI content is deployed in the backend

No more XS content (VDMs) – all analytics in S/4H designed via CDS (Core Data Services), as a result no direct http channel from Web Dispatcher to HANA XS is required anymore

Considerations

UI upgrade must be planned in sync with backend maintenance window

Currently there is a strict dependency between SAP Fiori UI and SAP S/4H backend release version and SP

Example:

S/4HANA

S/4H Core

ABAP

Gateway

Server

Gateway enabl.

sFinancials

Web Dispatcher

Frontend – HTML5

HTTP/

ODATA

SAP HANA for S/4 System

Search

INA

PRIMARY DB

CONNECTION

S/4H Fiori UIs*


SAP Fiori Architecture Scenariosusing Fiori within a SAP S/4HANA on premise integration scenario

Integration landscape (S/4H)

Typical starting point for S/4H customers is an integration of a new S/4H system in

an existing enterprise infrastructure

Similar to the strategy before S/4H, the same benefits and considerations for an

embedded or hub deployment of the Fiori FES are valid

Benefits

Easy integration of an S/4H system in an existing landscape via central Fiori FES

The additional S/4H UI content must simply be deployed on FES

No more XS content (VDMs) – all analytics in S/4H designed via CDS (Core Data Services), as a result no direct http channel from Web Dispatcher to HANA XS is required anymore

Considerations

All systems with S/4H Fiori content must run on a SAP DB

FES must be on min. NW 7.50

Currently there is a strict dependency between SAP Fiori UI and SAP S/4H backend release version and SP

Further information in: SAP FIORI FOR SAP S/4HANA Release Information Notes.

Example:

S/4H Core

S/4H

ABAP

Gateway

Server

AS ABAP on SAP DB*

SAP FES

ABAP

Central GW

Content (opt)

Gateway enabl.

sFinancials

Web Dispatcher

Central UI

Technology

Fiori UIs for ERP

Frontend – HTML5

HTTP/ODATA

SAP HANA for S/4 SystemHANA

Search

INA

PRIMARY DB CONNECTION

SAP HANA for ERP System HANA

PRIMARY DB CONNECTION

TRFC

S/4 Fiori UIs*

INA

ECC

Server

ERP on HANA

Gateway enabl.

Suite content*

Search

* if S/4 content is deployed on FES

a SAP DB is mandatory

ABAP


SAP Fiori Architecture ScenariosUsing Fiori with SAP Cloud Platform Mobile Services (CPms)

Extended Landscape Option (Cloud)

CPms as Service on SAP Cloud Platform

Starting point for more SAP CP services like Web IDE, Mobile Place/

Mobile Secure

Benefits

Easy access to SAP CPms features via Cloud subscription (Zero installation)

Secure channel from SAP CP to SAP system via Cloud Connector

Usage of special mobile features like Fiori offline

SMP administration cockpit with e.g. Application Policies

Logging and Tracing features

Considerations

Setup of Cloud Connector to access backend data

Example:

ECC

Server

SAP ERP on HANA

ABAP

Gateway

Server

AS ABAP

SAP FES

ABAP

Central GW

Content (opt)

Gateway

enabl.

ERP content*

Central UI

Technology

Fiori UIs for ERP

Frontend – HTML5

TRFC

XS Engine

Fiori App

Content

HTTP/

ODATA

SAP HANA System for SAP ERPHANA

VDM Reuse

Content

Search

INA

Web Dispatcher

HTTP/

ODATA

Cloud

HTTP/

ODATA

Cloud Connector

SAP CPCPms

Internet

PRIMARY DB

CONNECTION


SAP Fiori Architecture - Access Point Scenarios

Internal Access Point External Access Point

SAP Gateway Hub / Embedded

ON

-PR

EM

ISE

PU

BL

IC C

LO

UD

UI

SE

RV

ICE

SD

AT

A &

PR

OC

ES

SE

S

SAP Cloud Platform

SAP backend + SAP Gateway

service implementation

SAP Fiori apps & launchpad

SAP Cloud Platform

SAP Business Suite

(SAP Gateway service impl.)


https

OData provisioning*

Users access launchpad and apps via

internal SAP Web Dispatcher,

no business data leaves the intranet

Users access launchpad and apps on

SAP Cloud Platform via internet connection

OData

* Option B: SAP Business Suite scenarios only,

* for restrictions see note: #1830712

SAP Cloud Connector

SAP Gateway Hub / Embedded

SAP backend + SAP Gateway

service implementation

SAP Cloud Platform


SAP Cloud Connector

OData

SAP Web Dispatcher

OData

*A B

http://service.sap.com/sap/support/notes/1830712


Landscape Deployment of SAP Fiori Cloud

Connect to SAP Business Suite via SAP Cloud Platform OData provisioning

External access to SAP Business Suite

Fiori frontend services in the cloud (Fiori UIs, SAPUI5

libraries, Fiori launchpad, OData provisioning, etc.)

For customers who do not run a dedicated ABAP

Frontend server / Gateway hub (on-premise)

Benefits Fiori apps for SAP Business Suite provided via cloud subscription

Cloud-based OData provisioning service

Minimized setup and maintenance for Fiori infrastructure

Considerations SAP CP OData provisioning service does not provide the

complete SAP Gateway hub functionality (Note #1830712)

SAP CP Cloud connector required to establish secure access between customer account and on-premise landscape

Gateway enablement and relevant Fiori backend components required in backend system

ExampleFrontend – HTML5

Cloud

Cloud Connector

Internet

Fiori Frontend Server

Fiori UIs

Central UI

Technology

CP OData provisioning

SRM

Server

SAP SRM

Gateway

enabl.

SRM content*

ECC

Server

ERP on HANA

Gateway

enabl.

Suite content*

SAP CRM

HTTP/ODATA

SAP Cloud Platform

On-Premise

TRFC

http://service.sap.com/sap/support/notes/1830712



Connect to SAP Business Suite & S/4HANA on-premise via SAP Gateway server

External access to SAP Business Suite &

SAP S/4HANA

Allow customers to run, extend and develop Fiori apps

in the cloud, while leveraging a central SAP Gateway

server (on-premise hub) in multi-system environments

Benefits SAP Business Suite & S/4HANA Fiori apps via cloud subscription

Usage of Fiori 2.0

Automated selection of Fiori app versions compatible to the

connected backend(s)

Central SAP Gateway server to manage OData services

Full set of SAP Gateway hub capabilities available

(optional) FES embedded deployment in single system landscape

Considerations Customer needs to operate and maintain SAP Gateway server

SAP CP Cloud connector required to establish secure access between customer account and on-premise landscape

Gateway enablement and relevant Fiori backend components required in backend system

Example

Frontend – HTML5

Cloud

Cloud Connector

Internet

HTTP/ODATA

On-Premise

FES

ABAP

Gateway

Server

S/4

Server

S/4HANA

Gateway

enabl.

S4/H content*

TRFC

ECC

Server

ERP on HANA

Gateway

enabl.

Suite content*


S/4 Fiori UIs

Central UI

Technology

SAP Cloud Platform

Fiori UIs



Connect to SAP Business Suite or SAP S/4HANA via SAP Gateway embedded

Internal access to SAP Business Suite &

SAP S/4HANA

SAP Gateway on premise (Hub or Embedded)

Frontend services in the cloud (Fiori UIs, S/4H Fiori

UIs, FLP)

Benefits SAP Business Suite & S/4HANA Fiori apps via cloud subscription

OData provisioning via Gateway on premise

Minimized setup and maintenance for Fiori infrastructure

(Optional) Gateway as Hub in multi-system landscapes

Automated selection of Fiori app versions compatible to the

connected backend(s)

Considerations Gateway configuration and relevant Fiori backend components

required in backend system

Example

Frontend – HTML5

Cloud

Web Dispatcher

Internet

HTTP/ODATA

On-Premise

S/4

Server

S/4HANA

Gateway

enabl.

S4/H content*

TRFC


S/4 Fiori UIs

Central UI

Technology

SAP Cloud Platform

Fiori UIs

Gateway

Server


SAP Fiori Architecture Extensibility - Roles

Business User DeveloperKey User, Business Expert

I want to …

➢ Change order of columns in a table

➢ Hide/Unhide tabs

➢ Change format of dates/numbers

➢ Hide/Unhide a few apps on Launchpad

My changes should …

… not affect other people.

I want to …

➢ Add/change complex business logic

➢ De-couple software lifecycle of standard

and extensions


… affect people in my company

I want to …

➢ Add/change business rules/logic

➢ Add custom fields, tables, reports, forms

➢ Use my company theme/logo

➢ Change layout


… affect people in my LOB/company


SAP Fiori Architecture In-App and Side-by-Side Extensibility

In-app extensibility

Context-aware extensions, utilize tight coupling

Capabilities: Field extensibility, UI adaptation, UIs,

business logic extensions, queries, analytics, APIs

Side-by-side extensibility on SAP Cloud Platform

Integrate with the outside world, build own applications

Capabilities: SAP Cloud Platform to build and operate custom

UIs, applications, services, integration, process steps

+Primary method of extensibility

Benefit from loose coupling (lifecycle, runtime,

scaling)

Utilize rich services (e.g. mobile, documents, ML)

custom data marts with replicated or federated

business data

PaaS approach giving choice of appropriate

programming environment, allowing to go beyond

predefined extension patterns

Same extensibility approach for all SAP products

Cover last mile of adaptation for key users

Similar approach as in competitor products

Utilize tight coupling to

extend within SAP transactions

achieve high performance

leverage embedded S/4HANA analytics

provide hooks for side-by-side extensibility

Many proven and stable mechanisms exist,

e.g. UI adaptation, field extensibility, ... –

complemented by business configuration

extension points foreseen by SAP


SAP Fiori Architecture Extensibility Cloud and On Premise

SAP Business Suite

Classic customer and partner development

Extensions Modifications

User Interface

Application

Database

Sid

e-b

y-s

ide e

xte

nsib

ility

on

SA

P H

AN

A C

loud P

latform

AP

PU

ID

B

User interface

User interface

Application

Application

Database (SAP HANA)

Database (SAP HANA)

Public APIs SAP Customer, Partner

Key user extensibility

Key user extensibility

Classic extensibility

Cloud

In-App Extensibility

On-Premise


SAP Fiori ArchitectureExtensibility


SAP Fiori Architecture SAPUI5 Flexibility Services

SAPUI5 flexibility services provide capabilities to flexibly adapt an app and store the changes context-based in a layered

repository. This allows, for example, customers to create their own SAPUI5 entities based on the delivery of SAP without having

to modify existing entities in a lower layer. At runtime all changes made to an app are interpreted to define the final UI.

Key capabilities

➢ Provide flexibility infrastructure used by several flexibility tools

➢ Allow separation of content delivered by SAP, industries,

partners*, customers and end-users

➢ Store UI changes in a layered repository

➢ Retrieve UI changes at runtime and generate the final UI

➢ Enable context-based UI adaptation*

➢ Provide for different user groups tools to adapt the UI in a

convenient way, e.g. WYSIWYG tools for key users at runtime

Benefits

➢ Simplified, cost-effective, and easy to use UI change process

➢ Increased end user acceptance through optimized UI layouts

➢ Upgrade safe when adapting the UI

➢ Easy and intuitive way for business users to change the UI


1. In Adaptation Mode > Create custom field(s)

SAP Fiori Architecture Key User Extensibility - Custom Fields & Logic

2. Define Custom Fields & Logic(Note: here we extend the OData service)

3. Manage the Usage


SAP Fiori ArchitectureABAP Custom Code Migration

Suite on anydatabase

Suite on HANA

S/4HANA on premise

S/4HANA Cloud

SAP HANA and

Unicode migration

Simplification changes

Side-by-Side Extensibility based on HANA Cloud Platform

Classic Extensibility with full access to ABAP development tools

Key User In-App Extensibility

Extensions


SAP Fiori Architecture

Cloud - Transition from Classic to Cloud

Minimize customer / partner individual steps and communication

Separation of Concerns

➢ Clear logical separation of custom / partner objects and SAP standard objects

➢ Access to SAP objects only via whitelisted APIs, no modifications, enhancements follow strict guidelines

➢ Regular SAP updates must not lead to adaptation needs for custom / partner code

SAP Standard

Customer / Partner

Classic extensions

SAP Standard

Separation of

Concerns

Public Model / WhitelistBAdI CDS APIs

Side-by-side

(SAP HCP)In-app

Extensions designed for cloud• Modifications

• Usage and include

of SAP objects

without limitation

• Direct DB writes

• Dynamic calls

• Implicit

enhancement

spots

• Code generation

Access via

white-listed,

stable interfaces

(API HUB)


SAP Fiori Architecture SAP Web IDE - Key Use Cases

Extend SAP Fiori applications

• Extend existing SAP Fiori applications via predefined

extension points

• Use text editors and graphical tools

Build SAP Fiori, SAP S/4HANA & SAPUI5

applications

• Leverage out of the box code templates based on SAP best

practices

• Easily deploy to various SAP platforms

Develop IoT applications

• Jumpstart development with IoT-specific templates

• Use predefined SAPUI5 components targeted for IoT

Develop SAPUI5 hybrid mobile applications

• Create, test, build and deploy Apache Cordova hybrid

mobile apps

• Leverage mobile services integration


SAP Fiori Architecture SAP Web IDE: Landscape Overview

External servicesPlugins & templates

SAP Gateway

(OData services)

Internet of Things

Overview page

Hybrid App Toolkit

ABAP

SAP HANA (OData services)

REST servicesSAP Web IDE

SAP HANA apps

SAP Fiori apps

IoT apps

Hybrid mobile apps

SAP

HANA

SAP HANA

Cloud

Platform

SAP

Mobile

Platform

Data SourcesSDK


SAP HANA Cloud

Permanent File

System

(App Projects)

Permanent File

System

(App Projects)

DI (Che) Orion

RR GIT

(App Projects)GIT

(App Projects)

RR R

External Services

UI5 VersionGW, HANA, XS,

Git, JAM . . .

HTTPSR

Logger

Notification

Manager

R

UI5 VersionUI5 Version

R

Learning Center

R R

R

Dispatcher

SAP Fiori Architecture SAP Web IDE: Landscape Overview


SAP Web IDE

SAP Gateway

SAPUI5

VersionWS Manager

SAP HANA Cloud Connector

Git(App Projects)

SAP HANA Cloud Platform

Business Suite / ERP

HTTP(S)

Corporate Network / IntranetWindows OS

Linux OS

Mac OS X

(all 64-bit)

HTTPS

Cockpit

Permanent File

System

Browser

Trusted RFC

Internet / Cloud

HCP Cockpit

Destination

SAP Fiori Architecture SAP Web IDE: Develop on SAP Hana Cloud Platform

https://account.hanatrial.ondemand.com/cockpit



SAP Fiori Architecture SAP Web IDE: Run SAP Fiori Apps on SAP Hana Cloud Platform

SAP Web IDE

SAP Gateway

Via SAP HANA Cloud

Connector

WS Manager Git(App Projects)

Corporate Network / IntranetHTTPS

HTML5 Apps

Dispatcher

User Workspace

IDE in browser

Internet / Cloud

Application

OData

OData

Push / Fetch

SAP S/4HANA

Trusted RFC

Deploy


IDE Platform

Toolsets

Platform

SAP

Core

Resourc

e index

Perspect

ive

File

mgmt

Docume

nt

Shell

(toolbar, menu, repo browser, etc.)

Console,

Log

HCP/XS

InterfaceMonitor

Selection

, Focus

Docume

ntation

Preview RunSource

controlProblem

Project mgmt

(setting, template,

etc.)

Workspace (orion/DI)

interface

Editor and generic language services

(validation, formatting, snippet, outline, etc.)

Specific language services

(JSON, JS, XML, YAML, CSS)Mock data modeler Templates JS service

Bootstra

p

Plugin services

(proxies, registration, interfaces and events, etc.)

Configuration

managementDebug

hook

Error

management

UI5

(project, run, metadata

handler)

Fiori

(specific XML/JS services, ABAP interfaces, learning center)HANA

HCP

Extensio

n

HCI FLP

SAP Fiori Architecture SAP Web IDE - Component layers


Developer can install the SAP Web IDE on his/her local machine as a co-IDE to the cloud version for offline development.

Personal edition for productive usage➢ Single developer on local machine

➢ Use as a co-IDE to the cloud version

➢ Quarterly releases

➢ Subset of SAP HANA Cloud Platform edition capabilities for offline

development

➢ Data consumption and deployment using connectivity with on-premise

backend systems

➢ Included with SAP HANA Cloud Platform license

Application build for developers➢ Minification of the application's JavaScript files

➢ Collection of files into a distributable runtime package

SAP Fiori ArchitectureSAP Web IDE – Personal Edition


Corporate Network / Intranet

Browser

SAP Gateway

Business Suite / ERP

HTTP(S)

Trusted RFC

Local

SAP Web IDE

Permanent File

System

Orion Git(App Projects)

SAPUI5

Version

SAP Fiori ArchitectureSAP Web IDE – Personal Edition


SDK for extending SAP Web IDE by adding your own templates and plugins. You may offer your plugin through a marketplace

for customers, partners and developers.

Plugin and template creation with SAP Web IDE SDK➢ Tutorials and how-to

➢ Guidelines and best practices

➢ API reference for developing plugins

➢ Catalog for plugins and templates

➢ Framework for plugins lifecycle

➢ Wizard for creating new plugins and templates

➢ Ability to reuse existing template screens and user created templates

➢ Auto complete for editing template files in code editor

➢ Test plugin projects within SAP Web IDE

➢ Deploy plugins

SAP Fiori ArchitectureSAP Web IDE - SDK


SAP Fiori Architecture - MobileSAP Web IDE - What is SAP Hybrid App Toolkit (HAT)?

Enables developers to develop and build Apache Cordova

hybrid apps in SAP Web IDE

HAT has 3 components that are provided as a plugin and

an add-on to SAP Web IDE:

The SAP Web IDE plugin for Hybrid App Toolkit

HAT Connector to local build environment (Cordova CLI) or Cloud

Build Service (requires SAP HCP, mobile service for SAP Fiori

subscription)

SAP Hybrid App Toolkit Developer Companion


SAP Web IDE

HAT

(add-on)

Android SDK* Tools

XCode

HAT Connector

Kapsel

Hybrid

Application

Toolkit

(plugin)

SDK* : Software Development Kit

Cloud Build Service*

Visual Studio

Developer Companion



SAP Fiori Architecture - MobileSAP Web IDE - SAP Hybrid App Toolkit Companion

The SAP Hybrid App Toolkit Developer Companion is

a mobile application that runs on a mobile device or device emulator.

➢Shortens time to value by eliminating the need to rebuild and redistribute

entire app

➢Built using the Cloud Build Service, no on-premise development

landscape required

➢Follows same build flow as your production app (aka support for

branding, custom app name)

➢Supports 3rd party/custom plugin integration

➢Enables push testing

➢ Integrated into the Fiori mobile app delivery lifecycle

Developer

Companion

Kapsel



SAP Fiori Architecture - MobileSAP HAT - Cloud Build Service

The Cloud Build Service is a feature of HAT provided through SAP

HCP, mobile service for SAP Fiori

➢Creates hybrid apps for iOS and Android using completely cloud-based

tools. No on-premise installation necessary.

➢Supports inclusion of public, 3rd party and custom Cordova plugins

➢Automatically inserts the app into Mobile Place, SAP’s enterprise app

store for mobile devices, for simplified lifecycle management

➢Requires a subscription for SAP HCP, mobile service for SAP Fiori for

each user that consumes an app built by the service

The Cloud Build Service is a feature of HAT provided through SAP HCP,

mobile service for SAP Fiori


SAP Fiori Architecture - Mobile SAP Web IDE – SAP Fiori Elements for Hybrid apps

Hybrid templates are provided➢ SAPUI5 Mobile Kapsel Application Project **

➢ SAPUI5 Master Detail Kapsel Application **

➢ SAPUI5 Master Detail Kapsel Offline Application **

➢ SAP Fiori Worklist Application *

➢ SAP Fiori Master Detail Application *

➢ CRUD Master-Detail Application *

➢ SAPUI5 Application *

➢ List Report Application *

Create a new project

File > New > Project

Additional templates of any kind can be created, added and managed


SAP Fiori Architecture SAP Fiori Elements - Overview

SAP Fiori Elements increase developer efficiency, consistency, and quality

through a metadata driven approach to SAP Fiori app development.

Key capabilities➢ Provide high code quality templates and controllers for re-use

➢ Draft, application infrastructure, and message handling support

➢ SAP Fiori launchpad integration, tiles, catalog, navigation

➢ Support of UI Flexibility, xRay and automatic test tools

➢ SAP WebIDE Plugin, GIT integration, App Descriptor support

➢ CDS annotations and SAP Web IDE Annotation Modeler

➢ Break-out capabilities

Benefits➢ Scale SAP Fiori development by applying a meta data driven approach

➢ Reduce amount of frontend code for SAP Fiori apps

➢ Foster design consistency and keep apps up-to-date with evolving design guidelines

➢ Embedded in overarching SAP Fiori concepts for UI flexibility, lifecycle management

and application notion


At Runtime… Application Developer Design Time…

Web IDE

Annotation Modeler Plugin

Project Template Wizard

ABAP Dev Tools in Eclipse

Core Data Service

Definitions

Gateway Service Builder

(Exposure via SADL)

Application Developer

OData Service

exposes data & relations

OData

Annotations

apply terms to

service elements

OData

Vocabularies

define semantics

through terms

What is displayed

UI5 Views

+

UX + Central Template Dev

UI5 XML View Templates

based on Vocabulary Terms

using UI5 Smart Controls &

generic controller logic (draft, …)

How is it displayed

SAP Fiori Architecture SAP Fiori Elements – How it works: Bird’s-eye view (1,000 ft)


SAP Fiori Architecture SAP Web IDE – Fiori Elements: Smart Templates

A template wizard guides the user through the definition of an application and generates the code.

Standard templates are provided

➢ Basic SAPUI5 project

▫ SAPUI5 Application Project

➢ SAP Fiori Elements

▫ List Report Application

▫ Overview Application

▫ Analytical List Page

➢ SAP Fiori application

▫ Fiori Master Detail Application

▫ Fiori Master Master Detail Application

➢ Plugin Development

➢ Extensibility of SAP Fiori and SAPUI5 applications

Sample applications

➢ easily ramp up Fiori development by audited ready-to-run end-to-end samples

Template selection for new component

Template selection for new project


SAP Fiori ElementsSAP Fiori UI Development with SAP Fiori Elements & UI Flexibility

Freestyle design

Coding

Hybrid design

Coding &Template

Smart design

Template based

End user - Personalization

Runtime context

Designtime

Key user – Run-time adaptation

➢ No coding

➢ Highest

development

efficiency

Development EfficiencyDevelopment Flexibility

Industry

Runtimerole locale

variant

device …

➢ Manually coded

➢ Highest

development

flexibility

SAPUI5 Controls

SAP Fiori Elements

Business data(SAP Gateway / OData)

Semantic meta data(OData annotations)

Partner

Administrator

End User

UI Flexibility


OData InA

OData/HTTP InA/HTTP

Database Tier

UI Integration Tier

R

R

SQLR

Service Tier

UI Tier

Application TierCDS

SAP Fiori ArchitectureOpen, flexible, and standardized Programming Model – 1/3

• Independent of application tier, decoupled via a small number of HTTP-based protocols

• Support wide range of devices and device capabilities

• Cloud-ready, scalable again HTTP helps a lot to get there

• Focus on end-user experience

• Efficiently build large number of consistent, responsive apps

• Stay open for potential change to new UI technologies, UI frameworks, specialized

protocols (over HTTP)



• Consistency for users with respect to SAP Fiori® Design and UX across all apps and

across all Application Tiers

• Fast UI innovation for the end user decoupled from Application Tier

• Reuse of the entire SAP UI technology and design investments and innovations

for all Application Tiers

• Contains all SAP UI related artifacts and tools,

e.g. SAP Web IDE, SAPUI5 library, SAP Fiori apps

• Mobile and cross-system services (e.g. Collaboration, Search, Analytic aspects)

• Single point of access for multiple application tiers

• Single point for authentication, navigation and interoperability

• Mediator between UI and application tier: hybrid system landscapes/deployment scenarios

OData InA

OData/HTTP InA/HTTP

Database Tier

UI Integration Tier

R

R

SQLR

Service Tier

UI Tier

Application TierCDS


OData InA

OData/HTTP InA/HTTP

Database Tier

UI Integration Tier

R

R

SQLR

Service Tier

UI Tier

Application TierCDS


• SAP HANA DB for SAP S/4HANA

• Wide variety of existing and emerging application servers

• Access to database tier via CDS and SQL

• Virtual Data Model (VDM): Database- and UI-independent, basis for generic infrastructure

(e.g. Extensibility, SQL-optimization)

• Service tier defines contract and guarantees isolation


UI development with a metadata-

driven approach (templates of

SAP Fiori Elements) and support

for flexible freestyle Apps

CDS as the one and only

technology for data definition

with advanced view building

capabilities and supporting

declarative business logic

Annotations are used to influence

the SAP Fiori Elements but in

addition the runtime behavior for

transactional processing, analytics

and search

SQL Views are generated by CDS

for runtime access by SADL and

BW

SAP Fiori User Experience

for all devices and users

with role-oriented design

Editors for the programming model

artefacts in mostly homogenous

development environment

SAP Gateway with OData Hub for

multiple backends or as a service in

the cloud with infrastructure in the

ABAP backend

SADL dispatches requests in the

new CDS-based programming model

to BOPF for transactional execution,

to SAP Business Warehouse for

advanced analytics. Default is query-

pushdown to SAP HANA

BOPF (now part of SAP NetWeaver)

offers well defined code-exits for

structured ABAP business logic

including stateless and draft support

Active data and draft data are

persisted in different tables with

orchestration by BOPF

SAP Fiori Architecture SAP S/4HANA - ABAP Programming Model

Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche

Genehmigung durch SAP SE oder ein SAP-Konzernunternehmen nicht gestattet.

In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden. Die von SAP SE oder deren Vertriebsfirmen angebotenen Softwareprodukte

können Softwarekomponenten auch anderer Softwarehersteller enthalten. Produkte können länderspezifische Unterschiede aufweisen.

Die vorliegenden Unterlagen werden von der SAP SE oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich zu Informationszwecken.

Die SAP SE oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler oder Unvollständigkeiten in dieser Publikation.

Die SAP SE oder ein SAP-Konzernunternehmen steht lediglich für Produkte und Dienstleistungen nach der Maßgabe ein, die in der Vereinbarung über die jeweiligen Produkte und

Dienstleistungen ausdrücklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche Garantie zu interpretieren.

Insbesondere sind die SAP SE oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehörigen Präsentation dargestellte Geschäftsabläufe

zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu veröffentlichen. Diese Publikation oder eine zugehörige Präsentation, die Strategie und etwaige künftige

Entwicklungen, Produkte und/oder Plattformen der SAP SE oder ihrer Konzernunternehmen können von der SAP SE oder ihren Konzernunternehmen jederzeit und ohne Angabe

von Gründen unangekündigt geändert werden. Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur

Lieferung von Material, Code oder Funktionen dar. Sämtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die tatsächlichen

Ergebnisse von den Erwartungen abweichen können. Dem Leser wird empfohlen, diesen vorausschauenden Aussagen kein übertriebenes Vertrauen zu schenken und sich bei

Kaufentscheidungen nicht auf sie zu stützen.

SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken oder eingetragene Marken der SAP SE

(oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Ländern weltweit. Alle anderen Namen von Produkten und Dienstleistungen sind Marken

der jeweiligen Firmen.

Zusätzliche Informationen zur Marke und Vermerke finden Sie auf der Seite http://www.sap.com/corporate-de/legal/copyright/index.epx

© 2017 SAP SE oder ein SAP-Konzernunternehmen. Alle Rechte vorbehalten.

http://www.sap.com/corporate-de/legal/copyright/index.epx

sap fiori architecture overview to deep dive - with focus...

Documents