You are on page 1of 52

LESSONS LEARNED SAP FIORI IMPLEMENTATION ON BUSINESS SUITE

ROBERT.EIJPE@NL4B.COM

dinsdag
© 2014 17 november
NL for 2015
Business. All rights reserved. © NL for Business 2014. All rights reserved. 1
My profile

My relation SAP Trainer My Profile


with SAP for

Founded in 2001 SAP Mentor UI5


Certified Consultants SAP Expert Innojam GateWay/OData
Located in Speaker at TechEd Fiori
The Netherlands Member of UI5 Team

My Focus on My Focus on My
Integration Developer skills Robert Eijpe
User Experience
User Experience Architect
SAP Fiori Gateway UI5 Fiori Consultant
SAP Personas Cloud Integration HANA
Business Client Process Orchestration ABAP SAP Consultant
since 1996

© 2014 NL for Business. All rights reserved. 2


Customers, where I implement Fiori

© 2014 NL for Business. All rights reserved. 3


SAP UI Technologies of the Business Suite

The evolution

© 2014 NL for Business. All rights reserved. 4


SAP Launch Pad – Start page for Application & Monitor Dashboard

© 2014 NL for Business. All rights reserved. 5


Fiori Applications

Role-based Responsive Simple Coherent Delightful

© 2014 NL for Business. All rights reserved. 7


Lessons Learned starting SAP Fiori implementation

EasyRun

EasyBuild

EasySetup

© 2014 NL for Business. All rights reserved. 9


Lessons Learned starting SAP Fiori implementation

EasyRun

EasyBuild

EasySetup

© 2014 NL for Business. All rights reserved. 10


EasyRun : Goal

Introducing the first Fiori Apps in your organization


without risk and little impact

© 2014 NL for Business. All rights reserved. 11


EasyRun : Implementation Steps

Discovery – Built the Business Case

• Fiori Discovery Workshop


Discover • SAP Fiori Landschap Check & Decisions
• End user access of Fiori Apps

Implementation

• Implement SAP backend functionalities (optional)


Implement • Setup Fiori Landscape (optional, one-time)
• Install and customizing standard SAP Fiori App
• Translate Languages of SAP Fiori Apps (optional)
• Extend SAP Fiori Apps (optional)
• Acceptance Test
Rollout
Rollout

• Prepare Go-Live & Rollout


• Fiori Awareness workshop

© 2014 NL for Business. All rights reserved. 12


Fiori Discovery Workshop

• Find your target group


• Find your first applications
• Discover the apps in the Fiori Trial Cloud
edition (if available)
• Fit/Gap analyses of backend functionality

Fiori Apps Reference Library


https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/
© 2014 NL for Business. All rights reserved. 13
Fiori Discovery Workshop – Lessons Learned

• Find your target group

• Internal related roles like Employees / Managers

• Find your first applications

• Pay stub

• Leave Request / Leave Request Approval

• Purchase Order & Tracking in SRM or MM

• Timesheets / Timesheet approval

• Fit/Gap analyses of backend functionality

• Implement ESS/MSS

• Implement new workflows

© 2014 NL for Business. All rights reserved. 14


Fiori Landschap Check & Decisions

Access & Security


• VPN versus Internet Firewall
• Authentication Reverse Proxy (Web Dispatcher)
• Authorization
Firewall

High maintenance cycle


• Quarterly patch ABAP Front-end Server (Gateway & UI5)
• Weekly notes Fiori
Low maintenance cycle
System Landscape
• Yearly patch ABAP Backend Server (Business Suite)
• Monthly notes

Hana XS Engine
HANA Database
*** Transactional apps can run on any database & do not require HANA database
© 2014 NL for Business. All rights reserved. 18
Fiori Landschap Check & Decisions

Fiori Launch Pad


deployment
options

© 2014 NL for Business. All rights reserved. 19


Fiori Landschap Check & Decisions

Fiori On-Premise Fiori Cloud Editions


