Presentation in SIT CPH 2019.5.4 May the 4th be with you!

1. Planning your Fiori Elements
Project
by Steve Guo in SIT CPH 04.05.2019

2. Introduction of Steve Guo
Name: Steve Guo / GUO ZHIJIA / 郭之嘉
Live Billund, Denmark since Dec,2018 and came from Beijing, China
Work at as Solution Architect
Experience: 13 years enterprise IT, 5 years as SAP Full-stack developer
from design to delivery, 3 years as professional trainer and architect
• SCN:@steveguo1984
• Email:steve.guo@outlook.com
• Twitter:@steveguo1984
• LinkedIn:https://www.linkedin.com/in/guo-steve-15b8bab6/

3. Contents
• What is SAP Fiori Elements
• Why using Fiori Elements
• What prevent using Fiori Elements
• Key factors for success of using Fiori Elements in large scale
• Transparency
• Challenges and constrains
• Dual model UX
• Solid skill
• When do you get most benefits from Fiori Elements?

4. What is Fiori Elements
• Fiori Elements is a metadata driven development technology for
Enterprise to build mobile first applications rapidly for commonly daily
task
• It is available in late 2016 and now we can say it is mature
• Fiori Elements is highly used in S/4 HANA. 485 of 1290 apps in S/4
HANA 1809 are developed using Fiori Elements
485
514
291
Apps by technology in S/4 HANA 1809
Fiori Elememts Free Style SAPUI5 Other
The data came from analysis from data in SAP Fiori Apps Library
Also consider:
1.SAP standard app generally more complex than custom development apps
2.SAP started Fiori Elements in 2016 while there is already several hundreds
of free style apps

5. Architecture of Fiori Elements
Customer
SAP
Design Time Runtime
Smart Template
Customization
Extension
Annotation
Adaption Fiori Elements
App

6. Fiori Elements – Architecture Detail
• Smart Template
• Several non-modifiable
template provide by SAP for
common patterns for
enterprise application
• Customization
• Customize basic settings in a
configuration file, such as the
url of backend api
• Extension
• Hybrid custom code with
standard code in certain area.
Such as custom column in
table, custom action button in
toolbar
 Annotation
 Supplementary information for data.
Tell the template how to consume data.
Like which fields should add to the
table, where the value help of the field
comes from?
 Adaption
 Change display and field arrangement
at runtime. It can performed by
developer or even key user. Like hide
fields, change sequence, change label,
change properties of UI control

7. Scenarios Supported by Fiori Elements
List Report + Object Page
ALV Like reporting with a detail page
Table in detail page for navigating to next level
CRUD function is enabled if it is supported by the backend
Extendable content area, filter bar, and custom actions
Fully responsible

8. Scenarios Supported by Fiori Elements
Analysis List Page
Display chart and table together
For analysis based on a detail level data set
Optional to navigate to Object Page

9. Scenarios Supported by Fiori Elements
Object Page
Fully responsible dashboard arranged by as set cards with different types
Flexibility of define custom navigation to detail page and custom card type
Global filter can used to filter data for all cards

10. Why using Fiori Elements?
• Faster Deliver Business Value – days to weeks
• Lower Development Cost – reduced team size
• Unified User Experience
• Higher Quality and Flexibility – pre defined integration test, highly
customizable and adaptable.
• Free update from templates

11. What prevent using Fiori Elements?
• “Our system is not up to date”
• “I am afraid that user have requirements that Fiori Elements can’t do
in the future, even it looks good now”
• “The template looks not like result of user research”
• “Many developers can do simple developer, but expert is rare”
• “I don’t want to be locked by this technology”

12. Key factors for success of using Fiori Elements
in large scale
• Transparency
• Challenges and constrains
• Dual model UX
• Solid skill

13. Transparency
• Highly trust and transparency should been set up among Vender,
Customer and End User about
• What is is
• How it works
• How much effort can be saved using Fiori Elements
• The possibility of future constrains

