Вы находитесь на странице: 1из 267

SAP Fiori Technical Administration

Workshop
Presenters: Binson VA, Sean Keane, Adam Cody (UI Development Team, COE Ireland)
August, 2016
Content

• SAP Fiori Introduction


• SAP Fiori Architecture
• SAP Gateway and OData Service
• SAPUI5 Introduction
• SAP Fiori Deployment Options
• Gateway Administration Tasks
• SAP Fiori Launchpad Configuration
• SAP Fiori Security
• SAP Fiori My Inbox Overview
• Extending SAP Fiori Application using SAP Web IDE

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 2


SAP Fiori Introduction
Consumer user experience is the new
standard for enterprise applications …

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 4


…but most users still experience
SAP through SAP GUI.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 5


Our Goal:
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

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 6


Introducing SAP Fiori

A collection of apps with a simple and easy to use experience


for broadly and frequently used SAP software functions that
work seamlessly across devices – desktop, tablet, or
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 7
Introducing SAP Fiori

Enables our customers to leverage their existing SAP investments


by providing instant value for all their employees.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 8


Introducing SAP Fiori: Initially 25 Apps

Role Apps

Manager Approve Requests ● Approve Leave Requests


Approve Travel Requests ● Approve Travel Expenses
Approve Timesheets ● Approve Shopping Carts
Approve Purchase Orders ● Approve Requisitions
Approve Purchase Contracts ● My Spend

Employee My Timesheet ● My Leave Requests ● My Travel Requests


My Paystubs ● My Benefits
My Shopping Cart ● Track Shopping Carts

Sales Representative Create Sales Orders ● Change Sales Orders


Track Sales Orders ● Track Shipments ● Customer Invoices
Check Price and Availability

Purchasing Agent Track Purchase Order ● Order from Requisitions

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 9


SAP Fiori Development Approach

Engaged with 250+ customers to


understand the most common business
functions and how people want to work …
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 10
SAP Fiori and SAP Mobile Platform Future Plan
Today Fiori
functional-based applications role-based applications
From: One transaction for multiple roles exposing all To: Decomposed apps for each role exposing only
data & functions to all users relevant data & functions

From: Multiple entry points for the user and inconsistent To: One entry point for the user and UX following
user experience common design directions
(e.g. ERP vs. CRM)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 11


SAP Fiori and SAP Mobile Platform Future Plan

Now:
Browser-based applications
Desktop & Mobile Web Hybrid Web
with Direct Access
Browser (HTML5) Container *1
via SAP NetWeaver Gateway
Fiori Client
Optionable:
SMP: Native Application via
Hybrid Web Container
SAP NetWeaver Gateway SMP: Offline Functionality

SAP Business Suite

*1 planned feature

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 12


Our mission
Simplify your world
through design

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 13


SAP
user experience strategy

new renew enable


© 2016 SAP SE or an SAP affiliate company. All rights reserved. 14
SAP Fiori UX Design Principles

Role-based Responsive Simple Coherent Delightful

Designed for you, Supports how and Focuses on Provides one fluid, Makes an emotional
your needs, and where you work, at what’s intuitive connection
how you work any time important experience

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 15


SAP Fiori role-based experience for top tasks
Before SAP Fiori UX SAP Fiori UX
Functional-based applications Role-based applications
From: One transaction for multiple roles To: Decomposed apps for each role
exposing all data & functions to all users exposing only relevant data & functions

From: Multiple entry points for the user and To: One entry point for the user and UX
inconsistent user experience (e.g. ERP vs. CRM) following common design directions
SAP Fiori UX – Key Features
SAP Solutions applying SAP Fiori UX
App Types
SAP Fiori Launchpad
Mobilizing Apps applying SAP Fiori UX
SAP Jam Integration
SAP Fiori UX for SAP Business Suite
User Roles Across Lines of Business and Industries
Finance Human Resources Sales & Marketing Procurement Cross LoB

 Accounts Payable  Employee  Sales Representative  Purchaser  Manager


Accountant  Manager  Inside Sales  Inventory Accountant  MDG Expert
 Accounts Receivable Representative
 Materials Requirement  ILM Archiving Expert
Accountant  Sales Manager
Planner  Security Manager
 Cash Manager
 Collection Specialist  Employee
 Controller  Manager
 Cost Manager
 G/L Accountant
 Sales Manager
 Manager

Manufacturing Supply Chain R&D, Engineering Asset Management Industries

 MRP Controller  Supplier  Project Manager &  Maintenance Worker & Retail
Planner Planner  Master Data Specialist
 Quality Engineer  Supply Planner  Promotion Specialist
 Production Planner  Transportation Manager  Program Manager  Retail Store Associate
 Prod Worker/Supervisor  Warehouse Manager  Project Team Member Insurance
 Claims Supervisor
 Shipping Specialist
 Product Manager
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 18
SAP Fiori app types

Transactional Analytical Factsheets SAP Smart Business

Task-based access Insights Search and explore Insight to action cockpit


Access tasks to create, change, Get a visual overview of a View essential information about Analyze and evaluate strategic
approve processes with guided complex topic for monitoring or an object with contextual or operational KPIs in real time
navigation tracking purposes navigation between related and trigger the right action
objects

Runs on: Runs on:


Runs on HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 19


Transactional Apps (AT1)

These apps let you perform transactional tasks, such


Transactional (AT1)
as creating a leave request for an employee. They
Task-based Access represent simplified views and interaction with existing
Access to tasks like change, create, or entire
processes with guided navigation
business processes and solutions. They run best on an
SAP HANA database, but can also be ported to other
databases with acceptable performance.

Runs on any
DB and HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 20


Analytical Apps (AT2)

Analytical incl. Smart Business These apps let you get a role-based insight into real-time
(AT2) operations of your business by collecting and displaying key
Insight to Action figures directly in your browser. They can be SAP Smart
Visual overview over a complex topic for Business applications but can also be other analytical,
monitoring or tracking purposes predictive, and planning applications. Analytical apps combine
the data and analytical power of SAP HANA with the integration
and interface components of SAP Business Suite. They provide
real-time information on large volume data in a simplified front
end for enterprise control. With SAP Smart Business, you can
closely monitor your most important key performance indicators
(KPIs) in real time and react immediately on changes in market
conditions or operations..
Runs on HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 21


Factsheets (AT3)

FactSheet & Contextual These apps display contextual information and key facts about
Navigation (AT3) central objects used in your business operations. Fact sheets
Search and Explore are designed to be intuitive and harmonized. From a fact sheet
View on essential information about an object area (tile), you can drill down into its details. You can easily
and contextual navigation between related
objects navigate from one fact sheet to its related fact sheets. For
example, you can navigate from a document to the related
business partner or to the master data.

From fact sheets, you can start transactions by navigating to


transactional apps, or by accessing the back-end system
directly. For example, from a document fact sheet, you can
access the back-end system to display document details or to
edit the document in SAP GUI or Web Dynpro. – Desktop only
Runs on HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 22


SAP Smart Business
Enabling Different Working Models

Fiori Launchpad Performance-driven Working Model Analyze in Lumira*

Smart Business Analysis Path CxO Lumira Story


Drill-Down Framework* Cockpit* Viewer*
Collaborate
Situation-driven Working Model

HANA Search,
C‘est Bon, Fact Sheet

Execute
Task-driven Working Model Transactions
KPI Modeler
& Repository

Work Lists with Embedded Analytics, Ad-hoc queries


(Design Studio)*

* Coming soon

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 23


SAP Fiori Launchpad
Web-based Entry Point for SAP Business Applications Across Platforms and Devices

SAP Fiori Launchpad is a role based,


personalized, real-time and contextual
aggregation point for business applications
and analytics.

It runs on multiple devices, using


responsive web design, and is
deployable on multiple platforms.

It is designed according to the simple and


intuitive SAP Fiori user experience, while
supporting established UI technologies.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 24


SAP Fiori Launchpad
One entry point for the user

Search across and


Role based with one within apps to get
common role immediate answers
definition
Color coding alerts
user for any overdue,
new or immediate
actions
News and feeds to
enhance
SAP Jam integrated to
collaboration
provide instant feedback
on notifications and
group activity

Group tiles for Dynamic charts to


personalized provide high level,
content organization real-time overview

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 25


SAP Fiori Launchpad
Enhanced Personalization

Capabilities
• Create pre-configured groups and catalogs for
the home page
• Wide choice of ready-to-use tiles
• Add, delete or group tiles

Benefits
• Manage apps based on roles and usage
• Apps assigned by specific roles so users get
only what they need
• Personalize homepage based on user
preference

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 26


SAP Fiori Launchpad
Search Capability

Capabilities

• View a list of your recent searches


• View a list of your recently launched
applications

Benefits

• Get answers to your questions


immediately
• Get to the desired application immediately

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 27


SAP Fiori Launchpad
Responsive Design

Capabilities

• Visual design adapts automatically to the


respective screen size
• Fiori Launchpad runs on both mobile and
desktop devices

Benefits
• Seamless experience across all device
types - smartphones, tablets and desktops

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 28


SAP Fiori Launchpad
Summary of key features and capabilities
Role based
• Wide choice of ready-to-use applications
• Preconfigured home page content
People aware
• Personalizable content
• Easy bookmarking (home page or browser bookmarks)
• Collaboration capabilities
Context aware
• Preserving context during navigation
• Suggest relevant follow up actions
Search Capability – across documents and apps
Responsive Design – runs on multiple devices
Fiori Launchpad Designer - for easy configuration
Theming and branding - via Theme Designer
Open and extensible

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 29


Mobilizing Apps applying SAP Fiori UX

Mobile Specific Options


 Desktop & Mobile Web Browser (HTML5)
 SAP Fiori Client mobile app
– Improves caching, life cycle management,
etc. (SMP optional)
Lab Preview
Desktop & Mobile Web Enhanced with SAP Mobile Platform (SMP)
SAP Enterprise Portal - SAP Fiori Client SAP Fiori Client mobile app
Browser (HTML5)
desktop & mobile mobile app +
Kapsel SDK 3.0 optimized for deployment in enterprise
Client Runtime consumption
infrastructure
Server Runtime
 SAP Fiori Client mobile app + Kapsel
SDK
– Native device capabilities
SAP Mobile Platform
– Foundation for Offline access, push
notifications and additional security
SAP NetWeaver Gateway
 Hybrid Web Container + Kapsel SDK
– Leverage third-party native container to
SAP Business Suite / BST Powered by HANA run SAP Fiori via SAP Mobile Platform
HANA XS
AnyDB/HANA ***

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 30


Mobilizing Apps applying SAP Fiori UX
SAP Fiori Client
 Provide HTML5 and CSS 3.0 browser for iOS, Android, and Windows
 Support of app-specific on-device persistent caching strategy Optimized

− Direct URL download with cache synchronization on app-level via manifest timestamp
− Optimized URL download with cache synchronization based on manifest content via SMP
 Full-screen mode either by dedicated JavaScript API or by meta-data tag in HTML
 Attachment and document viewer
− PDF, MS Word, MS Excel, MS PowerPoint, PNG, et cetera Direct
− Viewer is launched in full-screen mode within the browser frame
− By an action or by a gesture it is possible for the end user to close the attachment window

Optimized

SAP Mobile Platform


Server
Web Server

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 31


SAP Fiori and SAP Jam Integration*

