From Excel to Offline-Enabled SAP Fiori Based Mobile App

Hi, I’m August Engkilde, mobility consultant and app designer at 2BM in Denmark. I’m a member of the SAP Fiori Makers’ Community and I’ll present the SAP Fiori based offline application that we have developed for one of our customers in the next SAP Fiori Makers call Thursday September 7th. 2017. In this blog, I`d like to introduce you to our approach designing and developing this application.

Offline Enabled SAP Fiori Applications Mean a Great Deal to the User Experience

The application itself targets service workers of our customer SKOV. They travel regularly to big farms around the world in order to maintain climate alarm systems produced by SKOV.

The user needs include:

• viewing and editing work orders
• material stock
• time registration
• checklists

Before using our custom designed SAP Fiori application, SKOV managed the process on paper and by using Excel, which meant they had many manual and error-prone steps.
We started the first design think workshop for SKOV in fall 2015, and had a second finalizing workshop in December 2015. The scrum-based app development started in February 2016 and the first version of the app was ready in June 2017. During the first design phase, it wasn’t clear whether the app should be able to work offline or not. One thing we learned and what we want to share is that it’s very important that you as a developer make it clear to the user of the app how fatal it can be if you need to use the app and the network is not there. Even with the best wi-fi or mobile data conditions you can run into problems. That can make even the best app useless and a pain and time killer for the end user.

Before the second workshop, Martin Pock, the boss of our mobile department followed a SKOV technician around during his normal work hours. During that day, it became very clear that inside the farms, even though there was a good 4G connection outside, there wasn’t any mobile data connection inside the buildings. They would have had to use a mix of paper and the app, if the app wouldn’t have been available offline.

Luckily, the SAP mobile cloud platform makes it much easier than before to enable SAP Fiori/SAP UI5-based mobile applications to work offline. That made the decision going toward full offline enablement much easier for us and SKOV.

In the pictures from the workshop below, you can see some of the SKOV’s own employees taking the lead at the board creating sticky notes and interviewing their service technicians about their needs for the app.

For the mock-up’s we used two different tools: Balsamico and Axure. Where the first can be used in the first idea development phase, the latter is recommendable for better and more realistic mock-ups. These days we’re getting away from using Balsamico and are using more and more Axure or Keynote and SAP BUILD. Build provides some fantastic testing tools, as well as enabling import of BUILD designs directly into SAP Web IDE for further programming.

As you can see in the app screenshot below, we use the SAP launchpad concept for the front page. That makes the app very modular and the launchpad is thereby an obvious place from where you and the customer can add new modules to the app in the future using the same offline framework.

The app is primarily used on tablets and for that purpose we chose the SAP Fiori element object page as the detail view coming from a list view showing a plain list of work orders (see screenshot below). The object page can be very long, and you can scroll easily from a mobile device. At the top there are anchor links making it easy to jump to sections of the page. On mobile devices it feels very natural scrolling down the page with a finger.

When you enable an application to work offline, you have to pack it as a Cordova app. One of the benefits you get from this is that you can use the Kapsel plugins. In our case, we used the scanning plugin to scan barcodes using the device camera.

Here is what Ole from SKOV said about the design process:

“The Design Thinking workshop with 2BM helped us move fast in the design process – doing what usually takes months to brainstorm, analyze and plan in order to deliver a prototype in just one week. We found out what works best for us, how the new technologies can be applied, and what our users need from the application. It is very powerful to transform data and ideas into actionable prototypes in just 1 week”.  – Ole Moth Madsen, Project Manager for IT and Business Systems, SKOV A/S

SAP Fiori Makers

If you have any additional questions regarding this project, just post a comment below. I’m looking forward to getting in contact with you.

In addition, you can join the next SAP Fiori Makers call. There we’ll present this case in more detail and can answer your questions directly. SAP Fiori Makers is a great learning community open to all who are interested in learning how to create great and more user-friendly enterprise apps using SAP Fiori. Interested? Just check out our SAP Fiori Makers page to register for the call series.