SAP Fiori - Hur kommer man igång? - Ovärderlig kunskap … · How do you Extend Fiori apps? How do you Implement Fiori? Why Fiori? Identify need Design Thinking Business Value Agenda

SAP Fiori - Hur kommer man igång?

Christer Ingemarsson, iStone

How do you Extend

Fiori apps?

How do you

Implement Fiori?Why Fiori?

Identify need

Design Thinking

Business Value

Agenda

SAPSA Impuls Christer

What is Fiori?

New UX

Design Principles

Architecture

Extensibility Concept

Extension Points

SAP Web IDE

Extension Wizards

Data Extensibility

How do you Build

Fiori apps?

Design Guidelines

Prototyping

Templates

SAPUI5 Explored

Deployment

Prerequisites

Fiori RDS

Deployment

Implement. steps

How do you Extend

Fiori apps?

How do you


Identify need

Design Thinking

Business Value

Agenda


What is Fiori?

New UX

Design Principles

Architecture


Extension Points

SAP Web IDE

Extension Wizards

Data Extensibility

How do you Build

Fiori apps?

Design Guidelines

Prototyping

Templates

SAPUI5 Explored

Deployment

Prerequisites

Fiori RDS

Deployment

Implement. steps

What is Fiori? Christer

Design Principles ArchitectureNew UX

2015-11-17 SAPSA Impuls 5

http://www.sapfioritrial.com

http://www.sapfioritrial.com/






2015-11-17 SAP Impuls 7




Responsive Simple Coherent DelightfulRole-based




Transactional Apps




Fact Sheets Analytical Apps

How do you Extend

Fiori apps?

How do you


Identify need

Design Thinking

Business Value

Agenda


What is Fiori?

New UX

Design Principles

Architecture


Extension Points

SAP Web IDE

Extension Wizards

Data Extensibility

How do you Build

Fiori apps?

Design Guidelines

Prototyping

Templates

SAPUI5 Explored

Deployment

Prerequisites

Fiori RDS

Deployment

Implement. steps

Why Fiori? Christer

Design Thinking Business ValueIdentify Need


• The main drivers for User Experience is to satisfy user needs, increase productivity and

decrease operational costs

• Identify pain points and possible solutions

• Identify most common used transactions

• Run transaction SWI2_FREQ

• Check delivered Fiori apps in Fiori Apps Reference Library

• http://www.sap.com/fiori-apps-library

According to IDC, 83% of organizations are planning to invest in mobile technology in the next 12 months

http://www.sap.com/fiori-apps-library

Why Fiori? Christer



Why Fiori? Christer


2015-11-17 SAP Impuls 14

http://experience.sap.com/designservices/




How do you Extend

Fiori apps?

How do you


Identify need

Design Thinking

Business Value

Agenda


What is Fiori?

New UX

Design Principles

Architecture


Extension Points

SAP Web IDE

Extension Wizards

Data Extensibility

How do you Build

Fiori apps?

Design Guidelines

Prototyping

Templates

SAPUI5 Explored

Deployment

Prerequisites

Fiori RDS

Deployment Options

Implement. steps

How do you Implement Fiori? Christer

Fiori RDS Implementation Steps Mobilizing FioriPrerequisites


• Minimum System requirements

‒ SAP ECC 6.0 SPS 15

‒ SAP NW Gateway 2.0 SP 08 or SAP NW 7.4 SP 05 (includes Gateway Services)

‒ Fact Sheet and Analytical Apps require that you run the backend system on HANA and install the SAP Web Dispatcher

‒ Check SAP note 1935915 for Browser requirements

• App Specific requirements

‒ Check requirements for the apps you plan to implement in Fiori Apps Reference Library

‒ http://www.sap.com/fiori-apps-library

* Apply ALL recommended SAP Notes!





• SAP Fiori RDS: http://service.sap.com/rds-fiori-apps

http://service.sap.com/rds-fiori-apps




1 Frontend Configuration (Gateway)

- Gateway Basic Configuration

- Add Backend system

- Create trusted RFC Destination to SAP

Backend System

- Activate OData and UI5 Services

- Create Fiori Users

Backend Configuration (ECC, CRM etc)

- Created trusted RFC Destination to Gateway

system

- Assign RFC Authorization to Fiori User

3 Setting up Fiori Launchpad and

Launchpad Designer (Gateway)

- Activating Launchpad OData Services

- Configuring ICF Nodes

- Configuring Login Screen for Launchpad

and Launchpad Designer

- Configuring Authorization Roles and

Assign to Fiori users

2




4 App Specific Configuration

- Check the SAP Fiori apps reference library for the app’s technical information

- Download required components from Service Marketplace (if needed)

- Gateway system: Install the required component/UI5 service (Transaction SAINT)

- Back-end system: Install the required component/OData Service (Transaction SAINT)

- Back-end system: Assign the Backend Role for the User (Transaction: PFCG)

- Gateway system: Activate OData and UI5 Services (Transaction: SICF)

- Gateway system: Activate Gateway Service in SAP Gateway (Transaction:

/IWFND/MAINT_SERVICE)

- Gateway system: Assign a User to the SAP Fiori Launchpad (Transaction: PFCG)

*Approval apps require additional configuration steps, see the Configuration Guide in RDS





• Sap Fiori Client Mobile App

‒ Improves caching and lifecycle

management

‒ SMP is optional

• SAP Fiori Client Mobile App +