• In-context sharing of Business Data in SAP Jam


 Across CRM, Finance, Sales & Distribution, Sentiment
Analysis…

 Launchpad Integration
Stay informed about updates and notifications

 Discussions/ embedded object feeds


Share and discuss with colleagues in business
context

 Integration in SAP Smart Business cockpits

*requires an additional SAP Jam Enterprise License


© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 32
SAP Fiori Architecture
System Landscape & Architecture
Software Prerequisites
Architecture Overview
Apps Types Architecture Overview
SAP Fiori Launchpad Architecture
Gateway Deployments Options
Security Configuration Options
Software Prerequisites
What do I need to get started?

Back-end prerequisites vary across stack components and across the different types of apps. For example, apps that fall into the SAP Analytical Apps
Type require HANA as the database. Minimum release may vary per app.
App types

Components Transactional Apps Analytical Apps Factsheet Apps

• Minimum SAP Ehp 7 for SAP ERP SP02


SAP Hana Innovations for
Minimum SAP EhP3 for CRM SPS 02 • SAP HANA 1.0 SPS06 • SAP HANA 1.0 SPS06
Business Suite
• Minimum SAP Ehp 3 for SAP SRM 7.0 SPS 02

• Minimum SAP ERP 6.0 SP15 or higher


• Minimum SAP SRM 7.0 SP11 or higher
Older Releases of SAP Business N/A customer needs to be on SAP • N/A customer needs to be on SAP
• Minimum SAP CRM 7.0 SP06 or higher
Suite Hana Innovations for Business Suite Hana Innovations for Business Suite

• Minimum NW 7.31 SP04 and SAP NW Gateway 2.0


or or NW 7.40 SP04 • NW 7.31 SP04 or NW 7.40 SP04 • NW 7.31 SP04 or NW 7.40 SP04
Middleware
HANA XS Engine • HANA XS Engine

Database • HANA or any other DB • HANA • HANA


For more detailed information go to http://help.sap.com/fiori_overview

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 35


SAP Fiori Architecture
SAP Business Suite powered by SAP HANA

 SAP Business Suite powered by HANA including HANA 2-tier stack


 Support of SAP Suite on HANA and HANA XS Engine based on OData protocol
 Support of smartphones, tablets, and desktop applications (responsive design)
 Same apps can be used via the Internet w/o any local installation
 Connectivity via HTTPS including cross-site request forgery protection (CSRF)
 Logon via single sign-on and to logout via single-logout (SAML2, SSO cookie)
 User and role management between ABAP and HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 36


SAP Fiori Architecture
Frontend Technology

 Fiori apps build with SAP UI5 technology (HTML5)


 UI artifacts are deployed with ABAP technology
 Support of smartphones, tablets, and desktop (by responsive design patterns)
 Different form factors and operating systems are supported with single code line
 Fiori Apps are launched and running in the Fiori Launchpad as UI components
 Business data is retrieved through OData services during runtime

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 37


SAP Fiori Architecture
ABAP Frontend Server

 Lifecycle decoupling of UI apps from backend


 Especially for apps that must also run on anyDB
 Allow faster iterations for the UI apps
 Allow changes to UI without the need for development privileges in the backend
 Add-on based delivery enables fast release circles
 Single point of UI maintenance like browser support or UI5 provisioning
 Central place for theming and branding
 Single place for configuration, personalization, and 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)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 38


SAP Fiori Architecture
High-Level Overview

SAP Mobile Platform

UI5 Content Frontend Server OData Services

SAP Business Suite SAP Business Suite



(ERP, SRM, …) (ERP, SRM, …)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 39


SAP Fiori Architecture
Mid-Level Overview

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 40


SAP Fiori Architecture
ABAP Frontend Server Overview

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 41


Transactional (AT1) Apps Architecture
Latest Business Suite Version

 Focused on transactional scenarios

 Apps are deployed by ABAP UI add-ons

 Apps are connected via OData services


 OData services are shipped via
ABAP Support Packages on the highest available
Business Suite release
 HANA and any database are supported

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 42


Transactional (AT1) Apps Architecture

• For External/Mobile access • Web Application server


Reverse Proxy (e.g. SAP Web Dispatcher) • SAP NW Gateway
HTTPS (HTML / OData) R • SAP UI5 (HTML5) control Libraries

Front-End Server • App specific Fiori Ux Add-Ons


(SAP NW 7.31 or higher)
SAP Business Suite 7i2013
Product-Specific UI Add-Ons
ERP CRM SRM SCM

UI Add-On
(SAP UI5, SAP Fiori Launchpad)
SAP NW Gateway 2.0
• Business Application Logic
Trusted RFC R
• Odata Services
ABAP Back-End Server (SAP NW 7.4)
• Both HANA and any DB supported
SAP Business Suite 7i2013*
ERP CRM SRM SCM

R * SAP HANA Innovation for


NW = NetWeaver HANA / any DB Business Suite
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 43
Analytical (T2) Apps Architecture
Analytical Apps

 Purely analytical scenarios

 Runs on HANA, executed in XS Engine

 Connected via OData services

 HANA Live (2-tier) architecture

 Using HANA based virtual data models (VDM)

 Smart Business KPI Framework

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 44


Analytical (T2) Apps Architecture
NW = NetWeaver

Reverse Proxy (SAP Web Dispatcher)


HTTPS (HTML / OData) R
• Web Application server
ABAP Front-End Server • SAP NW Gateway
(SAP NW 7.31 or higher)
• SAP UI5 (HTML5) control Libraries
SAP Business Suite 7i2013
Product-Specific UI Add-Ons • App specific Fiori Ux Add-Ons
ERP CRM SRM SCM HTTPS (OData) R

KPI Framework • HANA XS Engine for HANA


(KPI modeler, generic drill-down app) apps
UI Add-On • Fiori specific Search models
(SAP UI5, SAP Fiori Launchpad)
• Business Application SAP NetWeaver Gateway 2.0 HANA XS Engine
Logic
R
Trusted RFC SAP Fiori App Content
• Odata Services
ERP CRM SCM SAP SmartBusiness
• HANA DB supported
ABAP Back-End Server (SAP NW 7.4)
SAP Business Suite 7i2013
VDM Reuse Content
ERP CRM SRM SCM ERP CRM SCM

HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 45


Factsheets (AT3) Architecture

Reverse Proxy (SAP Web Dispatcher)


HTTPS (HTML / OData) R
• Web Application server
ABAP Front-End Server
• SAP NW Gateway
(SAP NW 7.31 or higher)
• SAP UI5 (HTML5) control Libraries
SAP Business Suite 7i2013
Product-Specific UI Add-Ons • App specific Fiori Ux Add-Ons
ERP CRM SRM SCM INA Search R
Protocol
UI Add-On
(SAP UI5, SAP Fiori Launchpad)
SAP NW Gateway 2.0 • NW Enterprise search
• Business Application Logic
• Fiori specific Search models
Trusted RFC R
• Odata Services
• Only Business Suite on HANA DB ABAP Back-End Server (SAP NW 7.4)
supported SAP Business Suite 7i2013
Search
ERP CRM SRM SCM Models

NW = NetWeaver HANA
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 46
SAP Fiori Architecture
Logical Overview (all app types)

Reverse Proxy (SAP Web Dispatcher)


HTTPS (HTML / OData) R
Progression:
(1) Only Transactional Apps can run on
Front-End Server (NW ABAP)
any DB. Fact sheets & Analytical Apps
require HANA.
SAP Business Suite
INA Search (2) Only Fact Sheets requires Search
Product-Specific UI Add-Ons Models.
Protocol
R R
KPI Framework (3) HTTPS (OData) (3) Only Analytical Apps requires
(KPI modeler, generic drill-down app) HANA XS Engine and additionally, KPI
Framework is needed for Smart
NW Central UI Add-On Business Apps.

SAP NetWeaver Gateway


HANA XS Engine (3)
R
Trusted RFC SAP Fiori App Content
ERP CRM SCM SAP SmartBusiness
Back-End Server (NW ABAP)
Search VDM Reuse Content
SAP Business Suite
Models (2) ERP CRM SCM

Any DB (1) / HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 47


SAP Fiori Launchpad Architecture
Overview

Fiori Applications must be implemented


as self-contained UI5 Components
which can be embedded into
different launch pages
 noShellIndex.html: local, isolated test without
shell services
 FioriSandbox.html: local, integrated test with
mock shell services
 FioriLaunchpad.html: productive use

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 48


SAP Fiori Launchpad Architecture
Content Model

Transaction PFCG
 Assign groups and catalogs to roles
 Assign users to roles

Fiori Launchpad Designer (FLPD)


 Target Mapping: maps navigation intent to concrete (logical
application/target)
 Tile: used to launch an application
 Catalog: set of applications a user can use and add to his
homepage
 Group: predefined set of tiles a user sees on his homepage

Transaction LPD_CUST
 Logical application launch entries decoupled from technical
implementation
 Optional: define rename rules for start parameters

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 49


SAP Fiori Launchpad Architecture
Delivered Artifacts in the Content Concept (Simplified Picture)

Technical TA “PFCG”: TA “PFCG”: Business


Roles (TCR) Roles (BCR)
Content: Content:
Application Area FLPD: FLPD: FLPD:
Business Role
Catalog (TC) Catalog (BC) Group (BCG)
Frontend

FLPD: FLPD: FLPD: FLPD:


App Launcher Target Mapping Target Mapping App Launcher

TA “LPD_CUST”
Navigation Target

Application
(UI5 BSP)
BE

TA „PFCG“: Backend Role


for App’s oData Service

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 50


ABAP Frontend Server (Gateway + SAPUI5)
Deployment Options

1) Central Hub Deployment of SAP 2) Embedded Deployment of SAP


NetWeaver Gateway NetWeaver Gateway

SAP NW Gateway Fiori UI Add-ons


Server
SAP UI 5 SAP NW Gateway Fiori UI Add-ons
Server
SAP UI 5

SAP NW Gateway IW_BEP SAP NW Gateway IW_BEP

Fiori Integration Add-ons Fiori Integration Add-ons

SAP ERP SAP ERP

Please look at help.sap.com. Embedded Versus Hub Deployment

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 51


SAP Gateway and OData Service
SAP Gateway
Why do we face such challenges?

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 53


SAP Gateway
Customer needs and the value propositions of the product

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 54


The solution : OData

Browser based Mobile Enterprise Cloud Social


applications devices software

OData

SAP Gateway

SAP Business Suite

CRM SRM SCM PLM ERP

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 55


SAP Gateway – Netweaver + Gateway Software Components

 GW_CORE: Responsible for Serialization & Deserialization


 IW_FND: OData service handling, routing, security
 IW_BEP: Backend Event Publishing

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 56


New AddOn structure in 7.40

7.02 7.40

IW_HDB 100
IW_FNDGC 100

Gateway 2.0

IW_BEP 200

IW_FND 250
SAP_GWFND 7.40

NW 7.40 SP01

GW_CORE 200

Complete transfer
Partial transfer

Partial transfer

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 57


Gateway 2.0 SP Equivalence to NW 7.40 (SAP Note: 1942072)

Min.
Product NW Basis SWCV/ GW SP-Stack SPS 06 SPS 07 SPS 08
GW_CORE 190 SP02 SP03 SP04
IW_FND 240 SP02 SP03 SP04
IW_BEP 200 SP06 SP07 SP08
NW 7.00 IW_SCS 200 SP06 SP07 SP08
IW_PGW 100 SP02 SP04 SP05
Gateway 2.0

