presentation held @ IT Conference on SAP Technologies, 2014 video recording: https://www.youtube.com/watch?v=0iJyzu1BDuk

1. Enabling Enterprise mobility with UI5 and SAP Fiori

2. • Enterprise User Experience today and tommorrow
 Status Quo
 Trends & Initiatives
 Technical Implications
• SAP Solutions for the User Experience problem
 UI5 & SAP Fiori
 Netweaver Gateway
 Showcase & some takeaways from our experience
Agenda

3. Enterprise User Experience today and tommorrow

4.  Why has enteprise software to be so unintuitive?
 Why should it be necessary to „learn“ to use it?
 Why spend so much time training end-users? And
why tell end users they are wrong when something
isn‘t working as expected?
Enterprise User Experience
• Consumer-grade User Experience • Enterprise User Experience
 Simple
 Intuitive/Easy to use
 Aesthetic

5. • A designer: „ If you use these types of softwares [enterprise] all day, why are
they so ugly?“
• People respond to aesthetically pleasing products:
 Productivity increases
 …
 …

6. How to improve user experience?

7. • Enterprise:
 Consumerization
 Gamification
 Mobility
New trends indicating adoption of these initiatives
Google Trends: „Gamification“
Forrester Survey: 80% of interviewed
enterprises plan to introduce some kind of tablet
BYOD program in the next 2 years.
Expected gains in:
• Employee productivity
• Remote information access ( = Mobility)
• Enable use of personal devices for work
http://www.trendmicro.com/cloud-content/us/pdfs/business/white-papers/wp_forrester_measure-value-of-consumerization.pdf

8. • „Componentization“ of applications
 Monolithic structures (all-in-one) no longer feasible
• More than ever Integration is the key
 Less about „what features does it offer“, more about „how does it integrate with other
platforms“
Consequences on the technical side

9. • Design Thinking
• Rapid Deployment Solutions
• UI5 & SAP Fiori
• Netweaver Gateway
SAP Solutions for improving the Enterprise User Experience

10. Design Thinking
• Approach to problem solving, that keeps the end-user in the center of the
• Aims to find the balance between:
 What is required ( business requirements)
 What is desired ( needs of the people)
 What is feasible ( technical possibilities)

11. Design Thinking Approach
• Very often design only comes into play at the end of the software development
lifecycle ( „nice wrapper around application“)
• Design thinking keeps the end-user tightly involved in the SW development
process from the beginning
• Design thinking is based on a series of predefined steps to solving any problem
 Understanding the problem
 ….

12. RDS

13. SAP UI5
• JavaScript library for developing consumer-grade apps based on SAP backends
• Built on top of JQuery
• Leverages open standards: HTML5, CSS
• Enables connectivity to SAP backends, exposed through Odata services
SAP Technologies

14. SAP Fiori
• Wave 1 & 2: set of standard UI5 apps for the most common use cases
• Guidelines & best-practices for consistent design accross apps and across
devices
 Role-based
 Responsive
 Simple
 Coherent
 Delightful
experience.sap.com/fiori-guidelines
Fiori Launchpad
• Designed to be the central point of entry to the SAP Business Suite
• Role-based access to UI5 Apps and others applications

15. The Fiori experience
Fiori is:
• Role based
• Responsive
• Coherent
• Simple
• Delightful

16. Fiori App Types

17. • Integration Middleware that acts as mediator between SAP backend and various
types of clients
• Harmonized data transfer based on OData („SQL for the Web“) protocol
• Support for multiple types of SAP Backends (RFC, DDIC, BAPIs)
Netweaver Gateway

18. The Showcase

19. • Line of Business: Industrial Insurance
• A typical insurance lifecycle (Inventory Value Insurance) :
 Inspection of to-be-insured object
 Offer issuing
 Offer acceptance & issuing of the insurance policy
 Verifying account balance and payment of premiums
 Periodic reporting of inventory value
