- SAP Managed Tags:
Introduction:
In this blog post I’m going to talk about on how to access your Workflow tasks on SAP Mobile Cards using SAP Cloud Platform Mobile Services and SAP Cloud Platform Workflow Management APIs, and most significantly, perform actions on them from your mobile device, on the go.
As much as the SAP Mobile card is simple to build and use, so is the beauty of our SAP Cloud Platform Workflow Management which allows you to digitize workflows, manage decisions, gain end-to-end process visibility, and configure processes in a low-code approach.
So, when best of both the worlds meet, magic is sure to happen!
We will see it happening through this blog post and witness the cool outcomes that will be derived out of it like integrated mobile experience with few configuration steps, push notifications and offline access to workflow tasks dnd all these adding up to the business process acceleration.
Use Case:
In this write-up, we are going to implement the case where we will build a mobile card to show the tasks that are also present in the My Inbox application of a SAP Cloud Platform Fiori Launchpad, by virtue of SAP Cloud Platform Workflow Management API.
Out of multiple workflow tasks, let’s take an example use case of Capital Expenditure Approval Process (Capex) where a new investment initiative to kick off, needs to go through an approval process.
When participating in such a process automated through a workflow, users usually have to work on a series of tasks. This might include approving a request, or reviewing a document and sending it for rework etc.
SAP Cloud Platform Workflow Management enables business users to access their tasks using My Inbox which requires online connectivity to SAP Cloud Platform. So, with SAP Cloud Platform Workflow Management tasks appearing as SAP Mobile Cards on the mobile device, decision makers not only receive push notifications of their tasks but can also have offline access and can perform quick actions from anywhere, anytime, while they are constantly on the move.
Configuration:
For ease of understanding the flow, let us divide the course of actions to build the card, broadly into four major sections and please do note, this activity is done in the Cloud Foundry environment -:
1. Initial Setup:
You would be required to create a workflow with tasks, using Forms or SAP UI5 as the user interface and with actions.The Mobile Card that you are going to create in next sections, will read from the same TCM oData API of Cloud foundry service that your Fiori Launchpad application My Inbox uses. For this blog post, let us pick up the workflow for Capex Approval Process. You can refer to the Mission, which will guide you step by step right from the setup to build, deploy and execution of the workflow.
Disclaimer: Using a capex workflow is just a recommendation, you can however build and deploy your own workflow as well with actions.
2. Setup Mobile Card and Configure Destination:
Once your workflow is ready and deployed in your Cloud Platform Account, you can now switch your focus to setting up the Mobile Card client and configuring a mobile destination.
A) This tutorial will guide you to access SAP Cloud Platform Mobile Services and configure SAP Mobile Cards Client on your mobile device.
B) Next, you need to configure Mobile Destination and you can use the Feature “Mobile Connectivity”. Launch the SAP Cloud Platform Mobile Services cockpit, navigate to the Mobile Applications -> SAP Mobile Cards -> Features -> Mobile Connectivity. You can get your destination quickly created using the capability “Use a Cloud Foundry Service” which will create and map the destination to the workflow instance(wm_workflow) your account in just a few seconds.
Figure 1:Use Cloud Foundry Service
Figure 2:Select workflow instance
Figure 3: Destination created
3. Creation of SAP Mobile Card: Now that you are through with the preliminary setup, comes the creation of card, to read and display tasks, using the SAP Cloud Platform Workflow Management APIs. In the SAP Cloud Platform Mobile Services Cockpit, go to Mobile Applications -> SAP Mobile Cards. Under Card Templates section, click on ‘Create Card Template’ icon.
Figure 4: Create New Card Template
- Under the Info tab, enter the required details:
- Name
- Description
- Card Template->select Multi Instance
- Template Source ->Template Manager
- Destination: select workflow (this will be present in the drop down to choose from)
- Under Operational tab, keep the setting as shown in the screenshot
Figure 6:Operational
- In the URLs tab, you need to enter the Inbox API of cloud foundry, for retrieving the tasks. This is the same API which the My Inbox application in the Fiori Launchpad uses.
- Query URL: /odata/v1/tcm/TaskCollection?$expand=Description,CustomAttributeData&$filter=Status%20eq%20'READY'%20or%20Status%20eq%20'RESERVED'&$orderby=CreatedOn
You can also add parameters to read the task name, title and task instance ID for subsequent usages.
- Tasktile: $.d.TaskTitle
- Taskname: $.d.TaskDefinitionName
- ID2: $.d.InstanceID
These parameters will reflect in the Parameters tab:
Figure 8:Parameters
- Switch to the Editor tab and use your HTML coding skills to represent the look and feel of the SAP Mobile Card on your mobile device.
Figure 9:Editor
<div id="mySimpleTemplate" class="myTemplate" data-type="text/x-handlebars-template">
<div class="header" style="height: 30px">
<div style="text-align: left;">
<span style="font-weight: bold; font-size: 24px; float: left; color: #ffffff; display: inline; padding-top: 8px">
{{d.TaskDefinitionName}}
</span>
</div>
<div style="text-align: right;">
<span style="float: right; clear: right; display: inline; font-size: 17px; color: #fafafa; padding-top: 4px">
{{d.TaskTitle}}
</span>
</div>
</div>
<div class="card-content">
<div class="listitem">
<div class="listitem-label">
<span>
Created By:
</span>
</div>
<br>
<div class="listitem-value">
<span>
{{d.CreatedBy}}
</span>
</div>
</div>
<div class="listitem">
<div class="listitem-label">
<span>
Priority:
</span>
</div>
<br>
<div class="listitem-value">
<span>
{{d.Priority}}
</span>
</div>
</div>
<div class="listitem">
<div class="listitem-label">
<span>
Status
</span>
</div>
<br>
<div class="listitem-value">
<span>
{{d.Status}}
</span>
</div>
</div>
<br>
<div class="listitem">
<div class="listitem-label">
<span>
Details
</span>
</div>
<br>
<div class="listitem-availability">
<span>
{{d.Description.Description}}
</span>
</div>
</div>
<br>
<br>
{{#each d.CustomAttributeData.results}}
<div style="clear:left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
<span style="float:left; width:40%; text-align:left; font-weight:bold; text-overflow:ellipsis; overflow:hidden; white-space:nowrap">
{{Name}}
</span>
{{Value}}
</div>
{{/each}}
</div>
</div>If you have custom attributes added to your tasks in the workflow, you can see it on your mobile card as well. All you need to do is to embed the custom attributes snippet, as present in the above sample code .
- Now comes the interesting part- Actions. It would be worth mentioning here that for each task definition you need a mobile card because modeling custom actions is not yet possible in SAP Cloud Platform Workflow Management.You can add actions to match the requirements of your use case, for example, possible actions can be accept, reject, rework, etc. To take action on a task instance, the SAP Cloud Platform Workflow Management Rest API comes into play. You can add actions one by one as shown below:
- Add Action 1 -> AcceptEnter the below:Name: AcceptLabel: AcceptURL: /rest/v1/task-instances/${ID2}Http Method: PATCHConsider Action as : PositiveAction Body:{
"status":"COMPLETED",
"decision": "approve"
}
- Add Action 1 -> AcceptEnter the below:Name: AcceptLabel: AcceptURL: /rest/v1/task-instances/${ID2}Http Method: PATCHConsider Action as : PositiveAction Body:{
Figure 10:Action1- Accept
Similarly, you can add few more actions like Reject and Rework as shown:
Figure 11:Action2- Reject
Figure 12:Action3- Rework
- In the Header tab, you can set
- Request HTTP Method: GET
- Header Name: X-Requested-With
- Header Value: XMLHttpRequest
- Go to Notifications tab and enable Push Notification
Figure 14:Notifications
Click on Save to save the newly created card template. You should get a success message and you will be brought to the SAP Mobile Cards Page.
Figure 15:Save Success Message
Figure 16: New Card Template Created
Now, your card is almost ready. If you click on the card and within the Info tab, check the State of the card, it will be in Development. But in order to consume this card on your mobile device, you need to set the State to “Productive”. So, get ready to publish the card to make it consumable.
All you need to do is while you are still in the Info tab, scroll down to Versions table and click on the tick mark to set the card to Productive. You will get a confirmation popup, choose Yes and bingo, your card is ready to be subscribed.
Figure 17:Set Card to Productive
4. View and Act on Tasks from SAP Mobile Card: Here comes the milestone, which is to view the assigned tasks on your mobile device and action them. But wait, have you still subscribed to the card? You may have not! Let's do it!
Just follow the “Step 4: Subscribe to the card in SAP Mobile Cards:" of the mentioned tutorial here. The tutorial might speak for a different card to subscribe, but in general subscription method remains the same, so it’s all good ?
Next, you need to make sure you have some tasks generated by workflow in you Inbox application of the Fiori Launchpad. If not yet, then just follow these simple steps:
- Access the Fiori launchpad (you can open it as SaaS application subscribed to your Cloud Platform Account)
- Select the tile Monitor Workflows - Workflow Definitions
Figure 18:Workflow Definitions
- Select Start New Instance to start the new instance of deployed workflow. Here in this blog post, let us consider Capex workflow as recommended in the pre-requisite Mission.
Figure 19:Capex Workflow Definition
- Click on Start New Instance
- Enter JSON context and again click on Start New Instance
- Select Show Instances to switch to the Monitor Workflows - Workflow Instances application
Figure 20:Workflow Instance
- Select the newly started workflow instance and look at its details
- Click Go Back until you are at the Fiori Launchpad again
- Click the tile My Inbox. It should show at least one new task just created
Figure 21:WorkflowTasks
Outcome:
Now, the wait finally is about to end! ?
Just open the Mobile Card application on your mobile device (Android/iOS). Do a pull refresh (in case you do not see the new card yet). You should be able to see the new tasks downloaded as Mobile Cards.
Just remember, if still the card does not download, you may need to Unsubscribe and Subscribe to the card again.
Once you have subscribed to the card, you will also receive push notification on your mobile device for the assigned tasks with actions. You can either take action from the notification or, once the card is downloaded with the task, you will be able to use the action button in the bottom left corner to Approve or Reject or Rework, based on the decisions you have defined in the workflow form.
Figure 22: Mobile Card with Actions
Click on any action (Accept/Reject/Rework) to trigger the next steps. Once the action is successful, you can either verify the My Inbox app of the FLP or your mobile card app itself.That completed task should disappear, and it may trigger another subsequent task (equivalent to another card on your mobile device), or can terminate the process, depending on how the workflow is configured. And, for the subsequent tasks generated, you will see new mobile cards and you can take actions from your mobile device on the go!
Another interesting highlight would be the custom attributes which you can see on the mobile card, if you have it configured in your workflow tasks.
Figure 23:Mobile Card with Custom Attributes
Conclusion:
This brings us to the end of the blog post. So, you see, what we have achieved, is a beautiful amalgamation of SAP Mobile Card integrated with SAP Cloud Platform Workflow Management Tasks in a quick and simple way, enabling users with integrated mobile experience on the move.
Call to Action:
I hope you enjoyed the read and might want to try accessing your workflow tasks from your SAP Mobile Card! You can also follow this Mission , available on Discovery Center, which will offer you a structured and guided approach to achieve this outcome.
1 Comment