IW_SPI 100 SP02 SP03 SP04


IW_GIL 100 SP02 SP03 SP04
GW_CORE 200 SP06 SP07 SP08
IW_FND 250 SP06 SP07 SP08
NW 7.02 IW_HDB 100 SP02 SP03 SP04
IW_CBS 200 SP06 SP07 SP08
IW_CNT 200 SP06 SP07 SP08
NW 7.40 IW_FNDGC 100 SP00 SP01 SP02
NW 7.40 NW 7.40 SAP_GWFND 7.40 SP01 SP04 SP06?

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 58


SAP Gateway
OData - “ODBC” for the web

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 59


Examples of SAP Solutions – powered by SAP Gateway

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 60


SAP Gateway
OData used in SAP’s standard offerings

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 61


HTML5 (SAP UI5) based Standard Solutions from SAP

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 62


SAP Fiori - Keeping simple things simple
SAP Fiori users benefit from SAP Gateway

SAP Fiori key features and capabilities


 Apps designed for increased productivity. Examples:
 Tasks pulled together in one view…
 Relevant context is provided to be able to make the right
decision, on the spot
 Gesturing for quick approvals
 Access to contact information
 Apps can be assigned by specific roles so users get
only what they need
 Users can personalize the order of the applications
Desktop & Mobile Web  The apps can be adapted and aligned to corporate
Browser (HTML5)
branding
SAP Gateway  Additional workflow scenarios are easily added
 Responsive design allows the same application is
SAP Business Suite available for different form-factors

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 63


SAP Gateway Demo
OData used in SAP’s standard offerings

 Demo:
 SAP Fiori Approve Purchase Order: help link
 SAP Fiori Application Reference Library: link

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 64


OData Introduction
What is the Open Data Protocol (OData)?

OData is an open standard originally developed by


Microsoft, but now managed by the Oasis Organisation.
SAP Annotations
It is based on the Atom Publishing and Atom Syndication
standards, which in turn, are based on XML and HTTP(S). OData
The objective of the OData protocol is to provide a vendor- Atom
Publishing
neutral, Web-based API that fully complies with the design
Atom
principles of Representational State Transfer (REST). JSON Syndication

OData is also extensible. This allows SAP to supplement


XML
the data types used by OData with extra information from
the ABAP Data Dictionary. HTTP(S)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 66


Output Formats Supported by OData

JSON XML

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 67


Structure of an OData Service Demo

 Sample OData Services


 http://services.odata.org/OData/OData.svc/
 https://sapes1.sapdevcenter.com/sap/opu/odata/IWBEP/GWDEMO/?$format=xml
 http://srv-sapfiori.eaglemobile.al:8000/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/

 More Samples:-
 http://www.odata.org/odata-services/
 http://scn.sap.com/docs/DOC-31221

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 68


OData at a Glance

 URIs for resource identification

 Uniform operations, defined by HTTP

 GET, POST, PUT, PATCH, DELETE always mean the same

 Well known data formats


 AtomPub & JSON

 Query language  “ODBC for the Web”

 Schema information  Data model description

 Based on entity and relationship model

 Hypermedia design patterns

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 69


First OData Example: The Service Document

OData service root URI:


http://services.odata.org/OData/OData.svc/

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 70


First OData Example: The Service Metadata Document

OData service root URI:


http://services.odata.org/OData/OData.svc/

OData service metadata URI :=


<OData service root URI> + “$metadata”
http://services.odata.org/OData/OData.svc/$metadata

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 71


The OData Meta Model

Function Entity
Entity Set
Import * Container *
* *

Service
Association
* Document
*
2 *

Entity Key Entity Type Entity


1
Describes
1 structure of
1..* 1..*
1
Navigation * 1
Property Type
Property

1..*

Complex
Simple Type
Type

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 72


The OData Meta Model

Function Entity
Entity Set
Import * Container *
* *

Service
Association
* Document
*
2 *

Entity Key Entity Type Entity


1
Describes
1 structure of
1..* 1..*
1
Navigation * 1
Property Type
Property

1..*

Complex
Simple Type
Type

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 73


The OData Meta Model

Function Entity
Entity Set
Import * Container *
* *

Service
Association
* Document
*
2 *

Entity Key Entity Type Entity


1
Describes
1 structure of
1..* 1..*
1
Navigation * 1
Property Type
Property

1..*

Complex
Simple Type
Type

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 74


The OData type system

Function Entity
Entity Set
Import * Container *
* *

Service
Association
* Document
*
2 *

Entity Key Entity Type Entity


1
Describes
1 structure of
1..* 1..*
1
Navigation * 1
Property Type
Property

1..*

Complex
Simple Type
Type

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 75


OData Basic Introduction: OData Operations

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 76


http://services.odata.org/OData/OData.svc/Products/?$top=3

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 77


http://services.odata.org/OData/OData.svc/Products(0)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 78


http://services.odata.org/OData/OData.svc/Products(0)/Category

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 79


http://services.odata.org/OData/OData.svc/Products(0)/Supplier

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 80


CRUD Operations

Operation on resource HTTP verb

Create POST

Read GET

Update PUT

Delete DELETE

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 81


CRUD Operations

POST $batch(multiple requests) : multiple responses

Function Entity
Import * Container *
Entity Set <ServiceRootURI>$batch
* *

Service
Association
* Document
*
2 * GET() : feed
Entity Key Entity Type Entity POST(entry) : entry
1
Describes
1 structure of
1..* 1..*
1
Navigation * 1
Property
Property Type GET() : entry
1..* PUT(etag, entry) : nil
Complex
PATCH(etag, partial entry) : nil
Simple Type
Type DELETE() : nil
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 82
OData beyond CRUD operations

Function Entity
Entity Set
Import * Container *
http://services.odata.org/OData/OData.svc/GetProductsByRating?rating=4
* *

Service
Association
* Document
*
2 *

Entity Key Entity Type Entity

… 1

1
Describes
structure of
1..* 1..*
1
Navigation * 1
Property Type
Property

1..*

Complex
Simple Type
Type

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 83


http://services.odata.org/OData/OData.svc/GetProductsByRating?rating=4

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 84


“ODBC” for the Web - Simple Query Language

List of (most important) Query options:

Operation Query option


Filtering $filter
Projecting $select
Sorting $orderby
Paging $top and $skip
Inlining $expand

Reference: http://www.odata.org/developers/protocols/uri-conventions#QueryStringOptions

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 85


“ODBC” for the Web - Simple Query Language

Filtering  $filter

http://services.odata.org/OData/OData.svc/Products/?$filter=Price le 20

• All products with a price that is less than or equal to 20.

Projecting  $select

http://services.odata.org/OData/OData.svc/Products?$select=Price,Name

• In a response from an OData service, only the Price and Name Property values are returned for
each Product Entry in the Collection of products identified.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 86


“ODBC” for the Web - Simple Query Language

Sorting  $orderby

http://services.odata.org/OData/OData.svc/Products?$orderby=Rating asc

• All Product Entries returned in ascending order when sorted by the Rating Property.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 87


“ODBC” for the Web - Simple Query Language
Paging  $top and $skip
http://services.odata.org/OData/OData.svc/Products?$top=5
• The first 5 Product Entries are returned where the Set of Products is sorted using a scheme determined
by the OData service.

http://services.odata.org/OData/OData.svc/Products?$top=5&$orderby=Name desc

• The first 5 Product Entries are returned in descending order when sorted by the Name property.

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

• The set of Product Entries (associated with the Category Entry identified by key value 1) starting with the
third product.

http://services.odata.org/OData/OData.svc/Products?$skip=2&$top=2&$orderby=Rating

• The third and fourth Product Entry from the collection of all products when the collection is sorted by
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 88
“ODBC” for the Web - Simple Query Language

Inlining  $expand

http://services.odata.org/OData/OData.svc/Categories?$expand=Products

• Identifies the Collection of Categories as well as each of the Products associated with each
Category.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 89


SAP Gateway Service
Development
Service Creation - Overview

 Data Model Definition

 Service Implementation
 Generation of runtime objects
 Code based implementation or Mapping of a data source

 Service Maintenance
 Publish service in the hub

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 91


Gateway Service Builder - Development Flow

Create Project
in SEGW

Declarative Import Import DDIC-Structure


Model Data Model RFC/BOR or Search Redefine
Definition (EDMX) Help Interface Data Source
Extend
Service Include
Gateway (Redefine)
Service Development (GenIL, SPI, Service Generation Gateway
Backend Gateway
BOPF, BW Service
Service
Easy Query,
MDX)

Gateway Server (Hub) Service Activation

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 92


Gateway Service Builder - Development Flow

Create Project
in SEGW

Declarative Import Import DDIC-Structure


Model Data
Data Model
Model Definition RFC/BOR or Search Redefine
Definition (EDMX) Help Interface Data Source
Extend
Service Include
Gateway (Redefine)
(GenIL, SPI, Service Generation Gateway
Backend Gateway
BOPF, BW Service
Service
Easy Query,
Code-Based Implementation Map RFC/BOR CDS/SADL or MDX)
Service Implementation
Code-Based Extensions Search Help Operation

Gateway Server (Hub) Service Activation

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 93


Gateway Service Builder - Development Flow

OData Service
Gateway
Definition in
Backend SEGW

Data Model Declarative Import Import DDIC-Structure


Definition Model Data Model RFC/BOR or Search Redefine
(MPC) Definition (EDMX) Help Interface Data Source
Extend
Service Include
(Redefine)
(GenIL, SPI, Service Generation Gateway
Gateway
BOPF, BW Service
Service
Service Easy Query,
Code-Based Implementation Map RFC/BOR or Search MDX)
Implementation Code-Based Extensions Help Operation
(DPC)

Service Registration
Gateway Server (Hub) and Hub Activation

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 94


Gateway Service Builder - Development Flow

OData Service
Definition in
SEGW

1. Data Model Declarative Import Import DDIC-Structure


Definition Model Data Model RFC/BOR or Search Redefine
(MPC) Definition (EDMX) Help Interface Data Source
Extend
Service Include
(Redefine)
(GenIL, SPI, Gateway
Gateway
BOPF, BW Service
Service
2. Service Easy Query,
Implementation Code-Based Implementation Map RFC/BOR CDS/SADL or MDX)
Code-Based Extensions Search Help Operation
(DPC)

3. Service Service Registration


Maintenance and Hub Activation

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 95


Data Model Definition

Properties

Entity Types

Entity Sets

Complex Types

Associations

Navigation Properties

Function Imports

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 96


Service Implementation – Code based implementation

Direct navigation to the CRUD methods of the


DPC EXT class:

- Create  <Entity_Set>_CREATE_ENTITY

- Read  <Entity_Set>_GET_ENTITY

- Query <Entity_Set>_GET_ENTITYSET

- Update  <Entity_Set>_UPDATE_ENTITY

- Delete  <Entity_Set>_DELETE_ENTITY

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 97


Service Implementation – Mapping CRUD methods to Data Source

Mapping of data source attributes to CRUD


methods:

- Business Object Repository (BOR)

- Remote Function Call (RFC)

- Search Help

Result:

The mapped method will be generated in the


DPC class

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 98


Service Implementation – Generating runtime artefacts

