6 weeks, 3 apps and a sprinkle of SAPUI5 and Fiori customisation thrown into the mix. Challenge accepted!

17 February 2014

Lindsay (Stanger) Kelly

Lindsay (Stanger) Kelly

Enterprise Mobility Consultant

Armed with new technology and a wealth of existing mobile knowledge and experience, we confidently got underway with one of the first ever Fiori implementations and customisations at a global insurance client.

We were delivering a solution which would fundamentally improve the usability of a crucial system through the use of SAPUI5 and the standard Fiori apps. And we only have 6 weeks to do it!

As well as helping the client significantly improve its business processes and efficiencies, this was a great opportunity to delve deeper into code behind two of the SAP standard Fiori apps, which we would go on to customise, and also to build a standard app using SAPUI5 and setting up a custom Gateway service.

Having recently purchased and migrated its core services across to SAP ERP, the client wanted to improve the usability of the user interface by introducing a mobile responsive, web-based equivalent, which could be used for easier evaluation of Purchase Order, Invoice and Travel Expense approval requests. Their existing User Interface (UI) was, as many of you will know from experience with SAP approvals, a little tricky to get to grips with, due in part to the wealth of information being displayed. Getting used to these screens, and identifying the important, relevant information was simply taking too long. Enter Bluefin!

Before the project began we were challenged on the ability to meet the timelines whilst simultaneously delivering a high quality product, but we were confident this wouldn’t be a problem.  After a 2 week discovery phase we had fleshed out the requirements, and were ready to begin the race.

The discovery phase

During the discovery phase Brenton O’Callagahan and I spoke to a number of key stakeholders to find out how they were using the current system and what their pain points were. 
From watching the users interact with SAP, and getting them to talk through what they were doing, we identified the following:

  • Users often didn’t know where to look to find the information they needed, and spent too long searching for it
  • Once they actually located the information they needed  to make key decisions in one document, they then had to perform a series of navigations in order to find it again in another.

To resolve these issues the new UI would need to

  • Display the information in an easy to read format, making it easier to  identify the different segments of information
  • Allow users to see all the information, with minimal navigation

We advised the client that the best way to proceed with creating more user friendly approval screens (given the time-frame) was to, where available, implement and enhance SAP Fiori applications. Whilst these were  available for PO and Travel Expense approvals, the Invoice approvals app was still a work in progress, and not available as part of the existing suite. That wasn’t going to stop us, so we built one from scratch using the design of the Fiori apps, and the SAPUI5 toolkit. I built a quick Proof of Concept during the discovery phase to test the feasibility of building what we were proposing. Once this was confirmed, we were ready to go!

6 week build: Customising SAP Fiori

Whilst I don’t want this blog post to become too technical (I’m saving that for another time!)  I do want to share our experiences of customising the two standard apps: PO approvals and Expense approvals.

As part of this project we were attempting to extend the apps in their infancy and, as a result, customising them was a bit trickier than it might be in the future. SAP released the first wave of apps before they had completely finished work on them. Since completion of the three app challenge, SAP has released updates, so we know they are much more advanced already, but when we were doing this project, we had only the first release apps, which definitely had its challenges.

We assume that the two apps had been built by different teams at SAP, which would explain why they had been constructed quite differently.  It became apparent that the customisation of the two apps was going to be technically quite different, which made it slightly more challenging – but all the more interesting!

It’s easy to think about customising the apps just from a UI perspective, but a lot of backend Gateway customisation was also required - SAP NetWeaver Gateway being part of my remit!  Again the difference between the two apps was quite extreme, not least because neither app had been built with the Gateway service builder, and as such neither follows standard conventions – each seemed to have its own rules, and each had to be customised differently. For PO approvals there were BAdIs which could be implemented, but for Expense approvals the only way to extend the functionality was to enhance the methods directly. But that’s enough technical talk for this post!

Long story short, and skipping out any more technical jargon, installing and enhancing the two standard apps to meet the clients requirements took about 3 weeks, and creating the new app, along with its new Gateway service, took another 2 – with a week leftover for testing, bug fixing, documentation and final tidy-up.

We did it!

After exactly 6 weeks, we had produced three personalised, customised apps for the client. Having learnt a huge amount about how to extend the UI and Gateway services for the standard Fiori apps, I’m confident we could do it again even quicker next time.

After such a successful initial build, we went on to further extend the apps over an additional month to include a history tab, which allows users to see what they had approved/rejected already, and some client specific theming using the SAP UI Theme Designer, which made the apps and the UI2 launch-page match our clients branding.

With so many exciting new tools and technologies in this space, we can’t wait to get our hands dirty with the next Fiori implementation.

View comments


Blog post currently doesn't have any comments.

About the author

Lindsay (Stanger) Kelly

Enterprise Mobility Consultant

Working with new and emerging technologies in enterprise mobility is where Lindsay’s focus lies. From designing and developing responsive user interfaces with SAPUI5, through to creating the communication layer with SAP Gateway, Lindsay’s client experiences have provided her with the tools to build end-to-end solutions, with user experience as the key driver.  Recently she has been working with others at Bluefin to build a Fiori resourcing app to enable our consultants to plan and manage project resources.

Lindsay’s expertise in implementation and customisation within the Fiori application landscape was greatly valued whilst working as Gateway Development Lead on one of the UK’s first SAP Fiori implementations.  

Progressing from Fiori to UI development, using the SAPUI5 libraries, Lindsay has found a natural joy and passion: building device responsive user interfaces to meet users’ requirements and provide a quality user experience by following the Fiori design principles.
When planning out new mobile roadmaps, Lindsay uses her technical expertise, in combination with her desire to dig deep into clients’ systems and processes. This ensures the best strategic choices are made, whilst keeping in view the importance of user-centric design.

Lindsay’s passionate about guaranteeing clients’ self-sufficiency and delivers the SAP Gateway part of a three day Fiori training course. This leaves attendees with a greater understanding of, and better ability to support, maintain, and build from scratch their own OData service.

Organisation is Lindsay’s middle name (actually it’s Florence, but who’s checking!). As a fierce note-taker and documentation-writer nothing is left to chance. 

Outside of work you'll find Lindsay sneaking off on Snowboarding adventures, singing with Rock Choir and volunteering with the Newman Holiday Trust.

Bluefin and SAP S/4HANA - welcome to the one horse race

We use cookies to provide you with the best browsing experience. By continuing to use this site you agree to our use of cookies.