Approve your Fieldglass Work Items with SAP Cloud Platform Mobile Cards

[mark_wright]

Recently I have been working with a customer, as well as with my colleagues at Fieldglass, to help improve the ability to do Work Item Approvals using SCP Mobile Cards.  One main reason that the customer is doing this is that not only are they able to approve/reject multiple different types of Work Items from Fieldglass, but Mobile Cards is allowing them to also do approvals in other environments that are both SAP and third-party systems.  This gives them a single application that links to multiple back-ends and can perform many different tasks, as you hopefully seen in other blog posts that I've made.

If you aren't familiar with Fieldglass take a look at the website and specifically, for this discussion we are looking at the Vendor Management System.

What I want to show is how we went about creating a Time Sheet Approval card.  The card itself isn't the important part, but it's how SCP Mobile Services and Mobile Cards has quite a bit of flexibility to deal with different back-end systems, as well as I'll introduce you to some java script in the card itself in order to help display the data.

Fieldglass itself has multiple scenarios to work with and almost all the approval scenarios can be setup similarly to the Time Sheet scenario.  You can try out Fieldglass Approvals using SAP API Business Hub, as well as you can check out the API Doc.

Here you can see what a Timesheet looks like in Fieldglass



All this information is needed, but a lot of times, the person that is doing the approval of this Timesheet just needs to know only a set of the relevant information to make a decision.  For example, they may just need the total hours, the cost, the Job, the Supplier and some other information in order to decide that this Timesheet can be approved, or if it needs to be sent back for some reason.  The Mobile Card may look something like this:



Note; The card is using some optional fields in the Timesheet module that are enabled on a per customer basis, it may be required that you either enable those fields in your landscape or change the card to fit what is being returned.  For the example the ST/Hr is an optional field called Per day: Quantity: ST . . That field is not enabled by default.

I'll make assumptions that if you are reading this you have read the docs, done the tutorials, or read other posts about Mobile Cards and only give the information on how to get cards working for Fieldglass.

I will outline to scenario's starting with being able to get approvals from a Fieldglass environment that your company already has access to, and then also, being able to get approvals from the SAP API Business Hub.  The API Hub only shows Job Postings, so the card will be different but gives you an environment to test with.

For using a Fieldglass Cloud Server you will need to do the following:

Fieldglass uses OAuth 2.0 for Authentication.  This requires you to obtain an access token before making a call to the Rest API to get the Approvals.  In order to do this with Mobile Services you will need to create a destination that uses OAuth2 SAML Bearer Assertion for its SSO Authentication.  For this Authentication to work you Fieldglass needs the signing certificate from your SAP Cloud Platform so it can be applied to your Fieldglass Cloud Server.  This will allow Fieldglass to authenticate your SAP Cloud Platform account in order to obtain the access token allowing you to then pull the approval lists and perform actions on those Approvals.

Open a support ticket with Fieldglass and let them know what you are configuring.  You will need to send them either the Metadata file or the Signing Certificate that can be found by going to the Security->Trust section of your SAP Cloud Platform Cockpit.  In the Local Service Provider change the Configuration Type to Custom.  You can copy the Signing Certificate Key and send it to them, or Save and then use the Get Metadata link to save the file and send that to them.



If you are doing this in a trial environment or in a factory tenant landscape that has not been configured with your own IDP, you can save the settings in the Local Service Provider tab and then when you go to Application Identity Provider you will see that the Trusted IDP is now pointing to your account URL.  Selecting that URL, you will see that the information is already configured, you can cancel out of this screen.  It is important that if you are using SAP IDP for authentication, once you have sent your information to the support team, change the Configuration Type in the Local Service Provider back to Default so you do not affect other services in your environment.  Once you hit save, you will see that Default provider is set back to accounts.sap.com.

Now that you have your information to Fieldglass we need to create the Mobile Destination.  you will see when creating the SSO you will need some information from Fieldglass that is specific to your environment.  Please request those from Fieldglass support, I will highlight those in bold below.  In the Mobile Services Cockpit create a new Destination and select the Type to be Mobile Destination.  The Destination Name can be whatever you like, for example Fieldglass.