4 classses:
- Data Provider Base Class
(ZCL_<SEGW_Projectname>_DPC)
- Data Provider Extension Class
(ZCL_<SEGW_Projectname>_DPC_EXT)
- Model Provider Base Class
(ZCL _<SEGW_Projectname>_ MPC)
- Model Provider Extension Class
(ZCL _<SEGW_Projectname>_ MPC_EXT)

2 repository objects
- Registered Model
(<SEGW_Projectname>_MDL)
- Registered Service
(<SEGW_Projectname>_SRV)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 99


Service Implementation – Generating runtime artifacts and publish
a service

Service Document: SAP Gateway Server / Hub

http://<host>:<port>
External Service Name
/sap/opu/odata/sap/
<SEGW_Projectname>_SRV/ Gateway Service Catalog
?$format=xml

SAP Business Suite – SAP Gateway Backend

Registered Service Name Registered Model Name


Data Provider Class Model Provider Class
Extension Class Extension Class

Gateway Service

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 100
Service Development Demo

 Implement Query and Read Operation for Pruduct Entity


 BAPI_EPM_PRODUCT_GET_LIST
 BAPI_EPM_PRODUCT_GET_DETAIL

 For Create, Update, Delete Operations


 BAPI_EPM_PRODUCT_CREATE
 BAPI_EPM_PRODUCT_CHANGE
 BAPI_EPM_PRODUCT_DELETE

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 101
SAP Gateway Troubleshooting Tools

• /IWFND/APPS_LOG
Apps Log • /IWBEP/VIEW_LOG

• /IWFND/ERROR_LOG
Error Log • /IWBEP/ERROR_LOG

• /IWFND/GW_CLIENT
Gateway
Client

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 102
SAPUI5 Introduction
SAP UI Development Toolkit for HTML5

SAP UI Development Toolkit for HTML5


The official long name

SAPUI5
The short name

UI5
Internal/Inofficial abbreviation

For official communication the upper two versions are used.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 104
Resources

• For the OpenUI5 version, visit http://openui5.org/ where you can download the runtime and the
Demo Kit (SDK) at http://openui5.org/download.html. Most importantly, the core containing all
central functionality and the most commonly used control libraries is identical in both deliveries.

• For the SAPUI5 resources, check your platform installation.

• Both resources are also available online via the content delivery network provider Akamai
at https://openui5.hana.ondemand.com/ and https://sapui5.hana.ondemand.com/

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 105
Supported Library Combinations

• SAPUI5 provides a set of JavaScript and CSS libraries,


which can be combined in an application using the
combinations that are supported.

• There are two sets of possible library combinations,


which are best described using the diagram below. Any
of the libraries listed on the lefthand side can be used
with those listed in the middle, and any of the libraries
listed on the righthand side can be used with the ones
listed in the middle.

• The libraries listed on the lefthand side cannot be used


in combination with the libraries listed on the right, and
vice versa:

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 106
Compatibility Rules

When users and developers update to a new SAPUI5 version, it is vitally important that no
applications break as a result of the upgrade. For this reason, always adhere to the compatibility
rules described below when developing SAPUI5 controls and functionality
The following changes to existing APIs are compatible:

• Adding new libraries, controls, classes, properties, functions, or namespaces

• Generalizing properties, that is, moving properties up in the inheritance hierarchy

• Adding new values to enumeration types; this means that when dealing with enum properties,
always be prepared to accept new values, for example, by implementing a "default" or "otherwise"
path when reacting on enum values.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 107
Third-Party Open Source Libraries

• SAPUI5 contains and uses several third-party open source libraries, such as jQuery. These libraries
can also be used by applications and/or custom control libraries, but the SAPUI5 compatibility
policy described within this document does not apply to these third-party libraries.

If you want to use the third-party open source libraries included in SAPUI5, note the following
restrictions:

• SAP decides which version(s) and modules of the used libraries are provided.

• SAP can upgrade to higher version(s) of the used libraries even within a patch release.

• For important reasons such as security, SAPUI5 can stop providing a library at any time.

• The third-party libraries are provided "as is". Extensions, adaptations, and support are not
performed or provided by SAP.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 108
Development Environment

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 109
App Development Using SAP Web IDE

SAP Web IDE is a Web-based development environment that is optimized for


developing SAPUI5 complex apps using the latest innovations, developing and extending SAP Fiori
apps, developing mobile hybrid apps, and extending SAP Web IDE with plug-ins and templates.

• Develop new SAP Fiori and SAPUI5 apps

• Extend SAP Fiori apps

• Develop SAPUI5 mobile hybrid apps (HAT plug-in)

• Extend the SAP Web IDE with new plug-ins and templates

A trial version of the SAP Web IDE can be accessed through the SAP HANA Cloud Platform

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 110
Main UI5 Characteristics

SAPUI5 is an extensible JavaScript-based HTML5 browser rendering


library for Business Applications.

 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, etc.
 using and including the popular jQuery library

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 111
UI5 Key Components

Run Time
 Control libraries (JavaScript, CSS and image files)
 Core (JavaScript files)
 Test suite (HTML, JavaScript files)

Design Time (optional)


 Application development tools in Eclipse
 Control development tools in Eclipse
 Resource handler in Java and ABAP
 Theming generator

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 112
UI5 Browser Support

Internet Explorer Firefox Chrome Safari


Version 8 and ESR and latest latest released Version 5.1 and
upwards released version version upwards
(with limitations)*

*Internet Explorer 8 is supported with graceful degradation for CSS3 features like
rounded corners, text-shadows, etc.

Note: While SAPUI5 supports IE8 with limitations, IE8 cannot be used as the browser
for running Fiori apps.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 113
UI5 Architecture Overview

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 114
UI5 Control Libraries

sap.ui.commons sap.m
Includes “bread and butter" controls like TextField, Includes controls for mobile devices
Button

sap.ui.ux3 sap.ui.table
Includes UX3 patterns, mainly available in Includes the Table control
“Blue Crystal” design, e.g.: Shell

And more, like sap.ui.layout, sap.viz…

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 115
UI5 and Extensibility

UI5 allows application developers to


 Include their own JavaScript, HTML and CSS into UI5 based pages

 Include other JavaScript libraries where UI5 is lacking controls or functionality

 Create composite controls from existing UI5 controls

 Write new UI libraries and new controls

 Write plug-ins for the UI5 core

This way UI5 development groups should not become a bottleneck for application groups in need of a certain
functionality.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 116
UI5 Knowledge and Test Resources

Documentation and Information Control and code testing


• Demokit • JSBin

• Developer Guide

• API Documentation
Information on OpenUI5:

• Developer Center in SCN • GitHub

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 117
SAP Fiori Deployment Options
HTTP Stack

OData Consumer

HTTP(S)

HTTP Framework
Namespace:
(1) REST & OData Lib /IWCOR/
Gateway Namespace
Hub System (2) Gateway Framework on Hub /IWFND/

(3) RFC
Namespace: /IWBEP/
(4) GW Framework on Backend

(5) Service Model & Data Provider


Gateway
Backend System

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 119
SAP Gateway – Software Components

 GW_CORE: Responsible for Serialization & Deserialization


 IW_FND: OData service handling, routing, security
 IW_BEP: Backend Event Publishing

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 120
Deployment Options: Hub vs. Embedded

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 121
Configuration: System Alias Management Demo

 SPRO -> SAP NetWeaver -> Gateway -> OData Channel -> Administration -> Logging Settings

 System Alias: used by OData service to connect to Data Source

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 122
NetWeaver Gateway deployment options
SAP recommends the
Central Hub Deployment
option for SAP Fiori

1) Central Hub Deployment of SAP 2) Embedded Deployment of SAP


NetWeaver Gateway NetWeaver Gateway

SAP NW Fiori UI Add-ons


Gateway Server
SAP UI 5 SAP NW Fiori UI Add-ons
Gateway Server
SAP UI 5
SAP NW Gateway IW_BEP SAP NW Gateway IW_BEP

Fiori Integration Add-ons Fiori Integration Add-ons


SAP ERP SAP ERP

For more details, please review Deployment Options and Embedded Versus Hub Deployment

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 123
Gateway 2.0 SP Equivalence to NW 7.40

 SAP Note: 1942072 - SAP NetWeaver Gateway 2.0 Support Package Stack

Min.
Product NW Basis SWCV/ GW SP-Stack SPS 06 SPS 07 SPS 08
GW_CORE 190 SP02 SP03 SP04
IW_FND 240 SP02 SP03 SP04
IW_BEP 200 SP06 SP07 SP08
NW 7.00 IW_SCS 200 SP06 SP07 SP08
IW_PGW 100 SP02 SP04 SP05
Gateway 2.0

IW_SPI 100 SP02 SP03 SP04


IW_GIL 100 SP02 SP03 SP04
GW_CORE 200 SP06 SP07 SP08
IW_FND 250 SP06 SP07 SP08
NW 7.02 IW_HDB 100 SP02 SP03 SP04
IW_CBS 200 SP06 SP07 SP08
IW_CNT 200 SP06 SP07 SP08
NW 7.40 IW_FNDGC 100 SP00 SP01 SP02
NW 7.40 NW 7.40 SAP_GWFND 7.40 SP01 SP04 SP06

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 124
Gateway Administration Tasks
Agenda

 Configuration and Settings


 Periodic Tasks
 Alert Monitoring with CCMS SAP Fiori Application Configuration
 Trace and Log files
 Service Validation
 Supportability

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 126
Configuration and Settings

Useful information concerning the settings of your NetWeaver Gateway System can be found in the
Implementation Guide using the transaction SPRO.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 127
Periodical Tasks (1/2)

• Need to be performed frequently in order to ensure that the software


runs smoothly.
• Some cleanup jobs are necessary on the SAP NetWeaver Gateway hub
system.
• You can find the relevant activities in the Implementation Guide (IMG):
• In transaction SPRO open the SAP Reference IMG and navigate to SAP
NetWeaver  Gateway Odata  Channel  Administration  Cache 
Settings.

• When activating SAP NetWeaver Gateway in your system landscape the


following jobs are scheduled automatically:
• SAP_IWFND_METERING_AGG
• SAP_IWFND_METERING_DEL
• If the jobs are not running periodically, the system will need more disk
resources than expected.
• You can make them run again by switching SAP NetWeaver Gateway off
and
© 2016 SAP SE or an SAP affiliate on again
company. in the implementation guide (transaction SPRO).
All rights reserved. Customer 128
Periodical Tasks (2/2)

• In addition to these jobs we recommend you schedule job:


• /IWFND/R_SM_CLEANUP which — among others — will help to clean up the
Application Log Viewer (/IWFND/CLEANUP_APPSLOG) and the Error Log
(/IWFND/SUPPORT_UTILITIES).
•Scenario
There are severalDescription
cleanup scenarios for different use cases, for example:
/IWFND/CLEANUP_APPSLOG Clean-up of Application Log
Scenario Description
/IWFND/SUPPORT_UTILITIES Support utilities
/IWFND/DEVICE_MAMANGE
Cleanup for Device Manager
/IWCNT/ACTIVITY_CACHE_CL R
Cache clean up for Activity
EANUP /IWFND/DOCUMENT_PUBLIS
Document Publisher
/IWCNT/CODELIST_CACHE_C HER
Clean up Codelist Cache
LEANUP
/IWFND/OIL OIL - Object ID List
/IWCNT/DOC_STORAGE_CAT Document Storage Category
_CLEANUP Cache Cleanup QRC - Query Result Cache -
/IWFND/QRC_AUTO
For Scheduler
/IWCNT/DOC_TYPE_STAT_CL Clean up Document Type Status
EAN Table /IWFND/ROLE_SYNC_ALL Role Sync Cleanup - All
Delete Unused User Settings for
/IWCNT/RP_USER_SETTING /IWFND/ROLE_SYNC_CAUTI Role Sync Cleanup - Cautious
a User
OUS Method
/IWCNT/VALUE_HLP_CACHE_
Cleans up Help Value Cache
CLEANUP

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 129
Alert Monitoring with CCMS

