Extend Fiori My Timesheet App with device GPS on Hana Cloud Platform (HCP)

It sounds like a lot of tech jargon to start, but let me explain.

There are two big problems with Fiori today:

1. There is a lot of work required to get Fiori started and configured, including a new ABAP system, Gateway.

2. There is a lack of true mobile / offline capabilities.

While I tend to think of Fiori first as a simplification technology, and second as a mobility technology, those lines will continue to blur over time.

To address both of those issues, in this blog I will show how anyone can use the free Fiori Cloud Trial edition, and the free Fiori Client app, and build a functioning GPS-enabled Fiori app without any installations. And when you move from the Fiori Cloud Trial Edition, to your own HCP instance, you could connect this all to your own ECC system as well.

For this app, I used My Timesheet.

Tile:

App sample:

Let’s start by going here: https://www.sapfioritrial.com/

This page is a great resource where you can try out 25+ (always growing) of the latest Fiori apps and get a feel for how they work. If you click on the “Customize and Extend” tile, it will automatically spin you up a free Hana Cloud Platform instance for you to try!

Once you are in the HCP Launchpad, you can click on your own My Timesheet app, and then click on Develop Apps.

From there, you will get taken to the SAP Web IDE with the option to select an extension to the My Timesheet App. Great news, since getting the syntax down perfectly for doing an extension can be a little tricky.

Tip: When prompted, if you select copy existing app, it will be a useful reference to find the extension points.

In the entry of Timesheet, I would like to submit a GPS tracking code, so that I know where my employees are submitting their time from. (Sorry, I hope I don’t ever have to do that!).

Review the code for the timesheet, and you find this extension point: extS31FormElementForInputs. It’s right after Duration, and right before Notes, so you know you have it.

Now back in Web IDE, select the extension project and extend the view, and then the controller.

In the view you will add the fragment that includes GPS fields, and a button to gather them.

In the controller add a new model for GPS, and an action on the button to gather the inputs using the Cordova library for GPS. This is built by default into the Fiori Client by the way, and any other component can be used in this same way.

https://github.com/apache/cordova-plugin-camera

By the way, full code on GitHub here: https://github.com/MindsetConsulting/hcmmytimesheetExtension

Next in Web IDE, deploy this application to HCP:

Once it’s published you can preview this on HCP:

After publishing, there was also an option to publish as a tile back to the Fiori Launchpad. You can click that, or use the Fiori Cloud tools to configure a new dynamic tile. In either case you will get a nice new tile like this:

Finally, go and download the Fiori Client for iOS (or Google): https://itunes.apple.com/us/app/sap-fiori-client/id824997258?mt=8

Launch that on your phone, and for the Launchpad URL, insert your Fiori Cloud URL from the same page that the tile is on. Something like: https://fiorilaunchpad-b67b08fae.dispatcher.us1.hana.ondemand.com/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html

(you may want to copy/paste!)

After you login, try out the app:

Enjoy!

p.s. Thanks to Maksim Rashchynski’s Profile | SCN for his help with the code!