General available Productive use in Q4 2015
(rampup program available)
Complex landscape
Not all Fiori Apps available yet
Reuse existing users and easy setup of roles
Additional setup of users and roles in Cloud
No license cost for existing SAP users, but
landscape investment and maintenance License cost for usages which includes
cost maintenance cost
Own responsibility (security, device Faster adoption of new features and in synch
management) for access to applications platform
Includes parts of other cloud solutions like
WebIDE, Mobile Platform, Theme Designer
and Cloud Portal
© 2014 NL for Business. All rights reserved. 20
Access of Fiori Apps

NWBC for Fiori Fiori Web Fiori Client Fiori Mobile

Outlook planned: • Fiori Launch Pad as browser page • Fiori Launch Pad as mobile app • Fiori App as mobile app
• Integration of SAP Fiori Apps in • No installation required • Improved performance • Native device integration
NWBC index page  Support iOS, Android & Windows • Automatic Logon support
• Push Notifications
Outlook future: Outlook future: • Offline application data
• SAP FLP with SAP Gui native • Replacement of SAP portal synchronization
experience
• SAP FLP configuration only

Remark: Windows only


User Device Support
© 2014 NL for Business. All rights reserved. 21
Result of EasyRun Discovery Phase – Business Case

Gain productivity

Increase user adoption


Discovery
Decrease user errors
Workshop
Save training costs

Improve company brand

https://www.youtube.com/watch?t=124&v=v6tOQlBTAY4

© 2014 NL for Business. All rights reserved. 22


Implementation Phase
Install and
customizing
Setup & configure standard SAP
SAP Fiori Launch Basic Branding
Fiori App
Pad & OData
runtime
Check and
Implement SAP Go-Live
backend
functionalities

Application
Platform Start

Verify &
Network &
prepare SAP
Security
Backend
Configuration
Fiori
Infrastructure
Installation

© 2014 NL for Business. All rights reserved. 23


Result of EasyRun Implementation Phase – Live with Fiori

Fiori Landscape Fiori Launch Pad First Fiori App

Lessons learned:
• Initial setup of landscape is complex and time consuming
• New technology needs adopters, not blockers
• Expectations of end users are very high, but they love it
• If backend functionality is standard, implementation of Fiori apps can be done in days

© 2014 NL for Business. All rights reserved. 24


EasyBuild for SAP Fiori

EasyRun

EasyBuild

EasySetup

© 2014 NL for Business. All rights reserved. 25


EasyBuild phases for SAP Fiori

Design

• Fit/Gap Analyses workshop


Design • Mockup UI

Build

Build • SAP Fiori Landschap Check & Update (optional)


• Implement SAP backend functionalities (optional)
• Built new or extend existing SAP Fiori Apps

Rollout Rollout

• Prepare Go-Live & Rollout


• Documentation

© 2014 NL for Business. All rights reserved. 26


80/20 rule: SAPGui versus Fiori App

© 2014 NL for Business. All rights reserved. 27


EasyBuild Fit/Gap Phases – Customer Requirements

Translations & Custom Branding


© 2014 NL for Business. All rights reserved. 29
EasyBuild Fit/Gap Phases – Customer Requirements

Extended Application
© 2014 NL for Business. All rights reserved. 30
EasyBuild Fit/Gap Phases– Customer Requirements

Custom Logon Page (with Two Factor Authentication)


© 2014 NL for Business. All rights reserved. 31
EasyBuild Fit/Gap Phases – Customer Requirements

Integration of non-UI5 components


© 2014 NL for Business. All rights reserved. 32
EasyBuild Fit/Gap Phases – Customer Requirements

Internal versus External Facing

© 2014 NL for Business. All rights reserved. 33


EasyBuild Fit/Gap Phases – Customer Requirements

New UIs on existing functionality


Quick wins: Workflow Approvals as Fiori App
© 2014 NL for Business. All rights reserved. 34
EasyBuild Fit/Gap Phases – Customer Requirements

Uniform Data Access


Embedded Gateway

Front-end server
7.40+

ABAP Backend is ok, but ABAP Backend


Non SAP Backend
Customizing doesn’t fit Release to low

Fiori App doesn’t fit backend customizing or release


© 2014 NL for Business. All rights reserved. 35
EasyBuild Design Phases – Extended versus New