Alert Monitoring with CCMS


The CCMS is provided in SAP NetWeaver and can be used immediately after installation.
CCMS allows for:
• Collecting all monitoring information within your system landscape in the central monitoring system.
Collected information about SAP NetWeaver Gateway can be viewed via Transaction RZ20.
• Alerts are one central concept of the CCMS. These alerts are generated Alerts
by the Alert Monitor.
Further information:
http://help.sap.com/saphelp_gateway20sp10/helpdata/en/54/413ae1bb0f46ae99716f1522f8875f/conte
nt.htm

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 130
Trace and Log files

Important Log and Trace Files for SAP Netweaver Gateway

Trace files can be activated via transaction SM21.


Logs are automatically written by SAP NetWeaver Gateway components according to the log levels
set in the system.

Monitor log files via:


•transaction SLG1
For SAP NetWeaver Gateway hub systems use object /IWFND/. For SAP Business Suite
backend systems use object /IWBEP/.
Transaction SLG1 is available in all supported SAP systems.
•transaction /IW<XXX>/VIEW_LOG
We recommend using this transaction in SAP NetWeaver Gateway systems (/IWFND/VIEW_LOG) as
well as SAP Business Suite backend systems with the add-on IW_BEP (/IWBEP/VIEW_LOG).

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 131
Supportability

• SAP NetWeaver Gateway provides various techniques for development


support and error search.
• A variety of tools are also available as help for the support of problem
case analysis.
• In addition, the standard analyzing tools for ABAP can be used, for
example, dump analysis, tracing, and debugging.
• The main focus is the appropriate logging of failures.
• In ABAP, failures can be reported in different ways:
• exceptions thrown by classes.
• return codes of BAPIs.
• system messages.
• error tables returned by RFC.
• log items returned by Web services.
• Regardless of the type, it is important that information about the failure is
captured and made available to the appropriate people in a timely
manner and is able to be analyzed.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 132
To validate a service

SAP NetWeaver Gateway provides the following tools:


• Error Log
• SAP Performance Statistics
• Performance Trace
• Payload Trace
• Gateway Client
• Notification Monitor
• Application Log Viewer

Use the Service Validation Tool for SAP NetWeaver Gateway to validate the
runtime for OData services

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 133
Error Log

• Provides detailed context information about errors that have occurred at runtime.

• Developers, administrators, support consultants, and end users can launch the Error Log in
transaction /IWFND/ERROR_LOG for hub systems to obtain important context information about the
time and location of errors.

The Error Log enables you to:


• Identify precise time and location of errors in source code.
• Determine how often an error has occurred.
• Perform root-cause analyses.
• Reproduce and correct errors.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 134
SAP Performance Statistics

• You can access SAP performance statistics from the SAP NetWeaver Gateway framework
for each OData request without having to activate the Performance Trace tool.

• To obtain the SAP performance statistics, you can add ?sap-statistics=true at the end of
the request URL, regardless of what HTTP method of type.

• The SAP NetWeaver Gateway framework provides the performance statistics to the
consumer in the HTTP response header in the following format:
• HTTP Header Name: sap-statistics
• HTTP Header Value: total,fw,app,gwtotal,gwhub,gwrfcoh,gwbe,gwapp

Description:
total: Total processing time fw: Framework
app: Application gwtotal: Total processing time of the OData request
gwhub: Processing time in SAP NetWeaver Gateway hub system
gwrfcoh: RFC and network overhead for communication between the hub and backend system
gwbe: Processing time in SAP NetWeaver Gateway framework in backend system (without application
time)
gwapp: Processing time in application (data provider)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 135
Performance Trace

• The Performance Trace tool enables developers, administrators, support


consultants, and end users to monitor system performance at service call
level.
• You can display a summary of performance traces to track system
performance for one or more service calls.
• The summary displays:
• Number of requests
• Total request processing time
• GW Hub System: processing time in SAP NetWeaver Gateway hub system
• RFC & Network Overhead: processing time for communication overhead
between the hub and backend system
• GW Backend Framework Overhead: processing time for communication
overhead without the application time
• Application (Data Provider): application time
• In the detail view you can choose:
• Error Log to launch the Error Log tool in transaction /IWFND/ERROR_LOG
and evaluate
© 2016 SAP SE or an SAP affiliate company. and correct any errors that have occurred in the SAP
All rights reserved. Customer 136
Payload Trace

• The Payload Trace tool enables developers, administrators, support


consultants, and end users to monitor the flow of data sent as part of
service requests and responses.

• he tool is particularly helpful if you want to check the exact content of


HTTP header and body data sent and received.

• To facilitate support in cases where unexpected data might have been


returned, a replay function is available that enables you to trigger the
service call again and replicate the circumstances in which the data was
initially returned.

• For information about how to configure and activate the Payload Trace
tool, see:
http://help.sap.com/saphelp_gateway20sp10/helpdata/en/5b/b4cc51432
6470fe10000000a445394/content.htm
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 137
Gateway Client

• Gateway Client (transaction /IWFND/GW_CLIENT) is a powerful tool that


provides the freedom to test any OData service.

• Gateway Client enables you to:


• Reproduce (replay) runtime situations that led to a particular error (reactive
error resolution).
• Simulate a service at runtime to identify and resolve potential issues before a
critical showdown arises (proactive error prevention).
• Obtain SAP performance statistics.
• Create and save all test cases for OData services and replay these test
cases at any time. Depending on your requirements, you can store the test
data either on your local PC or in an underlying database. This opens a new
window in which the entity set names that exist for the service are listed.
• If you want to maintain the service, you can navigate directly from
Gateway Client to the Activate and Maintain Services activity in the SAP
NetWeaver Gateway hub system by choosing Maintain Service.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 138
Notification Monitor

• The Notification Monitor for Gateway provides an overview of all


notifications to be sent using a background Remote Function Call
(bgRFC) from an application in the SAP Business Suite backend system
to the Gateway framework.

• It is available for the OData Push Channel.

• You can start the Notification Monitor from an SAP Business Suite
backend system
• transaction /IWBEP/NOTIF_MONITOR

• Or from your SAP NetWeaver Gateway hub system


• transaction /IWFND/NOTIF_MONITOR

• For ease of use, the notification queues displayed in the Notification


Monitor are organized according to the last or newest notification
meaning that the most recent notification is always displayed at the top
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 139
Application Log Viewer

• You can start the report in transaction /IWFND/APPS_LOG in the SAP


NetWeaver Gateway hub system.

• In the selection screen, you can search log protocols by: object,
subobject, log ID, content ID, request direction, GSDO type (for Generic
Channel), user, log class, and date.

• Global log level:


• This log level can be set for two different situations: for regular service
adaptation layer (SAL) activities as well as for single activity trace. This setting
will override any existing setting that has previously been defined.

• User log level:


• You can set the log level that is to be used for a particular user.

For more information on the Application Log View see:


http://help.sap.com/saphelp_gateway20sp10/helpdata/en/d8/8afed0c41e4c
4593b5ecd48e8f2f76/content.htm?frameset=/en/ef/73d8be7c7f4a10b87e6
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 140
Service Validation

• The SAP NetWeaver Gateway Service Validation Tool validates the


runtime for all the Gateway services to ensure that all the services work.
• Runs without user intervention and performs the runtime validation on a single
service document.

Runtime Validation
• Runtime validation ensures that the runtime is behaving as intended and
there are no issues with it. (ie syntax errors in programs and RFC
authorization issues etc..)
• It involves executing Read and Query operations on the collections
exposed via a service document and checking the HTTP response code.
• For the Read operation, the tool takes care of executing the self links for
all the collections and all the navigation properties in a recursive manner.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 141
To validate a service

• Open transaction SPRO


• Open the SAP Reference IMG and navigate to:
SAP NetWeaver  Gateway  OData Channel Development with IW_BEP Registration  Service
Validation  Validate Service
• Click the Activity icon or go to transaction /IWFND/SRV_VALIDATE.
• Enter the service document identifier in the Service Document Name field. For example:
/IWFND/SG_SAMPLE_RMT_SFLIGHT_0001.
• Select Validate Service and choose Execute.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 142
To display the result of the last run validation:

• Open transaction SPRO


• Open the SAP Reference IMG and navigate to:
SAP NetWeaver  Gateway  OData Channel Development with IW_BEP Registration  Service
Validation  Validate Service
• Click the Activity icon or go to transaction /IWFND/SRV_VALIDATE.
• Enter the service document identifier in the Service Document Name field. For example:
/IWFND/SG_SAMPLE_RMT_SFLIGHT_0001.
• Select Display Last Run Results and choose Execute.

• The result displays the execution status of the URIs of all the collections and their navigation properties.
• You can perform the following actions from the result screen:
• Provide Filter criteria and save a Filter variant
• Navigate to the Error Log in case of errors
• Copy the complete URI to the clip board
• Navigate to the SAP NetWeaver Gateway Service Explorer

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 143
Configuration of SAP NetWeaver Gateway

• Connect SAP NetWeaver Gateway to SAP Business Suite (trusted RFC)


• Maintain profile parameters
• Create system alias for applications
• Activate OData services
Configuring SAP NetWeaver Gateway
Connect SAP NetWeaver Gateway to SAP Business Suite

Configure Backend Server as the ’trusting’ system:


1. Go to the transaction SM59
2. Enter the following and hit Enter:
• RFC Destination: <SID of
Gateway>CLNT<Client> (e.g. T2DCLNT001)
• Connection Type: 3
• Description 1: RFC Destination to Gateway
server
3. Under the Technical Settings tab, enter the Gateway
host to the Target Host field and its instance number
to the System Number field. Click on Save.
4. Go to transaction SMT1. Click on Create.
5. Enter the destination you have just created in the
Destination field. Click on Continue.
6. The info of the trusted system is displayed. Click on
Save.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 145
Configuring SAP NetWeaver Gateway
Connect SAP NetWeaver Gateway to SAP Business Suite

Configure the Gateway server as the ’trusted’ system by creating a type 3 RFC
destination on Gateway to the Backend:
1. Go to SPRO  SAP Reference IMG. Open SAP Customizing Implementation
Guide  SAP NetWeaver  Gateway  Configuration  Connection Settings 
SAP NetWeaver Gateway to SAP System  Manage RFC Destinations. Click on
the Activity icon next to it.
2. Click on Create. Enter the following info and hit enter:
 RFC Destination: <SID of Backend>CLNT<Client> (e.g. EC6CLNT001)
 Connection Type: 3
 Description 1: RFC Destination to Backend
3. Under the Technical Settings tab, enter the backend’s host to the Target Host
field and its instance number to the System Number field.
4. Click on the Logon & Security tab. Enter the client number of the Backend. Click
on the checkbox of Current User. And select Yes for Trust Relationship.
5. Save the settings.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 146
Configuring SAP NetWeaver Gateway
Maintaining trust

