UI5con Lessons Learned from SAP UI5 Implementations

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

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

© 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

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

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

UI First Approach
• 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

Starting Point: Mobile Approvals
• 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

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

Connecting the backend
• 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

HANA XS Engine

JavaScript peculiarities
• 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

Further Pitfalls
• 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

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

Examples
Internet
Explorer
Firefox
Chrome

Examples (cont.)
• Custom Controls “in the wild”
• GitHub
› https://gist.github.com/dennisseah
• openUI5?
Signature Pad Control
(https://gist.github.com/dennisseah/c4d0ee8100d07ecd8015)

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

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

© 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

UI5con Lessons Learned from SAP UI5 Implementations

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Recently uploaded

Recently uploaded (20)

UI5con Lessons Learned from SAP UI5 Implementations