The URL will be your Fieldglass environment: https://<SAP Fieldglass environment URL>/api/v1
Rewrite Mode: No Rewriting
SSO Mechanism: OAuth2 SAML Bearer Assertion
Audience:
Client Key:
Token Service URL: https://<SAP Fieldglass environment URL>/api/oauth2/v2.0/token
Token Service User: Ask Fieldglass Support, this may not be needed if you doing SAML
Token Service Password:

You should now have a destination that allows you to authenticate and get approvals from your SAP Fieldglass environment.

For those that don't have Fieldglass you can try the card out using SAP API Business Hub.  For this, we won't need the signing certificate, nor will we use OAuth 2 SAML Bearer Assertion.  You can check out the response by going to the SAP API Business Hub.  From the Categories list Select SAP Fieldglass and then select SAP Fieldglass



Select the Approval API



From here you can play try out some of the API's, so you are familiar with what is returned for various different approvals.



In the Mobile Services Cockpit create a new Mobile Destination and name it whatever you like, fieldglass_playground for an example.

The URL will be https://play.fgvms.com/api/v1
Rewrite Mode: No Rewriting
Use the + Icon to add Custom Headers with the following Key/Value

X-ApplicationKey - testApplicationKey



The SSO Mechanism can be changed to No Authentication

Now that we have the Destinations setup it's time to import the card.

If you are going against your own SAP Fieldglass environment download the Fieldglass TimesheetTemplateSAP.zip

If you are using the API Hub use the Fieldglass JobPosting.zip

In Mobile Services make sure you go to Mobile Cards and then Connectivity and add the destination that you created.  Create a new card, and from the Resource Package use the Browse button to find the zip file that you downloaded.  Change the Name to what you want it to be and set the Destination to your created destination from above.



 

Once you save the card, open your Mobile Cards app on your device and subscribe to the card.

  

 

As I mentioned at the beginning, the Timesheet card is using some JavaScript.  I used this in order to display the Hours in a table.  The template you will use actually shows the Day, the ST/Hr and the OT/Hr in three columns.  To do this we use java script that takes in the oData that is pulled from the API and then loop through the JSON response to get the hours for each day.  We then create the html to put the table into the HTML.  It's simple Java Script, however it shows that you have quite a bit of flexibility in the card design.  Here is the code, but you can see all of the HTML in the HTML editor of the card itself.  Also take a look at the Request By Time, Registration By Type, Registrations By Time and the Users By Application cards if you want to see how to do charts in the card.

 

<script type="text/javascript">

    var oData = sap.deck.renderers.context.currentlyRendering.renderer.model.oData;

    var PAYLOAD = oData.PAYLOAD;

    var tableData = document.getElementById("table-data");

 

    var PerDay = PAYLOAD.Attributes.others['Per day: Quantity: ST'];

    var PerDayArray = PerDay.split(/\n/);



    var PerDayOT = PAYLOAD.Attributes.others['Per day: Quantity: OT'];

    var PerDayOTArray = PerDayOT.split(/\n/);



    for(var i=0; i<PerDayArray.length-1; i++){

    var keySpan = document.createElement('div');

    var hourSpan = document.createElement('div');

    var otHourSpan = document.createElement('div');



    var itemsDiv = document.createElement('div');

    itemsDiv.className = "table-data-row";



    var dayandhour = PerDayArray[i].split(':');

    if(PerDayOTArray[i]){

        var dayandhourOT = PerDayOTArray[i].split(':');

    }

    

    keySpan.className = "table-data-items";

    keySpan.style.display="inline-block";

    keySpan.style.width = "30%";

    keySpan.innerHTML = dayandhour[0];



    hourSpan.style.display="inline-block";

    hourSpan.style.textAlign = "right";

    hourSpan.style.width = "22%";

    hourSpan.innerHTML = dayandhour[1];



    otHourSpan.style.display="inline-block";

    otHourSpan.style.textAlign = "right";

    otHourSpan.style.width = "47%";

    var day = dayandhour[0];

    var index = dayandhourOT.indexOf(day);

    

    if(dayandhourOT.indexOf(day) != -1)

    {

        otHourSpan.innerHTML = dayandhourOT[1];

    }

    itemsDiv.appendChild(keySpan);

    itemsDiv.appendChild(hourSpan);

    itemsDiv.appendChild(otHourSpan);



    tableData.appendChild(itemsDiv);

    }



 </script>