SAPTECHED 2016 EMEA - 10 Golden Rules for Designing a Custom-Built SAP Fiori App

©  2014 NL for Business. All rights reserved. 1 © NL for Business 2014. All rights reserved. woensdag 9 november 16

10 GOLDEN RULES FOR DESIGNING A CUSTOM-‐BUILT SAP F IORI APP

[email protected]

Scope

360° Research

Synthesize

Ideate

Prototype

Validate

Prepare Test

Code

Design Discover Develop

Deploy

Run

Support

Deploy

©  2014 NL for Business. All rights reserved. 2

My Developer skills

My Focus on User Experience

SAP Fiori Design Thinking

SAP Build

UI5 HANA ABAP

Gateway Cloud IntegraMon

My Focus on IntegraMon

My relaMon with SAP

Founded in 2001 CerMfied Consultants

Located in The Netherlands

UI5 Gateway

Fiori & Fiori Cloud From Design to Prototype

SAP Trainer for

My Profile

My profile

Robert Eijpe

User Experience Architect Fiori Consultant

SAP Consultant since 1996

SAP Mentor SAP Trainer

Speaker at TechEd External SAP Employee


Customer challenges: Custom Built ApplicaMons

Business Networks

Customer Experience

Workforce Engagement

Internet of Things and Big Data SAP HANA Cloud Pla[orm

SAP HANA Pla[orm

Digital Core

Customer Buid ApplicaMons on Customer Buid ApplicaMons on


S/4HANA, the heart of the Digital Core

Business networks Devices

Social networks Big Data

Internet of Things People

Live data with SAP HANA Platform Granular I Responsive I Accurate

Empowered users with Fiori UX Instant insight I Contextual information I Personalized experience

Cloud Edition

On premise Edition

Enriched processes with S/4HANA applicaMons Scalability I Real time I Prediction I Simulation

NaMve integraMon for hybrid scenarios

Ariba Concur Fieldglass Hybris SuccessFactors


My vision on the SAP Strategy

Business Big Data People Things

Structured Unstructured Event

Business Context

Real-time Insight

Value of Information

Trigger to Change

Cloud Source: NL for Business 2011


Fiori Concept

This is the current state of planning and may be changed by SAP at any Mme.

The Fiori Concept is the new user experience paradigm targeMng a consistent experience across all SAP soluMons.

…

Business Suite

Suite on HANA

SAP Cloud SoluMons,…

SAP Unified UX DirecMon for all Apps

S/4 HANA


SAP UX Strategy

Fiori Launchpad One entry point

Fiori Overview Pages Infos and acMons for user flow

ApplicaMons Capture details & work in depth

SAP Fiori Visually harmonized


Customers Challenge: End user perspecMve

SAPGui Fiori Client

TransiMon


Customers Challenge: SAP UI Design PossibiliMes for SAP Fiori

Development

Fiori Apps “old” UI Standalone

Pixel Perfect Design

Fiori Freestyle Design

Fiori Hybrid Design

Fiori Smart Design UI Modeling design

Screen Personas Design

Toolings

Modelling

Fiori Web App

Fiori Extended Web Apps

Fiori Mobilize Web Apps

Theming

Harmonized App UI5 Web Apps Smart Business

Business Objects Cloud

Roambi

Fiori for iOS

Theming Theming

Fiori Web Design

Analysis Path Framework


Customers Challenge: Fiori Data Provider PossibiliMes

Any DB

Fiori Apps

Gateway RunMme

Business Logic

ABAP CDS incl. Business Logic and

Odata Logic

Any DB

OData Logic

Any DB

Business Logic

OData Logic

RFC incl. BAPI, EasyQuery

HANA CDS

HANA DB

calculaMon views & procedures

XSOData

XS J2EE

ABAP CDS incl. Business Logic and Odata Logic

HANA DB

HANA CDS

calculaMon views & procedures

AMDP

XSOData GW

Gateway RunMme XSA …

BASIS 4.7+ NetWeaver 7.0+ NetWeaver 7.5 HANADB

S/4HANA 16/11 release

NetWeaver 7.5 on HANADB

Business Suite 7 Business Suite 7 ERP 6.0 HANA based SoluMons

Gateway RunMme

2016 2015 2012 2013 2011


Customers Challenge: Support of Pla[orm

ApplicaMon Server (Business Suite)

SAPGui

Backend Server (Business Suite)

Fiori Client

FrontEnd Server

Backend Server (Business Suite)

Fiori Client

Hana Cloud Plajorm

HCC

Fiori Cloud Web Dispatcher

Any HDB HDB

Any


Customers Challenges: Development Knowledge Impact

Web IDE ABAP

Workbench

Good “old” ABAP

UI5

HANADB

Eclipse for ABAP

ABAP CDS

API incl OData

HANA Studio

Fiori

S4HANA content


Customers Challenges for UI Design & Development

SAP Strategy

Cloud versus On Premise

Security standards

MulM-‐system

Maturity of Fiori

Knowlegde level

Support older SAP Releases

LocalizaMon


10 Golden Rules for Fiori Development from Teched 2015 by Robert Eijpe

n  SAP Fiori apps follow the SAP Design Guidelines (GR-‐01) n  SAP Fiori Apps always exists of a UI part and OData part which must be defined in different sonware

components (GR-‐02) n  SAP Fiori UIs are built on top of SAPUI5 framework with a restricted set of the UI5 Controls and wrioen

in AMD syntax (GR-‐03) n  It is recommended to built SAP Fiori app with SAP Web IDE, based on the new Fiori templates (GR-‐04) n  Every SAP Fiori app must built as a component and defined by a set of metadata, so it can run in a

container as a standalone web app, in the Fiori Launch Pad and as a naMve mobile App (GR-‐05) n  SAP Fiori UI Views are always build as XML views and Extension points need to be implemented (GR-‐06) n  Always use intent-‐based navigaMon to navigate within a app and between apps (GR-‐07) n  Use only the newest UI5 OData Model (v2) to access one OData Service node of the backend (GR-‐08) n  Bounded UI5 control must be typed and for OData Models bounded with OData annotaMons (GR-‐09) n  Use predefined UI5 style elements and change the look & feel with Theme Designer (GR-‐10)


10 Golden Rules for Design and Build Fiori Apps by Robert Eijpe

•  Adopt Design Thinking Process and Prototyping to validate your Design (GDR-‐01) •  Design for User Experience not UI (GDR-‐02) •  Develop your own Guidelines (GDR-‐03) •  Choose the right starMng point for app design (GDR-‐04) •  ApplicaMons must support mulM backends (GDR-‐05) •  ApplicaMons must be designed with localizaMon in mind (GDR-‐06) •  Think about impact of performance and security (GDR-‐07) •  Design with reusability and flexibility in mind and think about spliqng up UI’s (GDR-‐08) •  Design apps based on a generic virtual data model (GDR-‐09) •  Think about capabiliMes of iot, mobility, big data and cloud (GDR-‐10)

+ my 10 Golden Rules for Fiori Development from Teched 2015


Adopt Design Thinking Process and Tools to validate your Design

(GDR-‐01)


Design Thinking Process, UX Design Adopt Design Thinking Process and Prototyping to validate your Design

Scope

360° Research

Synthesize

Ideate

Prototype

Validate

Prepare Test

Code

Design Discover Develop Deploy

Run

Support

Deploy

Understand Define Ideate Prototype Build Deliver

SAP UX Design Services

Education & Best Practices

Tools & Technologies

(GDR-‐01)


Design Thinking Tools supporMng from SAP Adopt Design Thinking Process and Prototyping to validate your Design

Scope

360° Research

Synthesize

Ideate

Prototype

Validate

Prepare Test

Code

Design Discover Develop Deploy

Run

Support

Deploy

SAP Web IDE WEB IDE CLOUD PORTALFIORI LAUNCHPAD

UI Theme Designer

Fiori Design Guidelines

Fiori Launchpad WEB IDE CLOUD PORTALFIORI LAUNCHPAD

S/4 HANA WEB IDE CLOUD PORTALFIORI LAUNCHPAD

Business Suite WEB IDE CLOUD PORTALFIORI LAUNCHPAD

Bring your own Language WEB IDE CLOUD PORTALFIORI LAUNCHPAD

Success Factors WEB IDE CLOUD PORTALFIORI LAUNCHPAD

C4C WEB IDE CLOUD PORTALFIORI LAUNCHPAD

Ariba WEB IDE CLOUD PORTALFIORI LAUNCHPAD

Concur WEB IDE CLOUD PORTALFIORI LAUNCHPAD

Fieldglass WEB IDE CLOUD PORTALFIORI LAUNCHPAD

… WEB IDE CLOUD PORTALFIORI LAUNCHPAD

(GDR-‐01)


Brainstorm about requirements and possibiliMes Adopt Design Thinking Process and Prototyping to validate your Design

PossibiliMes for SAP Fiori implementaMons

Development

Fiori Apps “old” UI Standalone



Fiori Hybrid Design



Toolings

Modelling

Fiori Web App



Theming

Harmonized App UI5 Web Apps Smart Business

Business Objects Cloud

Roambi

Fiori for iOS

Theming Theming

Fiori Web Design



Design thinking process is more important than the tool Adopt Design Thinking Process and Prototyping to validate your Design

Fiori Launch Pad Apps “old” UI Standalone



Fiori Hybrid Design



Toolings

Fiori Web Design

Axure RP

Powerpoint

…

(GDR-‐01)


Use prototypes to design your app and fail Adopt Design Thinking Process and Prototyping to validate your Design

(GDR-‐01)


Different views will influences your soluMon Adopt Design Thinking Process and Prototyping to validate your Design

Process

Centric View

User Centric View

Company Strategy Centric View

ApplicaMon Centric View

Source: NL for Business 2011

(GDR-‐01)


Validate Adopt Design Thinking Process and Prototyping to validate your Design

Use quesMonnaires to get first feedback on idea

Use click models to find out the right screen flow

Build high fidelity prototypes to get feedback and create user adopMon

(GDR-‐01)


Design User Experience not UI

(GDR-‐02)


What influences the User Experience Design User Experience not UI

Motion Sensing Devices Augmented Reality Virtual Reality Current Reality

(GDR-‐02)


Design first for your smallest screen of your devices … Design User Experience not UI

(GDR-‐02)


… and then add more informaMon Design User Experience not UI

AdapMve

Responsive Same layout. Hide or pop in fields

Different layout. Add UI elements

(GDR-‐02)


Develop your own Guidelines

(GDR-‐03)


SAP provides Fiori Guidelines Develop your own Guidelines

Development

Fiori Launch Pad Apps Standalone



Fiori Hybrid Design

Fiori Smart Design

Modelling

Fiori for Web



Theming

Fiori for iOS

Fiori Web Design

UI Modeling design

Framework

Smart Business


SAP Fiori Guidelines for Web SAP Fiori Guidelines for iOS

(GDR-‐03)


Make use of Generic Concepts in your Design Develop your own Guidelines

Placement of acMons

CollaboraMon

Dran Handling

Create with Reference

Copy Handling

Flags & Favorites

Field ValidaMon

Field Formaqng

Forwarding

Handling Busy State

Manage Objects

Message Handling

Use of ToolMps

AnimaMons

Colors

Iconography

Typography

(GDR-‐03)


Use Fiori Guidelines as an starMng point Develop your own Guidelines

Public SAP Fiori Guidelines are leading •  But focus on Fiori 2.0 concepts •  Look at other design guidelines like Apple Guidelines for iOS and Google Materials

AddiMonal Developer Guidelines needed •  Not only Fiori, but also for UI5, ABAP and Odata development

Introducing naming convenMon •  Develop in your own namespace •  SAP will generate code, which restrict the length of unique naming

Do not focus on Theming, but adopt exisMng Themes •  Customers can build own SAP Themes, which we will adopt for our soluMon, so customers don’t

need to do this twice

(GDR-‐03)


Choose the right starMng point for app design

(GDR-‐04)


Choose the right floor plan Choose the right starMng point for app design

Fiori Freestyle Floorplans

Fiori Elements Floorplans

Fiori Framework Floorplans

(GDR-‐04)

SAP Build Gallery


When floorplans do not fit, think about a specific layout Choose the right starMng point for app design

When you choose a floorplan, you automaMcally choose your Layout

Full Screen Layout Split Screen Layout

(GDR-‐04)


Design your screen flow Choose the right starMng point for app design

(GDR-‐04)

User-‐System InteracMon Diagram


Find the right Fiori UI Elements for your screen layout Choose the right starMng point for app design

Object View Floorplan

SplitApp Control (sap.m)

MasterPage Control (sap.m.semanMc)

DetailPage Control (sap.m.semanMc)

IconTabBar Control (sap.m)

Icon Control (sap.m)

Object Header Control (sap.m)

Standard ListItem Control (sap.m)

(GDR-‐04)


Choose for your target RunMme and adopt possibiliMes Choose the right starMng point for app design

HTML Wrapper Fiori Launchpad NaMve Mobile App Wrapper

Standalone Web Fiori Launchpad Mobile Hybrid

Start as web page Start as Tile Start as mobile App

Kapsel

(GDR-‐04)

Apple Swin

NaMve Mobile

Start as mobile App

iOS API


Design can be simplified by FLP Embedded FuncMonality Choose the right starMng point for app design

No design needed for Home buoon Logo Header Text User seqngs Access to app seqngs About dialog for App Change theme of app No design needed for Contact Support Email integraMon Tel/SMS

AddiMonal design needed for Back buoon App seqngs dialog (opMonal) Dynamic Mle content (opMonal) Trigger to collaboraMon (opMonal) Trigger to communicaMon (opMonal)

Fiori Launchpad

Fiori App

(GDR-‐04)


ApplicaMons must support mulM backends

(GDR-‐05)


MulM Backend Systems ApplicaMons must support mulM backends

Customers want apps against mulMple backend systems

Individual System Data or Aggregated Data SAP adviced soluMons: Use Gateway MulM Orgin Services

(GDR-‐05)

Fiori Apps

Gateway

“Classic” Business Logic

OData Data Provider


OData Data Provider


OData Data Provider


MulM Origin Concept on Development ApplicaMons must support mulM backends

Developed Fiori Apps for mulM origin in mind �  Collect data out of all systems, out of user default systems or out of a specific system �  Metadata version must be the same in all systems

Works fine when system field is part of the result or selecMon for system is made

No go when system field is not part of the result •  Duplicates will occur for Dropdowns, Value Helps, Facet Filters •  Count, Paging and sorMng in combinaMon with filtering is not working properly

MulM-‐origin is not suitable for large aggregaMon data •  AggregaMon is possible for small datasets without server-‐side paging

•  Fiori App must use Client Side Odata model for the aggregaMon, count, sorMng, filtering and paging

(GDR-‐05)


ApplicaMons must be designed with localizaMon in mind

(GDR-‐06)


MulM languages ApplicaMons must be designed with localizaMon in mind

Language dependent

ApplicaMon Text

Language dependent Content Text

Language dependent Date NotaMons

Language dependent Picture

Other language dependent topics •  Nummeric format •  Message texts •  Video •  Sound

(GDR-‐06)


MulM languages ApplicaMons must be designed with localizaMon in mind

Languages of texts are maintained on different places: •  ApplicaMon texts in i18n files •  Mimes (sound, video and documents) in mime repositories or content management systems •  Field labels generated out of medium texts of DDIC data elements •  ApplicaMon texts in standard SO10 Text •  SAP backend message text in T100 message table Approach Maintain text in a way customers already do Use an ABAP reports to generate i18n files and use annotaMons in OData services Keep in mind to reload metadata and clear caches

(GDR-‐06)


Think about impact of security and performance

(GDR-‐07)


Security and Performance Think about impact of security and performance

Use AuthorizaMons in the backend where possible

Reuse or validate informaMon that is already known

Fiori does not support exclusive locking due synchronically behavior •  Inform user when acMon can not be processed because of locking failure •  Use dran-‐concept when available

Don’t wait for processing of large uploaded files

Use paging and filtering concepts when possible

(GDR-‐07)


Design with reusability and flexibility in mind and think about splinng up UI’s

(GDR-‐08)


Where can you find reusability and flexibility possibiliMes Design with reusability and flexibility in mind

MulMple implementaMon support �  Build as a Component so it can be used Standalone, as part of Fiori Client and as Mobile App

Consistent User Experience and lower development costs �  Reuse floor plans or parts of it �  Use Smart Templates �  Use modeling tools

Focus on most important informaMon and flows �  Use Fiori Exensibility Concept to fit the gap

Look for exisMng funcMonality �  Reuse your current assets and make them available via API �  Use public and private API of others

Create generic components when possible �  Generic Data Model with specific views �  Generic API with specific implementaMons

(GDR-‐08)


Fiori App Senngs

Extension Point

Standard Design UX flexibility Design with reusability and flexibility in mind

PersonalizaMon

(GDR-‐08)


Reasons to split an applicaMon Think about splinng up applicaMons

Simplify an ApplicaMon � “Original” ApplicaMon supports more roles

–  Find the balance between every user has its own app and one app will be used by mulMple roles

� ApplicaMons can have more entry points –  Tiles start different views of an applicaMon – Overview Page Cards can starts an applicaMons – ApplicaMon can start an applicaMon

Improve the user experience � Combine different devices and act as one applicaMon

(GDR-‐08)


Design apps based on a generic virtual data model

(GDR-‐09)


Build your Generic Virtual Data Model Design apps based on a generic virtual data model

ERP Data via SLT

Generic Data Model

Domain Specific Data Model

Domain Specific Data Model

ApplicaMon Data Model




ApplicaMon UI

… …

…

ApplicaMon UI …

…

… …

(GDR-‐09)


Provide a migraMon path for custom built apps Design apps based on a generic virtual data model

HANADB ECC 6.0 ERP

Other UI soluMons

Fiori Apps

Tables

“Classic” logic

NetWeaver 7.5 Frontend Server

S/4 HANA

Custom built for ERP

Own VDM

Simpllified Tables

Custom built for HANADB AM

DP

API

Simpllified Tables

“Classic” logic

Tables

Custom built Fiori Apps

Own VDM

Simpllified Tables

Custom built for HANADB

ECC 6.0 on NW 7.5

Own VDM

Simpllified Tables

Custom built for ERP

API

SAP Fiori incl. apps, OVP & APF

Fiori OVP

Fior APF

(GDR-‐09)

Classic UI


Think about capabiliMes of iot, mobility, big data and cloud

(GDR-‐10)


Think about capabiliMes of iot, mobility, big data and cloud

Business networks Devices

Social networks Big Data

Internet of Things People


Know the power of a mobile device Think about capabiliMes of iot, mobility, big data and cloud

Replacement for a lot of “old“ devices


Simplify your Design by adding device capabiliMes Think about capabiliMes of iot, mobility, big data and cloud

Logon

Push

1

Contacts

Tasks

PrinMng Barcode scanner

Camera

Calendar

Voice Recording

Geo LocaMon

Seqngs

.. And much more


Simplify your UX with connected devices Think about capabiliMes of iot, mobility, big data and cloud

By connecMng more devices, you can improve and simplify the User Experience


Collect and filter data streams of things Think about capabiliMes of iot, mobility, big data and cloud


Turn this data into “smart” informaMon


Enrichment with Big Data

Address of your locaMon

But also much more, for example: building height, soil condiMon, pictures of the locaMon, populaMon in the area, ground price


HANA Database Services

Data Sources

HANA DB

HANA DB Services

SpaMal Graph PredicMve Search Text

AnalyMcs Series Data

Business FuncMons

Streaming AnalyMcs

Rules Framework

AnalyMc Models

Tables Virtual Tables

ELT, STL & ReplicaMon

Hadoop & Spark IntegraMon

Smart Data IntegraMon

Internet REST API

IoT

HANA Runtimes

C … J2EE XSC NodeJS Web

< / >

OData REST SINA

HANA API

OData4AnalyMcs ADBC / ODBO ODBC /JDBC

API API

Core Data Services

Views

ABAP (only in S/4HANA)

C


Cloud can be the driver for connecMng anyone and any thing

HCP Runtimes

J2EE XSC Web

< / >

www

HCP API Destinations HANA Cloud Platform API Services

Internet Services

HANA Cloud Connector

Hana Database Services

ECC

API

Native Mobile Browser

Fiori Mobile Apps Fiori Web Apps Visual Harmonized Apps

On Premise

Forms

Feedback

Mobile API

GamificaMons

Odata RunMme

Oauth

TranslaMon

Document Sharing

API Hub & Management

Key Store

CMS IntegraMon

CollaboraMon

AuthorizaMon

IoT

Persistancy

Hybris YAAS Micro

Services

Bsuiness for YAAS Cloud API On-‐premise API

Tax CalculaMon

Hybris Loyalty

…

BW non- SAP

HCP DB’s

other Database Services


Our Take Away Keypoints: 10 Golden Rules for Fiori Design

•  Adopt Design Thinking Process and Prototyping to validate your Design (GDR-‐01) •  Design for User Experience not UI (GDR-‐02) •  Develop your own Guidelines (GDR-‐03) •  Choose the right starMng point for app design (GDR-‐04) •  ApplicaMons must support mulM backends (GDR-‐05) •  ApplicaMons must be designed with localizaMon in mind (GDR-‐06) •  Think about impact of performance and security (GDR-‐07) •  Design with reusability and flexibility in mind and think about spliqng up UI’s (GDR-‐08) •  Design apps based on a generic virtual data model (GDR-‐09) •  Think about capabiliMes of iot, mobility, big data and cloud (GDR-‐10)


Thanks for your aqenMon

Technology

SAPTECHED 2016 EMEA - 10 Golden Rules for Designing a Custom-Built SAP Fiori App