Kapsel SDK

‒ Native device capabilities

‒ Foundation for offline access, push

notifications, and additional security

How do you Extend

Fiori apps?

How do you


Identify need

Design Thinking

Business Value

Agenda


What is Fiori?

New UX

Design Principles

Architecture


Extension Points

SAP Web IDE

Extension Wizards

Data Extensibility

How do you Build

Fiori apps?

Design Guidelines

Prototyping

Templates

SAPUI5 Explored

Deployment

Prerequisites

Fiori RDS

Deployment

Implement. steps

How do you Extend Fiori apps? Christer

Extension

PointsWeb IDE

Data

Extensibility

Extensibility

Concept


• Guarantees a modification free parent application,

all the extension are stored in an Extension project

• This means that the partent application remains the

same and works the same way after upgrades etc

Extension

Wizards

How do you Extend Fiori apps? Christer

Extension

PointsWeb IDE

Data

Extensibility

Extensibility

Concept


Extension

Wizards

How do you Extend Fiori apps Christer


• SAP Fiori Apps Reference Library

contains extensibility information

• http://www.sap.com/fiori-apps-

library

• Implementation Information ->

Extemsibility

• Useful HowTo Guides

• http://scn.sap.com/docs/DOC-55467

Extension

PointsWeb IDE

Data

Extensibility

Extensibility

Concept

Extension

Wizards


http://scn.sap.com/docs/DOC-55467



• Web IDE is the new tool for extending and building

Fiori Apps

• Templates and Wizards

• Mock data support

• Code Editor with Code Completion

• Preview with different screen sizes

• Import and Publish to ABAP Backend and HANA

Cloud Platform

Extension

PointsWeb IDE

Data

Extensibility

Extensibility

Concept

Extension

Wizards



• Extension Wizards in Web IDE can be used

when extending apps

• Extend Controller

• Extend/Replace View

• Replace Service

• Hide Control

• i18n Resource Text Customization

• Implement UI Controller Hook

• Visual Extensibility via the Extensibility pane

• Component.js contains all the extensions under the section Customizing

Extension

PointsWeb IDE

Data

Extensibility

Extensibility

Concept

Extension

Wizards



• Fiori apps should normally only have one

OData Service

• When you extent an OData Service you

Redefine the delivered standard OData

Service

• You can use the Service Builder in SAP

Gateway or Ecplise to extend the OData

Service

• You can also extend the data model using the

OData Model Editor in SAP WebIDE

Extension

PointsWeb IDE

Data

Extensibility

Extensibility

Concept

Extension

Wizards

How do you Extend

Fiori apps?

How do you


Identify need

Design Thinking

Business Value

Agenda


What is Fiori?

New UX

Design Principles

Architecture


Extension Points

SAP Web IDE

Extension Wizards

Data Extensibility

How do you Build

Fiori apps?

Design Guidelines

Prototyping

Templates

SAPUI5 Explored

Deployment

Prerequisites

Fiori RDS

Deployment

Implement. steps

How do you Build Fiori apps? Christer

Prototyping TemplatesSAPUI5

ExploredDesign

Guidelines

2015-11-17 SAPSA VårImpuls 29

• The Design Guidelines are the heart of SAP Fiori and it’s important to follow them when

building your own apps

• Foundation

• General Concept

• Floorplans – Page Overview

• App Types

• UI Elements

• https://experience.sap.com/fiori-guidelines/index.html

Deployment

https://experience.sap.com/fiori-guidelines/index.html

How do you Build Fiori apps Christer


• Prototyping is useful to provide quick

insight to your app’s look and feel

• Fiori Stencils in Axure RP

• https://experience.sap.com/fiori-

design/resources/downloads/

• http://www.axure.com

• Prototyping Kit in PPT

• https://experience.sap.com/wp-

content/fiori-

guidelines/FioriDesign/52_Fiori_Design

-Prototyping-Kit.html


ExploredDesign

GuidelinesDeployment

https://experience.sap.com/fiori-design/resources/downloads/

http://www.axure.com/

https://experience.sap.com/wp-content/fiori-guidelines/FioriDesign/52_Fiori_Design-Prototyping-Kit.html



• SAP Provides templates in Web IDE that can

be used when creating new apps

• Master/Detail

• Full Screen

• Fact Sheet

• Mobile Kapsel

• Kapsel Offline

• There are also Sample apps


ExploredDesign




• Contains Documentation for all available SAPUI5 controls

• Description

• Samples with source code

• Properties

• Associations

• Events

• https://sapui5.hana.ondemand.com/sdk/explored.html#


ExploredDesign


https://sapui5.hana.ondemand.com/sdk/explored.html



• The apps that you develop in

Web IDE can be deployed

to:

• ABAP Backend Server

• HANA Cloud Platform

• iOS and Android devices

• Manually deploy to SMP,

HCPms

• In the future it’s planned to

be able to deploy directly to

SAP Mobile Platform


ExploredDesign




Christer Ingemarsson

[email protected]

Besöksadress

iStone T +46 8 545 275 50

Kungsgatan 59 M +46 708 588 957

SE-111 22 Stockholm F +46 8 545 275 59

Sweden www.istone.se

Documents

SAP Fiori - Hur kommer man igång? - Ovärderlig kunskap … · How do you Extend Fiori apps? How do you Implement Fiori? Why Fiori? Identify need Design Thinking Business Value Agenda