Skip to Content
Author's profile photo Gavin Quinn

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:

Screen Shot 2015-10-05 at 4.06.35 PM.png

App sample:

Screen Shot 2015-10-05 at 4.08.14 PM.png

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!

Screen Shot 2015-10-05 at 4.10.25 PM.png

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

Screen Shot 2015-10-05 at 4.13.12 PM.png

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.

Screen Shot 2015-10-05 at 4.20.56 PM.png

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:

Screen Shot 2015-10-05 at 4.37.29 PM.png

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

/wp-content/uploads/2015/10/fixed2_803627.png

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:

Screen Shot 2015-10-05 at 4.40.32 PM.png

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:

/wp-content/uploads/2015/10/iphone_803628.png

Enjoy!


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

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michael Appleby
      Michael Appleby

      Finely documented!

      Thanks, Mike

      SAP Technology RIG

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Good one Gavin.

      Regards

      Sandip

      Author's profile photo Sanket Chimalwar
      Sanket Chimalwar

      Nice document Gavin..

      Sanket

      Author's profile photo Anju Jha
      Anju Jha

      Good one Gavin. Nicely explained.

      Thanks,

      Anju

      Author's profile photo Former Member
      Former Member

      Thanks for sharing, Gavin. Nicely documented.

      Would you please help me with step below:

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

      Thanks in advance,

      Maite.

      Author's profile photo Gavin Quinn
      Gavin Quinn
      Blog Post Author

      Hi Maite,

      Thanks for following the blog!

      If you review the github repository, in the views folder, there is a new file: S31_extS31FormElementForInputsCustom.fragment.xml

      This is where the new fields are and new button.