In transaction SMT1 click on new

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 147
Configuring SAP NetWeaver Gateway
Maintaining trust

In the wizard enter the RFC connection to be used as the trusted connection

Click on continue.

Review the summary information on the following screen and


click continue.

Leave the default validity period() and click “Finish”.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 148
Configuring SAP NetWeaver Gateway
Maintaining trust

In SM59 edit the rfc connection you are using( T15CLNT800 in our case)
So that “Current User” and “Trust Relationship” are selected

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 149
Configuration of SAP NetWeaver Gateway
Maintain profile parameters

Go to transaction RZ10 and edit the “DEFAULT” profile (Extended Maintenance)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 150
Configuration of SAP NetWeaver Gateway
Maintain profile parameters

You will need to create two parameters here by selecting the highlighted button.

Parameter 1 Name:

“login/create_sso2_ticket”

Parameter 1 Value: 2

Parameter 2 Name

“login/accept_sso2_ticket”

Parameter 2 Value: 1

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 151
Specify Connection Settings from Backend system to SAP
Netweaver Gateway

Specify the settings that can be used by the OData Channel and the BEP component to establish the
connection from your ERP system to SAP Netweaver Gateway (transaction: SPRO)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 152
Configuration of SAP NetWeaver Gateway
Create a System Alias

In order to configure the App-specific Gateway Services we need to define two system aliases in
/nSPRO on the Gateway :

One alias with the software version DEFAULT for the backend

A second alias with the software version /IWPGW/BWF & For Local App for backend workflow

To create the aliases go to

“Manage SAP System Aliases”

in /nSPRO

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 153
Configuration of SAP NetWeaver Gateway
Create a System Alias

Here we have created two aliases:

“T15CLNT800” with the DEFAULT software version and

“T15CLNT800_PGW” with the /IWPGW/BWF software version

Note: you must ensure the system ID and client number are
populated

http://help.sap.com/saphelp_nw74/helpdata/en/63/f72651c2
© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 154
SAP Fiori Launchpad Configuration
Introducing SAP Fiori Launchpad
Web-based Entry Point for SAP Business Applications Across Platforms and Devices

SAP Fiori launchpad is a role based,


personalized, real-time and contextual
aggregation point for business applications
and analytics.

It runs on multiple devices, using the


responsive design paradigm, and is
deployable on multiple platforms.

It is designed according to the simple and


intuitive SAP Fiori user experience, while
supporting established UI technologies.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 156
Fiori Launchpad
New entry point to the Fiori Experience

Great First Impression


Simple, beautiful, see what’s
going on at first glance…

Designed for people


Personalizable, easy way to
identify favorites, group tiles,
add & remove tiles, and more…

Leverage New Technologies


Access point for new SAP
Technologies, incl. Search (across
apps), Smart Business, Jam, etc.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 157
Launchpad at a Glance
Feature Highlights

Search Across Apps to get


Completely role based
immediate answers*
with one common role
definition

Capabilities like news Color coding alerts user


feeds to enhance for any overdue, new or
collaboration* immediate actions

Group tiles to create Charts on entry provides


personalized catalogs high level overview*

* Requires SAP Business Suite on HANA

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 158
Fiori Launchpad
Enhanced Personalization

Capabilities
• Create pre-configured groups and catalogs for
the home page
• Wide choice of ready-to-use tiles
• Add, delete or group tiles

Benefits
• Manage apps based on roles and usage
• Apps assigned by specific roles so users get only
what they need
• Personalize homepage based on user
preference

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 159
Fiori Launchpad
Search Capability

Capabilities

• View a list of your recent searches


• View a list of your recently launched
applications

Benefits

• Get answers to your questions


immediately
• Get to the desired application immediately

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 160
Fiori Launchpad
Responsive Design

Capabilities

• Visual design adapts automatically to the


respective screen size
• Fiori Launchpad runs on both mobile and
desktop devices

Benefits
• Seamless experience across all device
types - smartphones, tablets and desktops

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 161
Fiori Launchpad
Summary of key features and capabilities
Role based
• Wide choice of ready-to-use applications
• Preconfigured home page content
People aware
• Personalizable content
• Easy bookmarking (home page or browser bookmarks)
• Collaboration capabilities
Context aware
• Preserving context during navigation
• Suggest relevant follow up actions
Search Capability – across documents and apps
Responsive Design – runs on multiple devices
Fiori Launchpad Designer - for easy configuration
Theming and branding - via Theme Designer
Open and extensible

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 162
Launchpad in detail

Apps can use the following services offered by the SAP Fiori launchpad:

• Settings (apps only): Each app can provide app-specific settings to the launchpad.

• User Preferences: This service provides details about the user currently logged in to the app. In
addition, it offers theme selection.

• Contact Support: You can offer a Contact Support option as a channel for user incidents. Note that
this option is only available if the customer configures the support setup.

• Give Feedback: This service allows users to give feedback on the app. Note that this option is only
available if the customer configures the feedback setup.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 163
Launchpad in detail

• About (apps only): This option is automatically available for all apps. It provides technical details
about the app.

• Log In / SSO / Log Out: All aspects of logging in and out are handled by the launchpad. If single-
sign-on (SSO) is used, no user password is required. If SSO is not used, the launchpad provides a
login screen.

• Save as Tile: This service allows users to save a snapshot of the app as a tile on the launchpad.
The tile bookmarks the current state of the app.

• Navigation: The SAP Fiori launchpad handles all navigation between apps.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 164
SETTINGS

• If you implement the API for the settings service,


a Settings entry appears in the Options menu on the shell
bar. The setting only shows when the corresponding app
is open.

• You need to design the settings dialog for your app


yourself. Make sure that you only have one Settings entry
in the menu, which gives the user access to all the app
settings. Avoid having multiple menu entries per app.

• For simple use cases, you can use one dialog with a
basic set of options, as in the example opposite.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 165
SAVE AS TILE

• The Save as Tile option is offered in the Share menu in


the footer toolbar, and lets the user save a snapshot of
the app in its current state. Offer this feature whenever it
makes sense for the app use case. In the Save as
Tile dialog, the user can enter a title, subtitle, and
description for the new tile.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 166
USER PREFERENCES

The User Preferences appear as an entry in


the Options menu on the shell bar. The dialog contains the
following attributes:

• User name

• Theme selector

• Server name

• Language

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 167
CONTACT SUPPORT

• The Contact Support option appears in the Options menu


on the shell bar.

• The support dialog offers a description field for entering


the problem. Users can also display the technical data
that will be sent to the support team.

• The Send button is active if there is an entry in the


description field. Note that this feature is only available if
the customer activates it.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 168
GIVE FEEDBACK

• The Give Feedback option appears in the Options menu


on the shell bar.

• The feedback dialog gives users an opportunity to rate


their experience and give written feedback.

• Users can also display the technical data that will be sent
to the support team. Note that this feature is only
available if the customer activates it.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 169
ABOUT

The About option appears in the Options menu on the shell


bar for an app. The About dialog displays the following
information:

• App icon (as specified in the component)

• Official app name, as specified in the component

• Full technical app name

• App version

• Build ID

• SAPUI5 version

User agent details


© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 170
LOGOUT

To log out, the user selects the Log Out entry in


the Options menu on the shell bar. This opens the logout
confirmation dialog.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 171
SAP Fiori Launchpad Home Page

• The SAP Fiori launchpad home page is the first page that users see after they have logged in. It is
the main entry point to SAP Fiori apps on both, mobile or desktop devices.

• The launchpad home page presents tiles that allow the launch of apps and may show additional
information. The page can be personalized, tiles can be added or removed, and bundled in groups.

• The home page is provided by the SAP Fiori launchpad. Apps use this home page and do
not design their own.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 172
RESPONSIVENESS

• The SAP Fiori launchpad


home page is fully
responsive.

• Tiles appear in a smaller


size on small screens so
that at least two tiles can
be shown side by side.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 173
BEHAVIOR AND INTERACTION

• Users have different possibilities how to personalize their home page. Some actions can be done
directly, while other actions require that the user activates the personalization mode.

• In order to enable more enhanced personalization functionalities, e.g. rearrange of groups, or allow
tile customization, the user can activate the personalization mode via the action sheet or via a
floating icon on the home page.

• When this mode is activated the tile behavior changes and further group personalization
functionalities become available.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 174
BEHAVIOR AND INTERACTION

• Users have different possibilities how to


personalize their home page. Some actions can
be done directly, while other actions require that
the user activates the personalization mode.

• In order to enable more enhanced


personalization functionalities, e.g. rearrange of
groups, or allow tile customization, the user can
activate the personalization mode via the action
sheet or via a floating icon on the home page.

• When this mode is activated the tile behavior


changes and further group personalization
functionalities become available.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 175
Tiles

Generic Actions

(via Personalize Home Page only)

• When Personalize Home Page is activated and users click on a tile, an action sheet appears and
shows a list of generic actions like: Settings, Move and Remove. Tile designers can also add other
generic actions.

• Settings open a dialog in which users can change the information that is displayed on a tile, e.g.
title.

• Move opens a dialog in which users can select a group the tile should be moved to.

• Remove removes a tile from the home page.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 176
Tiles

Add a tile

• Clicking or tapping the + icon in any empty group, or clicking on Tile Catalog in the group
panel navigates to the catalog that shows all available apps. In order to find the right tile in the
catalog, users can select a tile category from the drop down box and/or use of the search field.

Move a tile

• A tile can be rearranged by dragging it to a new location within the same group or to a different
group.

Open a tile

• Clicking or tapping a tile opens the underlying app or content item.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 177
Groups

Add Group

• Clicking or tapping the + Add Group button in the group panel adds a new group enabling users to
enter a group name. If no group name is entered, a default group name (enter the group name)
is selected automatically. The new group appears below the + Add Group button.

Move a group

• A group can be rearranged by dragging it to a new location within the group panel.

Rename a group

• Users are able to rename groups by clicking/tapping a group name. A text box opens in place and,
after having typed the new name, is saved automatically. In order to discard the change while the
text box is in focus, users have to press escape.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 178
Groups

Delete a group

• Users can delete groups they have created (including all containing tiles) via Delete. Please
consider that predefined groups, for example My Home, or locked groups cannot be deleted.

Reset a group

• Users can reset a predefined group to its initial state. In order to do so, they have to click/
tap Reset.

Hide groups

• The Hide Groups dialog can be called up from the shell bar above the home page (see shell bar). It
offers the possibility to temporarily hide one or several groups on the launchpad home page. It is
only available on the launchpad home page.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 179
Groups

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 180
Launchpad Tiles

• A tile is a container that represents an app on the SAP Fiori launchpad home page. All apps have at
least one tile. Tiles are only used for launching apps and presenting them on the launchpad.

• Tiles can display different types of content. They can contain an icon, a title, an informative text,
numbers, and charts.

• Users can personalize their home page by selecting the tiles for the apps they want to use from a
tile catalog. The apps available in the tile catalog depend on the user’s role.

• The number of visible tiles on the launchpad home page depends on the screen resolution. If the
tiles in a group do not fit in one row, they are wrapped to the next row. The tiles are also smaller on
phones.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 181
Launchpad Tiles – Responsiveness

• The tiles themselves are not responsive.

• However, we provide a different tile size for smartphones.