Use Case
Entire lifecycle supported by the SAP for
Insurance Suite
Although each individual use case is
quite straight-forward, complex GUIs of
the standard Insurance Suite can
degrade the User Experience
SAP for Insurance Suite
Collections/
Disbursements
Business
Partner
Claims
…
In-Force Business
Management
(FS-PM ISL)
Object
Management

20. The Demo Case Landscape
Fiori Launchpad
UI5 Apps
Insurer (Underwriter)
Policy Holder
• The SAP Fiori Launchpad as central point of entry for access to
the core functionality of the SAP for Insurance Suite
• Role-based access to multiple light-weight functionalities in the form
of individual SAP UI5 Apps
SAP for Insurance Suite
Collections/
Disbursements
Business
Partner
Claims
…
In-Force Business
Management
(FS-PM ISL)
Object
Management

21. Use Cases
Insurer (Underwriter)
On-site inspection of factory
that is to be insured
Policy Holder
Quotation / Offering
Policy Issue
Account Balance /
Payment of premiums
Value Reporting

22. Use Cases
Insurer (Underwriter)
On-site inspection of factory
that is to be insured

23. Key takeaways from our experience
Keep it simple
• Fiori Apps are meant for the simpler, streamlined use cases, that make up 80%
of the average workload of an employee
• Do not try to cover the entire 100% !
Use the predefined app templates
• Don‘t reinvent the wheel
• Templates are well suited for most types of use cases
• Acts as development accelerators

24. Use Cases
Insurer (Underwriter)
On-site inspection of factory
that is to be insured
Quotation / Offering
Policy Issue

25. Use Cases
Insurer (Underwriter)
On-site inspection of factory
that is to be insured
Quotation / Offering
Policy Issue
Policy Holder
Account Balance /
Payment of premiums

26. • The UI5 development process
• Software Logistics/Collaborative development
• Build Consistency/MockServer

27. Use Cases
Insurer (Underwriter)
On-site inspection of factory
that is to be insured
Quotation / Offering
Policy Issue
Policy Holder
Account Balance /
Payment of premiums
Value Reporting

28. Application responsiveness
• When building UI5 apps, application responsiveness is key
Be sure to use asynchronous backend calls to avoid „freezing“
applications
When possible, pre-load data in the background transparently to
the user
Only refresh the affected screen segments,
and be sure to use „Loader“ UI components
to signal the load operation to the user

29. Performance considerations
Listing a table of items
http://<odata_service>/items/$count
http://<odata_service>/items
Netweaver Gateway Business Suite
GET_ALL_ITEMS
GET_ALL_ITEMS
Netweaver Gateway does not offer any Caching functionality
• It is strictly an integration middleware

30. Performance considerations
Listing a table of items
http://<odata_service>/items/$top=10
http://<odata_service>/items/$skip=10&$top=10
Netweaver Gateway Business Suite
GET_ALL_ITEMS
GET_ALL_ITEMS
GET_ALL_ITEMS
Paging and Filtering should be performed in the backend
services, to avoid unnecessary computation overhead and
diminish network traffic
http://<odata_service>/items/?$filter=Amount > 0
Many legacy services however do not offer such functionality

31. Some possible solutions to consider…

32. Performance considerations
Listing a table of items
http://<odata_service>/items/$count
http://<odata_service>/items
Netweaver Gateway Business Suite
GET_ALL_ITEMS
GET_ALL_ITEMS
Custom Implementation of a local Caching layer within NW Gateway
local Cache
http://<odata_service>/items?$top=10 GET_ALL_ITEMS
Higher implementation complexity:
- Avoid working with outdated data
- Keep cache sync‘ed when performing a write-access

33. Performance considerations
Listing a table of items
http://<odata_service>/items/$count
http://<odata_service>/items
Netweaver Gateway &
Business Suite
GET_ALL_ITEMS
Embedded deployment of Netweaver Gateway to eliminate latency
caused by network communication
http://<odata_service>/items?$top=10
This however is not always possible/advisable!

34. Final remark..
• Keep in mind that all these are new solutions (Gateway, UI5, SAP Fiori)
• Updates are being released with a high frequency
 New features
 Bugfixes
 Changes

35. Thank you for your attention.