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.