Standard
available

Fit
requirements

Fit
requirements
with
extensions

Standard Extended New


App App App

© 2014 NL for Business. All rights reserved. 39


EasyBuild Design Phases – First Mock Up your UI

UI prototype with SAP Fiori Axure stencils or SAP Build


http://www.axure.com/
© 2014 NL for Business. All rights reserved. 40
EasyBuild Build Phases – SAP Web IDE App Development Tool
Menu bar User name
Toolbar Search
 Save  Find in files
 Create file (file name or content)
 Create folder
Git
 Delete
 Manage your
 Undo
development objects in
 Redo your Git repository
 Run
History
Development view  Tag, cherry-pick, revert

Collaboration
User preferences  Integration with SAP Jam
 Collaborate with project
members

Editor API reference


 SAPUI5 code editor  Context-sensitive
 Code completion  Dynamic support
© 2014 NL for Business. All rights reserved. 41
EasyBuild Design Phases - What are Fiori Apps?

© 2014 NL for Business. All rights reserved. 43


EasyBuild Design Phases – Type of Applications

Pixel Perfect External Facing


UI5 Fiori like Internal Facing
Non-Fiori
Web Application Web Web Standalone Web Application
Apps
App App

Fiori Fiori
SAP Specific Fiori Launchpad
Web Application
Web Mobile Device specific
Mobile Application
App App Fiori Apps

© 2014 NL for Business. All rights reserved. 44


EasyBuild Build Phases – Type of Applications I

Applications build with


UI5 SDK
Runs standalone in
browser

UI5
Applications
UI5 Application (embedded in CMS)
© 2014 NL for Business. All rights reserved. 46
EasyBuild Build Phases – Type of Applications II

Applications build with


UI5 SDK
Used Explored controls
Runs standalone in
browser

Fiori-like
Fiori-like Application Application
© 2014 NL for Business. All rights reserved. 48
EasyBuild Build phases - Fiori Control Library

SAPUI Explored Section

https://sapui5.hana.ondemand.com/sdk/explored.html
© 2014 NL for Business. All rights reserved. 50
EasyBuild Build Phases – Type of Applications III

Applications build with


UI5 SDK
Used Explored controls
Follows the Fiori
Design Guidelines
Build as a Component
Runs in FLP in browser
and Fiori Client

Fiori Web
Applications
New or Extended Fiori Application
© 2014 NL for Business. All rights reserved. 51
My 10 Golden Rules for Fiori Development
Session Wednesday 14.00 – Best Practise for Building Your Own Fiori Apps for FLP

 SAP Fiori apps follow the SAP Design Guidelines (GR-01)


 SAP Fiori Apps always exists of a UI part and OData part which must be defined in different software
components (GR-02)
 SAP Fiori UIs are built on top of SAPUI5 framework with a restricted set of the UI5 Controls (GR-03)
 SAP Fiori UI Views are always build as XML views and Extension points need to be implemented (GR-04)
 SAP Fiori UIs always uses intent-based navigation to navigate within and between apps (GR-05)
 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 native mobile App (GR-06)
 Every SAP Fiori app UI control binding must be typed (GR-07)
 Every SAP Fiori app use only one OData service to exchange data with the backend. The UI will only use
OData Model version 2 to access these OData Service capabilities(GR-08)
 Colors, padding & margins must be implemented by SAP predefined style elements and changing of the
look & feel must be available through the Theme Designer (GR-09)
 It is recommended to built SAP Fiori app with SAP Web IDE, based on the new Fiori templates (GR-10)
© 2014 NL for Business. All rights reserved. 52
EasyBuild Build Phases – Extend Fiori Apps

The wizards for adding extensions guide the user


through a step-by-step process
All extension options of the SAPUI5 extensibility
concept are provided in the wizards:
 Create extension project
 Hide a control
 Extend a view
 Replace a view
 Extend a controller
 Replace a service
 i18n resource text customization
 Add new views to existing project

© 2014 NL for Business. All rights reserved. 53


EasyBuild Build Phases

SAP Fiori Design Guidelines


