You are on page 1of 16

SAP Fiori Implementation and Enhancement

Leading Practice Approach

Vinod Pandey
Sr. Managing Consultant
IBM H2R SAP/SuccessFactors

2014 IBM Corporation

SAP Fiori
SAP Fiori is the new user experience (UX) for SAP software. It is the new face of SAP to
business across devices and deployment option.

2014 IBM Corporation

Extensibility Example

New Field

Hide Control

Enable New Function

2014 IBM Corporation

When an Extension is
Required

UI

The back-end logic and content


required for the app extension exists
in the Gateway layer, but is not
exposed in the app's UI.

Transactional

Analytical

Gateway
(OData)

The back-end logic and content


required for the app extension exists
in the Business Suite layer, but is not
exposed in the app's Gateway
service.

Analytical

HANA

The back-end content required for the


app extension exists in the HANA
models, but is not exposed in the
app's OData service.

Business
Suite

The back-end logic and content


required for the application
enhancement does not exist in the
Business Suite.

The back-end logic is not exposed in


the applications Gateway service.

Transactional
Factsheets

Search
Model

Relevance

Analytical

Content
Layer

Transactional

SAP Fiori Extensibility by Content Layer

SAP Fiori applications can be extended by


enhancing one or multiple content layers,
depending on the extension requirements and
the application type.
2014 IBM Corporation

Best practices for building custom Fiori apps

UI first
 Data modeling second
 then coding

2014 IBM Corporation

How to build a new custom Fiori app


 UX Designer / Business Experts
Create app mock-up (layout and
interactions)

 Data Modeler
Define OData model
 UI Developer
Create SAPUI5 project using a template
in SAP River RDE

Select the data service and bind the


fields




Create missing views (XML views)




Execute tests

App Administrator





Define app roles


Insert app into application catalog and group
Assign app role to the users

Gateway Developer






Import OData model


Map OData entities to ABAP structures
Map BAPIs to REST operations
Implement performance and transactional
patterns if required

Implement controller events (e.g.,


navigation)
Deploy project to frontend system (GW
Hub)
Create and execute tests

2014 IBM Corporation

Fiori Development Guidelines









sap.m controls
Master-Details Pattern (for on any DB)
Component.js
Project Structure
1 UI App : 1 GW Service : 1 Role
Naming conventions
Follow Fiori UX Design

2014 IBM Corporation

Choosing the An App


Understand business case
Review Fiori Apps catalog
Understand prerequisites
Out-of-the-box demonstration
Mock-up master data
Confirm business case

2014 IBM Corporation

Blueprinting
Traditional UX vs. Fiori UX use cases
Backend functionality vs. Fiori App functionality
Standard vs. build
Out-of-the-box vs. customized
Minimal fields vs. complete information
Global vs. local requirements

2014 IBM Corporation

Types of Customization

Configuration

Logic
Enhancement

Backend
business
function
Gateway
App-specific
Fiori Launchpad

BAdI
implementation
Implicit/Explicit
enhancement
implementation
Subclassing

Screen
Enhancements
Hide fields
Add fields
Add pages

Create New App


Core function
OData Service

2014 IBM Corporation

Security/Authorization

Technical
Backend
systems
Gateway
system
Fiori App

Organization

Business
Project
Product
Support
Partners

Geography
Regional
Global

2014 IBM Corporation

Testing

Backend
Frontend
Devices
Web browsers
Security

2014 IBM Corporation

Extending SAP Fiori Apps


Extension Tools:
Content
Layer

ABAP Object
Navigator
(se80)

ABAP
Dictionary
(se11)

ABAP
Customizing
(spro)

HANA
Studio

SAP NW Gateway
Service Builder
(segw)

Eclipse with
ABAP Repository
Team Provider

Smart
Business
Modeler

Business Suite
Gateway
HANA
UI for Transactional
apps
UI for Analytical
Apps
UI for Factsheets
Search Model

Knowledge Requirements
Content
Layer

ABAP

Business
Suite

SAP NW
Gateway

HANA Native
Development

SAPUI5

Odata Protocol;
HTML5; JavaScript

Business Suite
Gateway
HANA
UI
Search Model
2014 IBM Corporation

Browser Support
Operatingsystem

Internet
Explorer

Mozilla
Firefox

Google
Chrome

Web
View

SAP Fiori
Client

Apple
Safari

Android
Browser

BB
Browser

Opera

9
10
11

Latest and
extended
support
release

Latest
release

No

No

MAC OS

5.1
6.0

iOS

No

Yes

Yes

Yes

No

Android

No

Yes

Yes

Yes

Yes

No

BlackBerry

Yes

Yes

No

Windows

Details and current status Link to note 1935915

2014 IBM Corporation

Key Points & Summary


 SAPUI5 is the flexible extension to SAPs UI portfolio suited for
Hana Cloud Platform on-demand or ABAP, HANA and Java for on
premise systems
 SAPUI5 works best based on OData enriched by metadata
exposed via OData annotations
 On top it is recommended to follow the Fiori development
guidelines (Refer http://experience.sap.com/fiori-guidelines/ )
 Please also look into OpenUI5 and the additional opportunities
coming along with the open source version of SAPUI5

2014 IBM Corporation

Contact Information

Vinod Pandey
Sr. Managing Consultant
Human Capital Management
Email: vinod.pandey@us.ibm.com
Cell#: 224-221-5070

2014 IBM Corporation