Technical Articles
Part 1C: Working with Task APIs in your Custom HTML5 application
In this concluding section of Part1, let us know how-to update the user interface to show the task data and workflow context.
The whole objective here is to use task APIs to (a) get task related data and enhance the workflow context (b) add task action button implementation and (c) bind the UI elements with the workflow context data.
So, when you want to use your custom UI application as a user task-interface of workflow then these steps need to be performed to ensure that workflow context and task context is seamlessly connected.
Each step mentioned below is not mandatory, you can choose to use them at your discretion and based on your requirement. But in most of the cases, for our internal showcase scenario, I have more or less followed the same steps and the integration of user interfaces works like butter.
Get started now:
- Open the Web IDE
- Open Component.js file of your project
- Add the following code snippets in init function to:
- Get the task instance data
// Step 1: get task data var startupParameters = this.getComponentData().startupParameters; var taskModel = startupParameters.taskModel; var taskData = taskModel.getData(); var taskId = taskData.InstanceID;
- Get the workflow context and enhance it with the task data
var processContext = new sap.ui.model.json.JSONModel(); $.ajax({ url: "/bpmworkflowruntime/rest/v1/task-instances/" + taskId + "/context", method: "GET", contentType: "application/json", dataType: "json", success: function(result, xhr, data) { //Get the process context processContext.context = data.responseJSON; //Get task related data to be set in ObjectHeader processContext.context.task = {}; processContext.context.task.Title = taskData.TaskTitle; processContext.context.task.Priority = taskData.Priority; processContext.context.task.Status = taskData.Status; if (taskData.Priority === "HIGH") { processContext.context.task.PriorityState = "Warning"; } else if (taskData.Priority === "VERY HIGH") { processContext.context.task.PriorityState = "Error"; } else { processContext.context.task.PriorityState = "Success"; } processContext.context.task.CreatedOn = taskData.CreatedOn.toDateString(); } });
- Get the task description and add it to UI model
//get task description and add it to the UI model var jsonModel = new sap.ui.model.json.JSONModel(); startupParameters.inboxAPI.getDescription("NA", taskData.InstanceID).done(function(dataDescr) { processContext.context.task.Description = dataDescr.Description; jsonModel.setProperty("/context/task/Description", dataDescr.Description); }). fail(function(errorText) { jQuery.sap.require("sap.m.MessageBox"); sap.m.MessageBox.error(errorText, { title: "Error" }); }); jsonModel.setData(processContext); this.setModel(jsonModel);
- Next, add buttons and their implementation in the task interface.
Here in this example, I have just added one button, you can choose to create other buttons based on your project requirement like button to Reject or Confirm etc.//Implementation for the approve button action var oPositiveAction = { sBtnTxt: "Approve", onBtnPressed: function(e) { var model = that.getModel(); model.refresh(true); //Call a local method to perform further action that._triggerComplete(that.oComponentData.inboxHandle.attachmentHandle.detailModel.getData().InstanceID, true, jQuery.proxy( //on successful competion, call a local method to refresh the task list in My Inbox that._refreshTask, that)); } }; //Add 'Approve’ action to the task startupParameters.inboxAPI.addAction({ action: oPositiveAction.sBtnTxt, label: oPositiveAction.sBtnTxt, type: "Accept" //Set the onClick function }, oPositiveAction.onBtnPressed);
— All the above code snippet is added to the init function of the Component.js file —-
- Get the task instance data
- Now, add few more functions in the Component.js file to:
- Trigger action to complete the task.You need to implement this function for the button, whose click would complete the task. In this, you call task API to set the status as completed.You can find more details on the API here:
https://help.sap.com/doc/40db36d987084ab09e496381090e9a2e/Cloud/en-US/wfs-core-api-docu.html//This method is called when the confirm button is click by the end user _triggerComplete: function(taskId, approvalStatus, refreshTask) { $.ajax({ //Call workflow API to get the xsrf token url: "/bpmworkflowruntime/rest/v1/xsrf-token", method: "GET", headers: { "X-CSRF-Token": "Fetch" }, success: function(result, xhr, data) { //After retrieving the xsrf token successfully var token = data.getResponseHeader("X-CSRF-Token"); var dataText; //form the context that will be updated - approval status and the equipment list dataText = "{ \"status\":\"COMPLETED\",\"context\": {\"workplaceConfirmed\": \"" + approvalStatus + "\" }}"; $.ajax({ //Call workflow API to complete the task url:"/bpmworkflowruntime/rest/v1/task-instances/"+taskId, method: "PATCH", contentType: "application/json", //pass the updated context to the API data: dataText, headers: { //pass the xsrf token retrieved earlier "X-CSRF-Token": token }, //refreshTask needs to be called on successful completion success: refreshTask }); } }); },
- Finally, write a function to refresh the inbox once the task is completed
//Request Inbox to refresh the control once the task is completed _refreshTask: function() { var taskId = this.getComponentData().startupParameters.taskModel.getData().InstanceID; this.getComponentData().startupParameters.inboxAPI.updateTask("NA", taskId); }
- Trigger action to complete the task.You need to implement this function for the button, whose click would complete the task. In this, you call task API to set the status as completed.You can find more details on the API here:
This completes the updates to Component.js file. Now let us modify the view.xml file to bind the UI element of the user interface such that they fetch the respective value from the workflow context
- Open the view.xml and change the Text field of FirstName label element to {/context/user/FirstName} where {/context} reads the data from the workflow context and remaining path is the relative payload path as passed to the workflow.Similarly do the same for other elements as shown below.
- Save and Deploy the SAPUI5 application
- Start a new workflow instance with the following payload and open the task in My Inbox
{ "user":{ "FirstName":"Kate", "LastName":"Beckett", "city":"London", "country":"United Kingdom" } }
Now you will see the data in the form data from the workflow context
With this we complete Part1 of our learning. In this part you learnt how to create an HTML5 application and modify the application artefacts so that it can be successfully integrated in user task of SAP Cloud Platform Workflow. You also learnt about task APIs and how they can be used to associate task data with workflow context, so that the text in the UI element are shown appropriately when the task in opened in MyInbox application.
In the upcoming Part 2 and Part 3 you will learn some advanced options which might help you while using your custom UI5 application as user-task or to start the workflow.
Previous Blogs on Neo Environment
Understanding Custom UI Integration with SAP Cloud Platform Workflow
Part1A: Build your Custom HTML5 application in SAP WebIDE for Workflow
Part1B: Using your Custom HTML5 application as User Task in Workflow
Hello Archana, thank you for this blog !
Why is there not a workflow template project available with your coding for a simple approve/decline task and maybe some other types of tasks ? My expectation from CP workflow services was to work more in a "modelling" environment, and not do so much coding in javascript. Will this come, or do i misunderstand the concept ?
And is there a blog (which i may have not found yet) which explains how to initiate a CP workflow from an ABAP backend system ? This would be the use case I am looking for.
thank you,
Johannes
Hello Johannes,
We would soon be coming up with the task-user-interface template, which means that application developer can create an user interface from the workflow user task, that will have predefined structure. In this blog, my intention and target audience was application UI developer who want to integrate their interface as workflow task UI. The code is actually very small chunk that shows how to use Task APIs.
If you want to initiate workflow from ABAP backend - which I presume is a on-premise system then you have to use combination of Cloud Connector and Workflow Runtime APIs. Workflow is exposed as REST-based service in SAP Cloud Platform and you can call this service like any other rest-based-service from the backend. I have a blog on how to invoke workflow service from SAP Cloud Integration service, which might also be helpful for you.
Hope that helps,
Archana
Dear Archana, thank you for the Reply, i haven't seen it earlier! Sounds good!
Johannes
Simple task user interface creation is available now:
https://help.sap.com/viewer/f85276c5069a429fa37d1cd352785c25/Cloud/en-US/1827df828cbd467998b3d82a92a3bfc8.html
Hi Archana,
Is there a way to debug the UI Application ? When I give the binding {/context/user/FirstName}, the user name isn't showing up in the "My Inbox" task UI.
Regards,
Michael Paonam
It worked when I pasted the code inside Component.js instead of Controller.js ( inside the controller folder).
You can debug the javascript file like Component.js or Controller.js by opening the Developer’s Tool of the browser and you can use combination of Console and other views of the tool to find the cause of the problems with the view.
Hi Archana,
In step 2, you wrote “Open Controller.js file of your project” and in step 4 also. Shouldn’t it be Component.js instead of Controller.js ?
Yes indeed it is Component.js
Thanks for pointing this out. Changes are done!
Hi Archana,
in step3,what's the meaning of "that"?
Hello,
that is the variable defined for the Component reference. As there is function call (which is defined in Component.js) inside and ajax function call so there need to be global reference defined for "this". You can name it anything.
Hi Archana, excellent post!
I'm facing the following error when editing the Component.js file: "that is not defined". Could you please tell me what would be wrong?
Thanks in advance.
Hi diniel, I'm understanding that this is too late reply.
I was facing the same error just now. Here is the solution.
Hi Archana
How about for Business Workflow that comes with S4HANA, not the SCP Workflow, is it integrated in the same way, via APIs?
Thanks!
Adrian
Hello Adrian,
Business Workflow differs from SAP Cloud Platform. It does not have these set of APIs
Hi,
In My Inbox , admin can approve or reject the request. I have one question how can he monitor or check the approved or rejected request.
I have called ajax method for hana services in my html5 application,
but I could not able to post the data. I am getting following error,
so, can you please help me out for this issue?
Regards,
Raghavendra
Hello Raghavendra,
Which My Inbox are you using? Is it SAP Cloud Platform Workflow? What is the "Demo" is the URL? What is your original URL? Does that URL with POST call works with POSTMAN?
From the URL is the Console screenshot it seems you are using Fiori MyInbox. You need to understand the redirection of the Request URL and adjust your URL accordingly.
Regards,
Archana
Hello Archana,
thanx for this very helpful blog.
I think when you define
you mean
Hello Laura,
No I meant this only: var processContext = new sap.ui.model.json.JSONModel();
When you define the processContext like this you create a JSON model object that can be set to the View but the latter (as you mentioned) is the plain JSON object
Regards,
Archana
Has anyone else observed a strange behaviour for the workitems using the techniques in this blog?
Andy
Yes, if I select an item in the Inbox, then come back on it, it's empty.
Any solution ?
This should not be happening. Can you please send the screenshot. Which MyInbox are you using?
When I first select a task in MyInbox, I get the UI I developed, but not the values from the context which are left empty. In debug I get the following error message: "TypeError: Cannot read property 'task' of undefined"
When I select another task, then come back to the first one, I get the following UI which is not mine:
Hello Marie,
What you see is the default task UI that gets loaded if there are any issues loading the custom user interface (that you associate with the user task). Can you please open the developer console of your browser and send across the error message you get
Hello Archana,
I get “Uncaught TypeError: Cannot read property ‘task’ of undefined
at Object.eval (Component.js?eval:1)”
within
//get task description and add it to the UI model
var jsonModel = new sap.ui.model.json.JSONModel();
startupParameters.inboxAPI.getDescription("NA", taskData.InstanceID).done(function (dataDescr) {
processContext.context.task.Description = dataDescr.Description;
jsonModel.setProperty("/context/task/Description", dataDescr.Description);
}).
Thanks for your help,
Marie
Hi Archana,
I got the same issue as Marie’s. Here is the screenshot:
PS: the workflow and application are followed by your blog from part 1a, 1b and 1c.
BTW, I'm a new guy of SAP CP workflow. I'm really interested in SAP CP workflow. May I get some help from you?
I followed the some tutorials in developers.sap.com, but they are quiet simple.
It's lucky to find your post. They are really what we need.
but the errors stopped me. could you help to solve?
May I ask is there any latest resources related to SAP CP workflow? I find that this blog was posted quiet a long time ago.
Hi Archana,
I have built a simple UI5 application to consume it as task UI. the UI has couple fo input fields. I want to read the values entered by the user in these fields when user clicks on approve button and store it them in separate variables in the context. How do i do that?
thanks for your help.
Hello Sankara,
Hope that helps,
Archana
Hi Archana,
I have posted the question for the same issue below. could you please have a look at it. I have pasted there my code. may be you can find where I am going wrong.
https://answers.sap.com/questions/615402/access-values-entered-in-user-task-ui-inside-compo.html#
Hi Archana,
I have created a SAPUI5 app as shown by you in the sample(Hello world)
I am able start the workflow instance, but, when I monitor the task the status is always running.
I have used my Id to trial id with p4456XXXX for task recipient.


Screen shots are attached for reference
Please help.
Ikram
As it is a human activity, you need to take action to approve/complete the task. This task would be in the My Inbox of the list of Recipients. Unless the task is completed, workflow cannot be completed.
Regards,
Archana
Thanks Archana!
Do you know if it's possible to send emails to the user when a task is given, approved or rejected?
Regards, Karla.
Yes it is possible. This is not available directly with the user task, instead you can put a mail-task in a parallel gateway with the user task so that notification is send once the task is assigned, and then you can put another mail-task after the user task. If you want the email notification message to be based on whether the task is accepted/rejected then you need to capture the action in workflow context and then you can create dynamic email content based on that.
Regards,
Archana
Thank you so much!
Great post!
Well documented and clear.
It worked directly after following explanations.
Thanks Archana
Hello all,
if like me, you have issues with the refresh of the task list when accepting/rejecting, the following code may help you.
For my issue, it did the trick.
First of all, my actions are promises as follow
Then i call the refresh task on the resolve of my promise
hi Archana,
Why is the css of the app ui(used as taskui) not getiing loaded? is this a bug or hard-pressed feature of bpm inbox, could you update ?
app manifest file loads correctly with the path
but css of the app doesnt' get loaded(the URL is different and always gives 404)
https://<>/cloud/flp/3.125.0/html5apps/warrantyclaim20/css/style.css?ts=2.6.51
Hi Archana,
I have deployed workflow and custom task ui5 both. Now i am calling custom task ui5 from workflow.
We are getting custom task in workflow perfectly.
But when we are debugging ui5 application from My Inbox by making workflow instance, we are not getting controller file in source tab of dev tools of chrome.
So can you please tell me how to debug from my inbox.
Hi Pranaw Kaushal
I am facing the problem while deploying . Can you please help me . I have followed the all the steps provided by Archana .
Thanks & Regards