• The tile size is determined via the device request, and does not need to be adjusted by the app.

• The tile size on tablet and desktop devices is the same.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 182
Launchpad Tiles - Layout

• The generic tile control currently supports


two tile sizes (smartphone and
desktop/tablet) and two tile dimensions (1 x
1 and 2 x 1).

• The layout of the generic tile is fixed, with


designated areas for the header, content
area, and footer.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 183
Launchpad Tiles - Types

KPI Tile

Key performance indicators (KPIs) are used to measure and


monitor a company’s performance on a strategic and
operational level.

The tile displays the KPI values as large, easy-to-recognize


digits. In addition, you can show deviation arrows, negative
values, and scaling factors. You can also use semantic
colors to emphasize the content. The number of digits is limited
by the size of the tiles.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 184
Basic Launch Tile

• The most basic type of launch tile contains a title and


identifying icon.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 185
Monitoring Tile

• Use the monitoring tile when you want to display status


updates or an object count.

• You can also apply semantic colors to the status bar to


indicate a positive, negative, or critical status.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 186
SAP Jam Tile

• If an organization uses SAP Jam, users can


also add SAP Jam tiles to the launchpad.

• The SAP Jam tile shows the content of new


notifications in 10-second intervals. It can
scroll through up to 10 new notifications.

• Tile content is updated every 5 minutes. If


there are no new notifications, the tile
displays the most recent notification.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 187
Feed Tile

• The feed tile is a special tile that shows a


news feed. It refreshes every 3 to 5 seconds
and is twice the size of a standard tile.

• In addition to the news headline, it comes


with a background image, the news source,
and a time stamp.

• The feed tile flips through news messages


as configured for the tile.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 188
App Usage

• The opacity of the tile background reflects


how often an app has been launched during
the last 30 days.

• Lesser-used tiles are dimmed (reduced


background opacity), while frequently-used
tiles remain highlighted (higher background
opacity).

• The goal of this visualization is to give users


a very subtle indication of app usage,
without providing a direct interaction cue.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 189
Account/ Settings Button

• The Account Settings button is placed on the right side.


Clicking it opens an action sheet with several options:

• Settings: App specific settings (only shown if called up


from an app and only if provided by the app)

• Contact Support: Opens a contact support dialog (if


implemented in this system)

• Give Feedback: Opens a feedback dialog (if


implemented in this system)

• About: Provides details about the app (only shown if


called up from an app);

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 190
Visibility

• All apps that run under the unified shell have the shell
bar on top of every screen.

• Due to the bigger screen size of desktops, the shell bar


always remains visible and is shown together with the
app’s header bar. On tablet and mobile devices, the
shell bar hides after a few seconds in favor of space
and content.

• Swiping makes the bar reappear.

• The shell bar always remains visible on the launchpad


home page and the tile catalog.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 191
Global Search

• The SAP Fiori launchpad offers a


global search function that searches
across all apps and business objects
(like materials, customers,
maintenance plans).

• The search icon is displayed in


the shell bar of the launchpad, and is
always readily available at the top of
the screen.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 192
Tile Catalog

• The users can access the tile catalog directly from the launchpad home page.

• They can find all tiles they are allowed to use and which are grouped in catalog groups here.

• A search field as well as group selection help to find the tile that is actually needed.

• The tile catalog has two functions: tiles which are used more often can be added to the home page.
Seldom used tiles can be accessed directly from the catalog, without adding them on the home
page.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 193
Add tiles

• Clicking or tapping on the + icon opens


the add dialog, where a home page
group can be chosen to which this tile
will be added.

• The tile can also be added to several


groups. It can be removed from the
home page by unchecking it in the
dialog.

• After clicking OK, the user gets a


success message and the tile is
added to the selected group on the
home page. A check indicator replaces
the + icon if the tile is shown on the
home page.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 194
SAP Fiori Security
SAP Fiori Security Topics

Network and Reverse Proxy Setup


Authentication
User Management
Authorization
System Hardening (Securing Trusted RFC connection)

Reverse SAP NW
SAP ECC
Proxy Gateway

Secure Configuration
/ Network Setup /
Authentication Authorization

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 196
SAP Fiori Authentication Options
SAP Fiori Authentication
Case 0: Direct UserID/Password Authentication

This case can be adapted if:


• Users know their Fiori password
• Users access from a trusted environment (VPN/Intranet)

Users and passwords are maintained directly in the Gateway system.

UserId/Password
Reverse SAP NW
SAP ECC
Proxy Gateway

VPN/Intranet Corporate DMZ Internal Corporate Network

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 198
SAP Fiori Authentication
Case 1: SSO via SAML 2.0

A typical use case is for customers to access one or more SAP Fiori apps from the public internet.
In this case, single sign-on can be implemented using SAML 2.0 based authentication in conjunction
with IdP (Identity Provider) software such as SAP IDP, Ping Federate or Microsoft’s Active Directory
Federation Service (AD FS).
The user will need to authenticate themselves in a process known as Service Provider based
authentication.

SAML 2.0
IdP

Reverse SAP NW
SAP ECC
Proxy Gateway

Public Internet Corporate DMZ Internal Corporate Network

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 199
SAP Fiori Authentication
Case 2: SSO via SPNego / Kerberos

In this scenario the device has to support SPNego authentication (Windows based browser like
Internet Explorer, Safari on iOS7 do support NW SSO after MDM allows Enterprise SSO for Gateway
Service). The Gateway system has to have NetWeaver SSO 2.0 installed (SPNego configuration)
with a SNCName maintained for each user.

Restrictions
regarding
devices apply
Active keytab
Directory

SAP NW
Proxy SAP ECC
Gateway

NW SSO

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 200
SAP Fiori Authentication
Case 3: SSO via SAP Portal

In this scenario the device has to either:


1. Access NetWeaver Java system before accessing NetWeaver Gateway or
2. Gateway has to redirect user to NetWeaver Java system.
This scenario requires some custom implementation for the redirects. The main advantage is that Fiori can be
run with Active Directory passwords.
Active
Directory

SAP Trust
NetWeaver
Java

SAP NW
Proxy SAP ECC
Gateway

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 201
SAP Fiori Authentication
Case 4: SSO via X.509 certificates

In this scenario the device has to have a X.509 certificate (which has to be distributed upfront by the
MDM). The NetWeaver Gateway / the proxy server is configured to request a client certificate during
the SSL handshake. The client proves to possess the private key by signing the challenge from the
server. The server verifies the certificate and extracts the username from the certificate.

MDM Certificate
Authority

Import Root CA Certificate

Mutual SSL
Certificate forwarding
Handshake SAP NW
Proxy SAP ECC
Gateway

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 202
SAP Fiori Authorizations and Users
SAP Fiori Users & Authorizations

Option a) Embedded Gateway Installation: Users record and PFCG roles have to be created and
assigned only in one system
Option b) Gateway Hub / Dedicated Gateway installation: User record and PFCG roles have to be
created and assigned in both Gateway and ECC system
Identity
Management /
CUA
Option a)
NW Users &
Gate SAP ECC author-
way izations

SAP NW
Proxy SAP ECC
Gateway

Option b)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 204
Fiori Authorizations

• Launch Page specific roles

• S_RFC and S_ICF authorizations

• Trusted RFC if external Gateway system is


used

• Scenario specific authorizations according to


Installation Guide

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 205
User Authorization – NetWeaver Gateway
Authorizations and Roles in SAP NetWeaver Gateway – authorization to access the HTML 5-based Fiori applications and
the OData services in SAP NetWeaver Gateway
1. Use PFCG to create an service/app specific role with authorization object S_SERVICE(Check at Start of External Services). Do not specify further
authorization values.
2. On the menu tab, insert a node into the role menu by choosing Authorization Default, TADIR Service. Select the following values: R3TR, IWSG, & the
<activated service name>
3. Generate the profile in authorization maintenance. Assign the new role to the SAP Fiori app user.
1 2

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 206
SAP Fiori My Inbox Overview
Agenda

Introduction
 Key Features, My Inbox Architecture

My Inbox Functionality
 My Inbox Elements

Prerequisites and Implementation


 System Landscape Requirements, Prerequisites, Implementation Tasks, Defining Workflow Scenario

Live Demo

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 208
Introduction to SAP Fiori My Inbox

My Inbox was part of the Fiori Wave 7 release of apps.

My Inbox is a Fiori/SAP UI5 version of the SAP Inbox (accessible in back-end system(s) using
transaction SBWP).

Using My Inbox, you can make important decision via mobile or desktop devices anywhere and
anytime. In particular, you can process your standard and custom workflow tasks based on the
decision options already defined in your back-end system.

Compatible with SAP Business Workflow, SAP Business Process Management (BPM) and 3rd party
providers.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 209
Key Features

With SAP Fiori My Inbox the following features are standard:

• You can define the decision options you want to display, for example ‘Approve’ or ‘Reject’.

• You can perform standard actions, such as Claim, Release or Forward a request. These actions are
available by default, with no customising required in the back-end system.

• You can perform mass actions. This allows you to process several tasks of the same type all at the
same time.

• You can view and add comments.

• You can view custom attributes that provide additional information about the task instance.

• You can view, upload and delete attachments.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 210
Key Features

• You can create and manage substitutions. By adding a substitution to your approval list, you enable
another user to take action on your tasks when you are absent.

• You can send emails or post tasks on a pre-configured JAM networking site.

• You can view the business cards of the application users.

• You can browse, sort, filter and group tasks that require action.

• You can extend the standard My Inbox application to cover additional UI or functionality
requirements.

• You can easily process all your tasks with the pre-configured All Items tile or configure a scenario-
specific tile for users working on specific tasks, using custom workflows or custom use cases.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 211
My Inbox Architecture

The architecture for My Inbox is composed of


back-end task providers, the Task Gateway on the
front-end Gateway system and the My Inbox app
running on the end user’s device.

Task Gateway comes with out-of-the-box data


providers for Business Workflow and BPM, to
which you can add your own scenarios.

Task Gateway consists of an OData service that


allows different task providers to expose tasks
within one harmonised view. It is this OData
service that is consumed by My Inbox.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 212
My Inbox Functionality
My Inbox Elements

1. Task List

Lists all the tasks currently in


your inbox.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 214
My Inbox Elements

2. Search Bar

Can be used to do a free text


search to find a specific task
in your task list.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 215
My Inbox Elements

3. Refresh Button

Manually updates the task


list with any new task items.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 216
My Inbox Elements

4. Sorting

Allows you to order the tasks


in your task list based on a
number of fields, including:
• Priority
• Task Title
• Created On
• Created By

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 217
My Inbox Elements

5. Filtering and Grouping

Enables you to filter or group


the tasks in your task list
based on their:
• Priority
• Status
• Task Type
• Reservation

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 218
My Inbox Elements

6. Task Details

The task detail screen gives


detailed information of the
selected task in the task list.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 219
My Inbox Elements

7. Execute Actions

You can perform actions on


the selected tasks, such as
Claim (to reserve a task),
Release (to unreserve a task)
or Forward (to forward task to
another user).

Certain workflows also allow


user decisions, such as
Accept or Reject, to be
performed. You can also
open the task in the back end
system or send an email.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 220
My Inbox Elements

8. Mass Actions

Clicking on the Multi-Select


button allows you to execute
actions on multiple tasks of
the same task type without
opening all the tasks.

Upon selecting this button