14. Challenges and constrains
• System requirements
• Front End ( For front-end part, you always have a workaround )
• Start from ABAP 7.50 as Smart Template (SAPUI5 1.38, 2015)
• In ABAP 7.51 get mature and change name to Fiori Elements (SAPUI5 1.44, 2016)
• In ABAP 7.52 Fiori Elements (SAPUI5 1.52, 2017) – my suggested lowest version
• In ABAP 7.53 Fiori Elements (SAPUI5 1.60, 2018) – my suggested version
• Also support in SAP Cloud Portal
• Not support OPEN UI5
• Work arounds:
• Link to new SAPUI5 library in old SAP version

15. Challenges and constrains
• System requirements
• Back End ( For back end part, some constrains existed )
• Basic reporting function generally works on any SAP system that have SAP Gateway, you
can write annotation in 3 ways
• Any version: Local Annotation in SAPUI5 app
• Annotation Model using SEGW: Any abap system have SEGW
• SADL( Annotation from CDS ) : ABAP system >= 7.50
• `CRUD Function is only support by ABAP >= 7.51
• In ABAP 7.51, Constrains due to lack of draft support [ Those also apply to current ABAP
Cloud]
• No durable lock
• For multi level object, you need to save before add or delete subitem
• For non-hana based system, use of analytical list page and over view page is not
recommend
• Work around for backend
• Implementation odata service manually and make it it functional like the auto generated
service

16. Challenges and constrains
• Transaction – CURD
• Can’t change the position and look and feel for basic
create/delete/edit/save/cancel button
• Only display original value in edit mode
• Solution: custom smart control/ read only text field in the form / wait
for new feature in near future
• Limited control type and only simple layout supported
• Solution: Override facets in the screen by extension
• Multiple value input
• Solution: Save it as comma separated list and manually process the
transformation with multi input control

17. Challenges and constrains
• Analysis
• No pivot table support
• Support of charts are quite basic
• No relation between charts in one view
• Limited data source type compare to analytic products
• Don’t support planning scenarios
• Solution:
• Only stick on operational analytical scenarios
• Use in connection with Analytic Solution, such as BO, Analytic Cloud
and Smart Business

18. Dual Model UX for Custom Development
• Innovation
• Design thinking and design
lead development from
scratch
• Advanced scenarios that
need cutting edge, unique
user experience
• Normally it is supported by
large amount of basic apps.
 Foundation
 Custom business process match
standardized interactive pattern
 Let user understand the template
before user research
 Gap analysis instead of design the
whole prototype
 Core Concept
 Any custom development is the combination of building foundation as well as innovation apps
 20% of screens are supported by 80% basic screens for making a system mature
 Most innovation of Enterprise IT will finally lead user to a basic screen
 We should accelerate the speed of building foundation and put more effort on innovation

19. Build solid skill for Fiori Elements
• SAPUI5
• MVC, DataBinding, ODataModel, Extension
• Learn OData Annotation in Control Level
• SmartField, SmartForm,SmartTable,SmartFilterBar,SmartChar
• Understanding OData V4 Annotation
• Translate between OData V4 Annotation and CDS Annotation
• Fiori Elements specific document
• SAPUI5 SDK
• ABAP Programming for Fiori / ABAP RAP

20. When do you get most benefits from Fiori
Elements?
• General Consideration for the right time for Fiori Elements
• Use it for apps for internal user
• For users that have chance to use many different function in system ( power user )
• Consideration by Function
• Reporting: Works perfect in almost all reporting case. Flexibility, highly customized
table, variant management and sharing the link are generally liked by end user
• Configuration and Maintenance for administrator / power users. Fiori Elements can
develop those app very fast, the UX is good enough for those users
• Regular transactions (CURD): Implement with high extended Object Page, higher
effort but is still much lower than free-style
• Dashboard and analysis application based on transaction data from a single system

21. Summary
• Fiori Elements have great value for enterprise
• But it is not a core for all case
• Use it hybrid with other approach to get most benefits
• Keep trust and transparent across all roles about the facts
• Prepare knowledge before use it, learn before doing

22. May the force be with you
SCN:@steveguo1984
Email:steve.guo@outlook.com
Twitter:@steveguo1984
LinkedIn:https://www.linkedin.com/in/guo-steve-15b8bab6/