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
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
What is Fiori? Christer
Design Principles ArchitectureNew UX
2015-11-17 SAPSA Impuls 5
http://www.sapfioritrial.com
What is Fiori? Christer
Design Principles ArchitectureNew UX
2015-11-17 SAPSA Impuls 6
What is Fiori? Christer
Design Principles ArchitectureNew UX
2015-11-17 SAP Impuls 7
What is Fiori? Christer
Design Principles ArchitectureNew UX
2015-11-17 SAPSA Impuls 8
Responsive Simple Coherent DelightfulRole-based
What is Fiori? Christer
Design Principles ArchitectureNew UX
2015-11-17 SAPSA Impuls 9
Transactional Apps
What is Fiori? Christer
Design Principles ArchitectureNew UX
2015-11-17 SAPSA Impuls 10
Fact Sheets Analytical Apps
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
Why Fiori? Christer
Design Thinking Business ValueIdentify Need
2015-11-17 SAPSA Impuls 12
• 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
Why Fiori? Christer
Design Thinking Business ValueIdentify Need
2015-11-17 SAPSA Impuls 13
Why Fiori? Christer
Design Thinking Business ValueIdentify Need
2015-11-17 SAP Impuls 14
http://experience.sap.com/designservices/
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 Options
Implement. steps
How do you Implement Fiori? Christer
Fiori RDS Implementation Steps Mobilizing FioriPrerequisites
2015-11-17 SAPSA Impuls 16
• 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!
How do you Implement Fiori? Christer
Fiori RDS Implementation Steps Mobilizing FioriPrerequisites
2015-11-17 SAPSA Impuls 17
• SAP Fiori RDS: http://service.sap.com/rds-fiori-apps
How do you Implement Fiori? Christer
Fiori RDS Implementation Steps Mobilizing FioriPrerequisites
2015-11-17 SAPSA Impuls 18
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
How do you Implement Fiori? Christer
Fiori RDS Implementation Steps Mobilizing FioriPrerequisites
2015-11-17 SAPSA Impuls 19
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
How do you Implement Fiori? Christer
Fiori RDS Implementation Steps Mobilizing FioriPrerequisites
2015-11-17 SAPSA Impuls 20
• 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
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? Christer
Extension
PointsWeb IDE
Data
Extensibility
Extensibility
Concept
2015-11-17 SAPSA Impuls 22
• 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
2015-11-17 SAPSA Impuls 23
Extension
Wizards
How do you Extend Fiori apps Christer
2015-11-17 SAPSA Impuls 24
• 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
How do you Extend Fiori apps Christer
2015-11-17 SAPSA Impuls 25
• 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
How do you Extend Fiori apps Christer
2015-11-17 SAPSA Impuls 26
• 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
How do you Extend Fiori apps Christer
2015-11-17 SAPSA Impuls 27
• 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
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 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
How do you Build Fiori apps Christer
2015-11-17 SAPSA Impuls 30
• 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
Prototyping TemplatesSAPUI5
ExploredDesign
GuidelinesDeployment
How do you Build Fiori apps Christer
2015-11-17 SAPSA Impuls 31
• 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
Prototyping TemplatesSAPUI5
ExploredDesign
GuidelinesDeployment
How do you Build Fiori apps Christer
2015-11-17 SAPSA Impuls 32
• Contains Documentation for all available SAPUI5 controls
• Description
• Samples with source code
• Properties
• Associations
• Events
• https://sapui5.hana.ondemand.com/sdk/explored.html#
Prototyping TemplatesSAPUI5
ExploredDesign
GuidelinesDeployment
How do you Build Fiori apps Christer
2015-11-17 SAPSA Impuls 33
• 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
Prototyping TemplatesSAPUI5
ExploredDesign
GuidelinesDeployment
SAPSA Impuls Christer
SAPSA Impuls Christer
Christer Ingemarsson
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