After various projects in different size and complexity we want to present and discuss our challenges we had while designing and developing with UI5

1. © cbs Corporate Business Solutions
Lessons Learned from
SAP UI5 Implementations
Denny Schreber Katrin Grohme

2. © cbs Corporate Business Solutions March 15, 2016
Agenda
• Introduction
• Starting the UI5 project
• Pitfalls during UI5 development
• UI5 Framework extensions
• Outlook & Wrap-up

3. © cbs Corporate Business Solutions 3March 15, 2016
Overview
Introduction
• After various projects in different size and complexity we want to
present and discuss our challenges we had while designing and
developing with UI5
› Approach how we tackle projects
› Designing your screens with standard controls vs. custom controls
› Facing integration challenges with different backend systems
› Difficulties in the development phase
• Give an outlook into areas where we hope that UI5 advances in
upcoming releases

4. © cbs Corporate Business Solutions 4March 15, 2016
UI5 projects
Introduction
• Worked with UI5 as UI technology since 2013
› First UI5-based app went live with v1.12
› Lots of improvements since then
• Projects based on SAPUI5 libraries
› One openUI5 project because of licensing
• We try to be full stack developer instead of distinguishing between
Frontend / Backend Developer
• From either ABAP or Java-based software development background
Source: SAP

5. © cbs Corporate Business Solutions March 15, 2016
Agenda
• Introduction
• Starting the UI5 project
• Pitfalls during UI5 development
• UI5 Framework extensions
• Outlook & Wrap-up

6. © cbs Corporate Business Solutions 6March 15, 2016
Achieve a Great UX leveraging UI5
Starting the UI5 project
• Users describe great apps as:
› Simple, easy to use, consistent, supportive, …
• Various approaches exist
› SAP gives lots of advice how to achieve a great user experience
› Fiori Design Principles: Available under http://experience.sap.com/fiori-design/
• Early user involvement is key
› Try to gain early feedback from key user and – if possible – larger user groups
• Designer needs to be aligned
with developers
Source: SAP

7. © cbs Corporate Business Solutions 7March 15, 2016
UI First Approach
Starting the UI5 project
• Start building UI prototypes prior to API or back-end logic
• Target user groups get identified early in the project
• Results of UI prototyping can be the basis for the Fiori app
• Detailed functional specification and first technical specification are
results of this phase
• Why UI First in SAP landscapes?
› Projects require fit-to-purpose solutions
as opposed to, e.g., standard software
› Functionality already exists (at least partially)
in SAP systems
› The end user is what matters most in
Fiori projects
Source: SAP
UI First

8. © cbs Corporate Business Solutions 8March 15, 2016
Starting Point: Mobile Approvals
Starting the UI5 project
• UI5 offers the possibility to be used on
mobile devices
› responsive design
› Optimized for touch-based input devices
• Approvals are often seen as a
necessary pain by approvers
• Mobile access adds possibility to do
approvals while on the move
• Limit the number of required steps to
achieve approval
Source: SAP

9. © cbs Corporate Business Solutions March 15, 2016
Agenda
• Introduction
• Starting the UI5 project
• Pitfalls during UI5 development
• UI5 Framework extensions
• Outlook & Wrap-up

10. © cbs Corporate Business Solutions 10March 15, 2016
Project Reality
Pitfalls during UI5 development
• Decision for enhancement model not always straightforward
› Extending Fiori app with new project that replaces parts of the original app
• Upgrades do not always work seamlessly
› Copy original project as basis for new development
• Increased effort when upgrading standard apps
• Decision for control library
› Mobile controls – GoTo library
› Desktop controls – provide good alternatives for complex data entry
handling

11. © cbs Corporate Business Solutions 11March 15, 2016
Connecting the backend
Pitfalls during UI5 development
• In UI5 development lots of time is spent formulating OData expressions
• SAP Gateway for ABAP-based systems
› Stable in most of the cases and easy-to-develop
› When you’re stuck: Don’t look into the OData specifications but SAP Note 1574568
• SAPUI5 screens on BPM using the screen generator functionality (Java)
› Odata services are generated
› Generated screens still require effort to pimp them up
• HANA XS Engine
• Development only in Eclipse (Luna), WebIDE not possible
• Synchronization errors from within Eclipse and HANA XS engine
• OData Provisioning Channel on HCI
› Not released yet