you are asked to select a
task type. In the next screen
you can choose multiple
tasks from your task list and
make decision on all selected
tasks simultaneously.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 221
My Inbox Elements

9. Comments

To view or post commons for


a task, select the Comments
icon tab in the detail view of
the task.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 222
My Inbox Elements

10. Attachments

To view, add or delete an


attachment, navigate to the
Attachments icon tab in the
detail view of the task.

Select the plus symbol to


upload and new attachment
to the task.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 223
My Inbox Elements

11. Substitutions

You can delegate tasks to a


substitute in your absence. If
you want your substitute to
process only specific work
items you can do so by
assigning a task group when
creating your substitute.

Select ‘Manage My
Substitutes’ from the drop
down menu at the top right
of your screen and then add
or delete your substitutes.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 224
Prerequisites and Implementation
System Landscape Requirements for My Inbox

Before you begin to implement the app, you must ensure that your system landscape meets the
requirements for SAP Fiori and the SAP Fiori application My Inbox.

For a detailed overview of the system landscape requirements and the prerequisites and configuration
steps necessary for My Inbox, please consult the help.sap.com guide at the following link:
http://help.sap.com/fiori_bs2013/helpdata/en/41/fd595461fce630e10000000a44538d/content.htm

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 226
Prerequisites for Implementation of My Inbox

1. Ensure that workflow is configured in the back-end system(s) and that all required authorisations
are maintained for relevant users.

2. Implement all SAP Notes outlined in Release Information Note for SAP Fiori My Inbox 2106212.

3. Configure connections between the Gateway system and the back-end system(s) from which you
want to retrieve work items.

4. Activate the Task Gateway Service on your Gateway system and assign software version to the
service.

5. Assign the back-end system aliases for the Task Processing Service.

Review the App Implementation: My Inbox guide for more details.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 227
Implementation Tasks for My Inbox

On your Front-End server the following services need to be activated:

• OData Service to be activated (in transaction /IWFND/MAINT_SERVICE):

/IWPGW/TASKPROCESSING Version 2 (Task Gateway Service 2.0)

• SAP UI5 Application to be activated (in transaction SICF):

CA_FIORI_INBOX

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 228
Roles and Catalogs for My Inbox

After activating the OData and ICF services, the following roles will need to be assigned to users who
will be using My Inbox in order for the app to be accessible from their Launchpad:

• Technical Catalog Role:


SAP_FND_TCR_T (contains Technical Catalog SAP_FND_TC_T)

• Business Catalog Role:


SAP_FND_BCR_MANAGER_T (contains Business Catalog SAP_FND_BC_MANAGER_T)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 229
My Inbox Launchpad Tiles

There are two options available when it comes to adding


the My Inbox tile to the Fiori Launchpad.

The first option is to use the All Items tile. After the users
have been assigned the roles required for My Inbox. This
All Items tile will be available to them by simple adding it
to one of their groups as seen in this image.

The All Items tile is preconfigured so that all uncompleted


tasks in the user’s inbox are displayed in their My Inbox
task list.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 230
My Inbox Launchpad Tiles

However, in some situations where users are working only on specific tasks, using custom workflows
or custom use cases the All Items tile may not be the most suitable option. An alternative is to create a
scenario-specific tile that is configured to display certain task types to the user depending on their role
or needs.

The first step in creating a scenario-specific tile is to define a workflow scenario on the Gateway
system. In Customizing for SAP NetWeaver, under Gateway Service Enablement > Content > Task
Gateway > Task Gateway Service > Scenario Definition, you can create a new Scenario Definition.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 231
Defining Workflow Scenario

When creating the Scenario Definition, the following parameters need to be set to the following values:

• Scenario Identifier: Set to unique ID

• Scenario Display Name: Assign name to scenario

• Technical Service Name: /IWPGW/TASK_PROCESSING

• Version: 2

• EntitySet External Name: Task

• Property External Name: TaskDefinitionID

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 232
Defining Workflow Scenario

There are also some additional parameters that can be configured:

• The Default Sort by Property allows you to specify how tasks are ordered in the My Inbox task list. If
this is not manually configured tasks are ordered by CreatedOn.

• Ticking the Mass Action parameter allows users to process multiple tasks of the same type at the
same time.

• The Quick Act parameter is only relevant if using touch screen devices. Selecting it enables quick
approval of workflow items by swiping on the screen.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 233
Defining Workflow Scenario

After configuring the Scenario Definition parameters,


you will need to assign a consumer type to your
newly created scenario definition.

Under Assign Consumer Type to Scenario, select


New Entries and set the Task Gateway Consumer
Type field to TABLET.

You also have the option here of assigning a role to the consumer type and scenario. This is
optional but allows you to limit access to this scenario only to users who have been assigned the
relevant PFCG role(s).

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 234
Defining Workflow Scenario

The next step is to define the tasks for your scenario. Here you will need the task type ID for approval
workflow(s) you wish to enable. The task type ID can be found in the back-end system in the Workflow
Builder (transaction SWDD).

Once you have your task type ID, in Task Definition for Scenario you will enter the task type ID in the
field Task Type and also select the system alias for the source back-end under SAP System Alias.

Note: You can define as many tasks as you want for your scenario.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 235
Configuring Scenario-Specific Tile on Fiori Launchpad

In your Fiori Launchpad Designer, select the SAP: Cross – Transactional Apps (SAP_FND_TC_T)
catalog.

Add a new tile and choose the App Launcher – Dynamic tile.

Enter a Title for the tile and select an Icon. Under Service URL enter the following, with <scenario
identifier> set to the scenario ID you entered when defining your workflow scenario on your Gateway:
/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2/ScenarioCollection?$filter=key eq '<scenario identifier>‘

Set Semantic Object to WorkflowTask and Action to displayInbox.

The Parameters should be set as follows, again using your scenario ID and any list size you wish to
configure (scenarioId is mandatory, listSize is optional and the default value is 100):
scenarioId=<scenario identifier>&listSize=<number of items you want to display on your list screen>

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 236
Configuring Scenario-Specific Tile on Fiori Launchpad

After configuring your scenario-specific tile in the SAP: Cross – Transactional Apps catalog, you should
then copy it to the SAP_FND_BC_MANAGER_T business catalog in the Launchpad Designer.

The scenario-specific app tile will then become available to authorised users to add to their
Launchpad.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 237
Extending SAP Fiori Application using
SAP Web IDE
Extend an SAP Fiori Application

Right click on the Local folder and select New > Extension Project

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 239
Extend an SAP Fiori Application

Click on the Remote button and select SAPUI5 ABAP Repository

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 240
Extend an SAP Fiori Application

Select your remote system from the drop down. In our case we use system GM6.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 241
Extend an SAP Fiori Application

You can filter the apps in the


Search bar.

In our case we select


“purchase”

Select MM_PO_APV
Approve Purchase Orders
and click OK

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 242
Extend an SAP Fiori Application

You may change the proposed project name to e.g. POApprovalExtended or leave it as proposed by
SAP Web IDE ‘MM_PO_APVExtension’ Then click Next.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 243
Extend an SAP Fiori Application

Select ‘Open extension project in extensibility pane’ and click ‘Finish’ to create the extension
project or click ‘Previous’ to go back and make changes

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 244
Extend an SAP Fiori Application

The application Preview Pane automatically opens in Preview Mode. Once the application is loaded
and the data has been fetched from the backend, you can see that the application is fully running.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 245
Extend an SAP Fiori Application

To start the Extensibility Pane:

• In SAP Web IDE tab click on the extension project folder

• Next select “Tools” and click on “Extensibility Pane”

• Or press “CTRL”+”SHIFT”+”E”

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 246
Extend the app by hiding an existing
control
Extend the app by hiding an existing control

We are going to hide the Pricing Conditions in the view S4.

• Make sure you are in Extensibility Mode.

• Select the Pricing Condition at the bottom of the view. To highlight the control you need to point the
mouse pointer to the right or left side of the table. Alternatively, you may select in the Outline the
PricingCondTable under S4.

• Select Extend and Hide Control in the drop-down

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 248
Extend the app by hiding an existing control

A pop-up window appears to indicate that the control is successfully hidden. Click Yes to refresh the
application

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 249
Extend the app by hiding an existing control

In ‘Outline section’, under Show field, drop down to select ‘Show Extended Elements’.
Now, you can see that under S4 element PricingCondTable is listed as Hidden.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 250
Extend the app by adding a new UI
field to an extension point
Extend the app by adding a new UI field to an extension point

• Highlight the application folder and start the Extensibility Pane (Tools > Extensibility Pane or Ctrl-
Shift-E)

• In the application Outline section, select the Show Extensible Elements in the drop down list

• Expand S2 view in the Outline and select the extension point extListItemInfo

• Select Extend and Extend View/Fragment

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 252
Extend the app by adding a new UI field to an extension point

Show that the extension point was successfully extended and click OK

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 253
Extend the app by adding a new UI field to an extension point

In ‘Outline’ section check if the element extListItemInfo displays (Extended). Select it and click Go
to Code, Extension Code at the bottom.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 254
Extend the app by adding a new UI field to an extension point

• You are redirected back to the Code Editor and the generated extension fragment file is opened

• Paste the following code:


<ObjectAttribute id="ListAttributePoNumber" text="{PoNumber}" />


Click Save.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 255
Extend the app by adding a new UI field to an extension point

You can now see the added purchase order number .The value of the purchase order has been
fetched from the backend. Check the detail view to verify the same purchase order number.

Before After

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 256
Extend the app by replacing a view
Extend the app by replacing a view

There are currently 2 icons (information and notes). We will add 2 more icons.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 258
Extend the app by replacing a view

• In ‘Outline’ section select element S3

• Select ‘Replace with a copy of the parent view’ in the


drop-down of ‘Extend’

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 259
Extend the app by replacing a view

On the success message, click ‘Ok’.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 260
Extend the app by replacing a view

• Check the application Outline to validate that the S3 view now has
the indication of (Replaced with S3Custom)

• Select S3 view in the Outline (if not already selected)

• Click ‘Go to Code’ at the bottom and select ‘Extension Code’

• You will redirected back to the Code Editor

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 261
Extend the app by replacing a view

You are redirected back to the Code Editor and the copied view file opens

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 262
Extend the app by replacing a view

We will be adding more icon tabs to the tab bar.

Paste all the code to the S3Custom.view.xml file. At line 68,


before <IconTabFilter> that already exist in there

code to be entered

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 263
Extend the app by replacing a view

• Save the file (Save button)

• Select index.html, run the app (Run button)

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 264
Extend the app by replacing a view

We have 2 additional icons that have been added.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 265
More information

SAP Web IDE SCN page http://scn.sap.com/docs/DOC-55466

How to configure an external http://wiki.scn.sap.com/wiki/download/attachments/298682098/SAP%20Screen%20Personas%20in


GW system with SAP Web IDE formation%20sheet%2024690_IS_24690_en.pdf

https://help.hana.ondemand.com/SAP_RDE/frameset.htm
SAP Web IDE Developer Guide

https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/icon-explorer/index.html
Icon Explorer

https://tools.hana.ondemand.com/#cloud
SAP HANA Cloud Connector

http://marketplace.saphana.com/p/3334
SAP Web IDE

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Customer 266
Thank you
Contact information:

Binson VA
binson.v.a@sap.com
+353 1 471-7952

Sean Keane
sean.keane@sap.com
+353 1 471-7663