Introducing
Last week i´ve started reading some good blogs how u can use the SAP Mobile Cards to build up an micro app.
Please check for this also the blogs from Former Member here:
Build a mobile approval solution as a micro app in less than an hour (with SAP Mobile Cards)
Build a mobile reporting solution as a micro app in less than a hour! (with SAP Mobile Cards)
SAP Mobile Cards FAQ
And this one from midhun.vp and mark.wright5
Everyone Should Try This – SAP Mobile Cards
Enable Purchase Order Approval in mobile card kit
In the upcoming lines i want to guide you to the neccessary steps, how u can achieve this with your S4H onPrem system.
The Scenario looks in detail like this:
The idea is to use SAP Mobile Cards to approve e.g. this kind of "PO´s" which we can find in the "My Inbox":
Enter the Mobile Service for Operations and Development Cockpit
Let´s create a new "Mobile Card" by defining the following parameters:
| 1 | Name: e.g. "My Approvals" |
| 2 | Destination to the S4H system |
| 3 | Choose Template Manager |
| 4 | Choose the "Sample Unified Inbox Card" |
| 5 | The query to get your data, in our case the tasks |
As we can see we have two work on the following, to go ahead with our "Card".
- Connect the S4H System to SAP Cloud Platform and create a destination which we can use in our Card
- Find the the right OData Service with the correct query
Connect booth worlds
The first thing which do now is to etablish a secure connection between SAP CP and our OnPrem S4H system.
So lets enter the SAP Cloud Connector and select the subaccount where the "mobile service for development and operations" is enabled. In my case its SCP Development:
Now we can create a new "system mapping":
And finally we allow access to the odata root path:
Afterwards we create the destination in the SAP Cloud Platfom cockpit.
In the next step switch over to the Mobile Service for Development and Operations cockpit.
Enter "SAP Mobile Cards" and here click on the "Connectivity" settings:
Create a new destination from type "Cloud Platform Destination":
As resulkt we have now an new destination available which refers to our previlous cretated in SCP "Connectivity" and if we now click on the OData test icon:
And provide the relative OData path we can verify, if we can fetch the data and of course also the metadata.
Find an discover the OData service
To go ahead and find the right OData service enter the "My Inbox" Fiori app and if u enable the developer tools u can find simply the requested OData service:
If u now right click and choose "open in new tab" option u do not get success:
It´s necessary to replace the $batch with the value which u can find in the "Request Payload" like this:
/TaskCollection?$skip=0&$top=100&$orderby=CreatedOn%20desc&$filter=((Status%20eq%20%27READY%27%20or%20Status%20eq%20%27RESERVED%27%20or%20Status%20eq%20%27IN_PROGRESS%27%20or%20Status%20eq%20%27EXECUTED%27))&$select=SAP__Origin%2cInstanceID%2cTaskDefinitionID%2cTaskDefinitionName%2cTaskTitle%2cCreatedByName%2cCreatedBy%2cCompletionDeadLine%2cSubstitutedUserName%2cStatus%2cPriority%2cPriorityNumber%2cHasComments%2cHasAttachments%2cHasPotentialOwners%2cCreatedOn%2cTaskSupports%2cSupportsClaim%2cSupportsRelease%2cSupportsForward%2cSupportsComments%2cSupportsAttachments%2cGUI_Link&$inlinecount=allpageI´am changing the query a bit for e.g. to display only the first 5 entries and also change the format to JSON:
https://<host>:<port>/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2/TaskCollection?$skip=0&$top=3&$order...We get by executing this query now a response like this:
Important: Please save now this JSON response in a file, like "data.json", we need this later one in our "Card" definition.
Back to the OData Test
If we switch back to the OData Application Destination Test and providing now the known relative service path to the OData service:
/sap/opu/odata/IWPGW/TASKPROCESSING
And futhermore select the "Task Collection" entity, we can now verify we are able to fetch the data:
Adjust the "Mobile Card"
Based on the fact that we are now ready with the missing data before, we can now adjust our "Card":
Now move over to the "Sample Data" tab, and please adjust a bit the previous downloaded JSON response. The final does not contain "results" and "count":
Now u can upload the file and go to the next step to define the following "Data Mapping":
Adjust the "XCSRF", "Accept" and "Reject" action URL's:
XCSRF Token URL:
/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2/Approve:
/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2//Decision?SAP__Origin='LOCAL_TGW'&InstanceID='${ID2}'&DecisionKey='0001'&Comments='${comments}'Reject:
/sap/opu/odata/IWPGW/TASKPROCESSING;mo;v=2//Decision?SAP__Origin='LOCAL_TGW'&InstanceID='${ID2}'&DecisionKey='0002'&Comments='${comments}'Additional u can also change the "Push Notifications", but for now we do not changing here anything.
Save now the definition of your "SAP Mobile Card" and switch over to your mobile.
The "SAP Mobile Cards App" can be downloaded depending on your device type here:
Android: here
iOS: here
Check the result on your device
As u can see in this little video, we can now easily use our newly create "Micro app." to approve our Purchase Orders. Is this simple, isn´t it?
And if we now go back to our S4H OnPrem Unified Inbox Fiori app., we can see the that the order 4500001131 is now approved and not longer visible:
Before:
After:
Finally if we check this in detail we can now see, that the Status has changed.
Conclusion
Hopefully u can see how fast and easy u can use SAP Mobile Cards with your S4H/SAP Business Suite to enable and simple approval app.
And yes, some of these stuff is covered already in other blogs, but my intention was to show an full e2e scenario. And how easily you can build up this kind of "Micro app." with an real backend system.
cheers,
fabian
Helpful Links
SAP Help - SAP Cloud Platform Mobile Service for Development and Operations
Overview Guide SAP Mobile Cards for Android
Overview Guide SAP Mobile Cards for iOS
SAP Mobile Cards Overview
Basic Tutorial for mobile card kit
- SAP Managed Tags:
4 Comments