http://experience.sap.com/fiori-guidelines/
© 2014 NL for Business. All rights reserved. 54
EasyBuild Build Phases – New Fiori Apps

Fiori Templates in SAP Web IDE Controls Controls Fragments


Worklist Master-Detail

View View View

View
View
Controllers
Controllers

app descriptor
Component Fiori App
Controller
Component
Fiori Apps as Container

UI5 Component Models Models Models


Fiori Launch Pad

© 2014 NL for Business. All rights reserved. 55


EasyBuild Build Phases – Type of Applications IV

Applications build with


UI5 SDK
Used Explored controls
Follows the Fiori
Design Guidelines
Build as a Component
Supports native device
capabilities
Runs as App on a mobile
device

Fiori Mobile
Fiori Mobile Apps Applications

© 2014 NL for Business. All rights reserved. 57


Result of EasyBuild Build Phase – Live with Own Fiori App

Fiori Development New Fiori Application Custom Branded Apps


Environment Setup
Lessons learned:
• Design phase and agile build process is crucial for success of app
• ABAP developers aren’t UI5 and OData developers
• Almost all customers needs extensions and additional apps
© 2014 NL for Business. All rights reserved. 59
EasyUse for SAP Fiori

EasyRun

EasyBuild

EasySetup

© 2014 NL for Business. All rights reserved. 60


EasySetup

Our Fiori Customers requested for additional functionality


 Easy setup for support by email
 Easy setup for Dynamic Tile Content
 Easy setup of User/Role specific Fiori Launchpad Configuration
 Easy setup of restricted Tiles by Network and Timeslot
 Easy setup for Custom Fiori Logon Page
 Easy replacement of Logo without Theme Designer
 Own SICF Logoff alias node in stead of fixed default

EasyRun Fiori Launchpad by NL for Business


© 2014 NL for Business. All rights reserved. 62
EasySetup
EasyRun Fiori Launchpad by NL for Business

Our Fiori Customers requested for additional functionality


 Easy setup for support by email
 Out-of-the-box solution
 Easy setup for Dynamic Tile Content
 Direct implementation using BAdI implementations

© 2014 NL for Business. All rights reserved. 63


EasySetup
EasyRun Fiori Launchpad by NL for Business

Our Fiori Customers requested for additional functionality


 Easy setup of User/Role specific Fiori Launchpad Configuration
 Multi Fiori Launchpad Configurations possible based on company, role or user
 Easy setup using Fiori App for customizing
 More secure and lower cost for support

© 2014 NL for Business. All rights reserved. 64


EasySetup
EasyRun Fiori Launchpad by NL for Business

Our Fiori Customers requested for additional functionality


 Easy setup of restricted Tiles by Network and Timeslot
 Restrict tiles based on ip-address or host names
 Restrict tiles based on start and end date
 Easy setup and secure of internal and external facing Fiori Launchpad
 Fiori App for Customizing Tiles (available end November 2015)

© 2014 NL for Business. All rights reserved. 65


EasySetup
EasyRun Fiori Launchpad by NL for Business

Our Fiori Customers requested for additional functionality


 Easy setup for Custom Fiori Logon Page
 Easy replacement of Logo without Theme Designer
 Own SICF Logoff alias node in stead of fixed default

 Easy setup by configuration


 Lower cost and improves security
 Fiori App for Customizing Tiles
(available end November 2015)

© 2014 NL for Business. All rights reserved. 66


Thanks for your attention

© 2014 NL for Business. All rights reserved. 67


EasySetup
EasyRun Fiori Launchpad by NL for Business

EasyRun Fiori Launchpad by NL for Business


Now available for Fiori Launchpad on Business Suite
 Easy and personalized setup of the Fiori Launchpad by configuration app
 Adds additional functionality like Personalize Setup and Network and Timeslot restrictions
 Improves security
 Implemented in frontend server
 No need of a query string parameters for configurations
 Lower maintenance cost
 Easy configuration by configuration apps
 No modification and no copy of the original code needed

Contact info@nl4b.com for additional info, online demo and prices


© 2014 NL for Business. All rights reserved. 68

You might also like