12. © cbs Corporate Business Solutions 12March 15, 2016
HANA XS Engine
Pitfalls during UI5 development

13. © cbs Corporate Business Solutions 13March 15, 2016
JavaScript peculiarities
Pitfalls during UI5 development
• Functional programming in dynamically typed JavaScript
› Playing around with a pure functional programming language helps
• Handling callback hell
› Makes debugging hard, be careful to organize your code
› jQuery proxy function  Learned at UI5con that promises are better!
• Transferring state
• Better readability of source code
› Aligning results of several AJAX calls vs. $Batch
• Recursions with time-based exit criteria
• Handling of large code sections
› JavaScript makes finding errors hard
› jQuery module declarations to separate code blocks

14. © cbs Corporate Business Solutions 14March 15, 2016
Further Pitfalls
Pitfalls during UI5 development
• Firefox with Developer Tools and VIZ chart library are no friends -> use Chrome
• To make the look’n’feel consistent browser version still play a role and might add effort
• Mouse-Over Pop-ups are not working on mobile devices
› Spent lots of effort to extend the standard controls with touch events
• Not double-checked in latest versions

15. © cbs Corporate Business Solutions March 15, 2016
Agenda
• Introduction
• Starting the UI5 project
• Pitfalls during UI5 development
• UI5 Framework extensions
• Outlook & Wrap-up

16. © cbs Corporate Business Solutions 16March 15, 2016
Custom Controls & Third Party libraries
UI5 Framework extensions
• Requirements might exceed framework capabilities
› More than hiding and adding fields
› Custom controls sometimes required
• Extending existing controls
• Create Custom Controls
• Integration of 3rd Party libraries
› Not always consistent with SAPUI5 look’n’feel
› Sometimes lots of work to get this working

17. © cbs Corporate Business Solutions 17March 15, 2016
Examples
UI5 Framework extensions
Internet
Explorer
Firefox
Chrome

18. © cbs Corporate Business Solutions 18March 15, 2016
Examples (cont.)
UI5 Framework extensions
• Custom Controls “in the wild”
• GitHub
› https://gist.github.com/dennisseah
• openUI5?
Signature Pad Control
(https://gist.github.com/dennisseah/c4d0ee8100d07ecd8015)

19. © cbs Corporate Business Solutions March 15, 2016
Agenda
• Introduction
• Starting the UI5 project
• Pitfalls during UI5 development
• UI5 Framework extensions
• Outlook & Wrap-up

20. © cbs Corporate Business Solutions 20March 15, 2016
Outlook
Outlook & Wrap-up
• Developing with UI5 is fun
• Lots of improvements already delivered with the latest versions
But some areas still can be improved / simplified (our wish list):
• Reduce Complexity (Routing, Apps patterns, development time)
• Improvements in the area of handling state in the apps
• Offline capabilities of Web Apps
• More controls… pushing the web browser to its limits

21. © cbs Corporate Business Solutions 21March 15, 2016
Wrap-up
Outlook & Wrap-up
• From our project experience end user really like what they get with UI5-based apps
• SAPUI5 is not the new “silver-bullet” of UI technologies
• SAPUI5 requires different approaches compared to server-based UI technologies
• Projects are about business problems getting solved, but don’t forget the people that
should be able to solve the problem effectively
• Web best practices from web companies such as Google should be applied in your
projects

22. © cbs Corporate Business Solutions
cbs Corporate Business Solutions
Unternehmensberatung GmbH
The Materna Group Management Consultancy
Headquarters Heidelberg
Im Breitspiel 19 · 69126 Heidelberg · Germany
P +49 6221 3304 0 · F +49 6221 3304 200
contact@cbs-consulting.de
www.cbs-consulting.com
Contact
March 15, 2016
Denny Schreber
Senior Solution Architect
denny.schreber@cbs-consulting.de
Katrin Grohme
Senior Solution Developer
katrin.grohme@cbs-consulting.de