© 2014 IBM Corporation

SAP Fiori – Implementation and Enhancement Leading Practice Approach

Vinod PandeySr. Managing ConsultantIBM – H2R SAP/SuccessFactors

© 2014 IBM Corporation1

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.

SAP Fiori

© 2014 IBM Corporation2

New Field

Hide Control

Enable New Function

Extensibility Example

© 2014 IBM Corporation

Content

Layer

When an Extension is

Required

Relevance

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.

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.

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.

Search

Model

The back-end logic is not exposed in

the application’s Gateway service.

Facts

heets

Tra

nsacti

on

al

An

aly

tical

Tra

nsacti

on

al

Tra

nsacti

on

al

An

aly

tical

An

aly

tical

SAP Fiori applications can be extended by

enhancing one or multiple content layers,

depending on the extension requirements and

the application type.

SAP Fiori Extensibility by Content Layer

© 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)

� Implement controller events (e.g., navigation)

� Execute tests

� Deploy project to frontend system (GW

Hub)

� Create and 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

© 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

• Backend business function

• Gateway

• App-specific

• Fiori Launchpad

Logic Enhancement

• 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

Knowledge Requirements

Extension Tools:

ContentLayer

ABAP ObjectNavigator (se80)

ABAP Dictionary (se11)

ABAP Customizing (spro)

HANA Studio

SAP NW Gateway Service Builder (segw)

Eclipse with ABAP Repository Team Provider

Smart BusinessModeler

Business Suite

Gateway

HANA

UI for Transactional

apps

UI for Analytical

Apps

UI for Factsheets

Search Model

Extending SAP Fiori Apps

ContentLayer

ABAP Business Suite

SAP NWGateway

HANA NativeDevelopment

SAPUI5 Odata Protocol;HTML5; JavaScript

Business Suite

Gateway

HANA

UI

Search Model

© 2014 IBM Corporation

Browser Support

Operating-system

Internet Explorer

MozillaFirefox

Google Chrome

Web View

SAP Fiori Client

AppleSafari

Android Browser

BB Browser

Opera

Windows¹9

10

11

Latest and extended

support release²

Latest release

- - No - - No

MAC OS - - - - -5.16.0

- - -

iOS³ - - No Yes Yes Yes - - No

Android - No Yes Yes Yes - Yes - No

BlackBerryº - - - Yes - - - Yes No

� Details and current status – Link to note 1935915

© 2014 IBM Corporation

Key Points & Summary

� SAPUI5 is the flexible extension to SAP‘s 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 PandeySr. Managing ConsultantHuman Capital ManagementEmail: vinod.pandey@us.ibm.comCell#: 224-221-5070