Technical Articles
Enhancing Custom Application as Workflow Task UI in Cloud Foundry
In my previous blogs (blog 1 | blog 2) I discussed about two most commonly asked queries in workflow and explained (a) how-to start workflow from custom application and (b) how-to embed this custom application as a tile in Fiori Launchpad. In this blog I will cover yet another most-asked-question – “how to create Workflow Task UI from existing custom UI”
A task UI in a workflow could be a Form or SAPUI5 component. For latter, you have two choices:
- Build task UI from scratch or
- Reuse existing UI5 application.
note: only SAPUI5 based applications, deployed in the cloud platform are supported for Task UI.
If you do want to build the UI from scratch instead want to reuse any existing SAPUI5 application, then you can do so with slight adjustments in the Component.js and View.xml files. These adjustments are mandatory to upgrade your UI to have task properties like task-name, task-subject, task-priority etc.
Step 1: Update xs-app.json file
Add the route in xs-app-json of your custom application. This router is needed as you will be calling workflow APIs. Read Step 3 of the documentation to know more.
{
"source": "^/bpmworkflowruntime/(.*)$",
"target": "/$1",
"service": "com.sap.bpm.workflow",
"endpoint": "workflow_rest_url",
"authenticationType": "xsuaa"
},
Step 2: Update Component.js file
Let us see code-snippets you need to add in Component.js. For this I have an empty Component.js as seen in screenshot below.
Update the file step-by-step as guided below:
- Get Task Model Data.
- Read Task Context using Workflow Task APIs.
Note1: You have to append the Application ID (like shown in screenshot: sapdemobpmtaskui) to the relative API URL. You can get the application ID as explained in the Result section here.
Note 2: You will get 404 – Not Found error if you have not added a route in your Task UI application xs-app.json.
- Update UI Context Model with the Task Model Data.
- Create task action buttons to complete task.
- Task completion operation will call workflow user task APIs.
- Add action buttons to Task UI.
Note 1: After you enhance your existing custom UI, the buttons’ action script is updated to complete the task and these buttons are attached to the task (as shown in step 4 & 5 above). You need to therefore delete the footer in your view.xml that were having the buttons to complete the UI operations like OK, Cancel, Confirm etc.
Note 2: you can find the updated Component.js in the sample workflow application here to understand the changes in detail.
- Add the code to complete the task using Workflow Task APIs. Do not forget the XSRF token call before any workflow API call that you make from the user interface.
Step 3: Adjust view.xml file
Adjust the view.xml file of your UI5 component to include the Task Information Header and delete the footer. You may also choose to adjust the code to not show footer for Task UI and keep it enabled for independent use.
Step 4: Add User Task in Workflow
Add a user task in Workflow and associate it with your Task UI. You can use Select option in User Interface properties of the user task to discover your SAPUI5 component.
[Optional] Additionally, to access the My Inbox and Monitor Workflow applications, you need to add the respective tiles in your existing Launchpad with the given App ID and Intent Navigations. This is needed only if you have not configured any launchpad with workflow applications.
App Title | App ID | Intent Navigation |
Workflow Instances |
com.sap.bpm.monitorworkflow
|
bpmworkflowmonitor-DisplayInstances |
My Inbox | cross.fnd.fiori.inbox | WorkflowTask-DisplayMyInbox |
Finally build and deploy the MTA project and open the launchpad application from cockpit. You will see the new tiles to track the workflow instance and view the work items with Task UIs respectively.
You can now start the workflow using the form (Capital Expenditure Request) and then see the task in My Inbox. Notice the task properties header and the footer.
In few simple steps, you can bring your own UI to reuse it as Task UI. If you want to build the Task UI from scratch then you have to completely design your component.js and view.xml files.
For your reference I have uploaded the sample code in GitHub that you can use for your reference while building your own application.
In the final chapter of the series, I will show you how to call external APIs in Task UI.
Related Resources
Hi Archana.
How can I get the response or context user task after user task if one user approve or reject a request?
Thanks in advance.
Hello Jimmy,
Check step 6, _completeTask method captures that decision of the user tasks and passes it on the workflow context for further processing.
In my case, I created the buttons inside a form decision. How can I call that function?
You can refer the documentation how to access decisions from the form
https://help.sap.com/viewer/e157c391253b4ecd93647bf232d18a83/Cloud/en-US/9fd9395339e94143ac9ce9e693b06bd1.html?q=access%20decision
Hi Archana,
thanks for the CF workflow blogs. They were really helpful. I've just noticed that My Inbox > Task View behaves funny with different resolutions / fullscreen. Did you had the same problem too? I couldn't see anything relevant in your source code. In our case the task view content is partially cut out. Please see the attachments (in second screenshot title is cut out).
Thanks and regards,
Koray
Hello Koray,
I haven't seen this but it's clearly an issue. Can you raise the ticket on LOD-BPM-WFS. I think you are using Forms.
HI Archana,
no actually I am using a custom UI5 view. The code is based on your example. That's why I posted my question to this blog post. I will raise an incident.
Regards,
Koray
Hi,
I have the same problem. Have any resolutions been found on this issue?
Thanks,
Regards,
Hamza Masood

Hi,
The solution for me was to remove the <shell> tag in my view.xml.
Regards,
Hamza Masood
Hi Archana,
How can I add a custom/external HANA service built using CAPM in xs-app.json?
I am getting an error when using additional route; the custom Inbox UI doesn't load.
Any idea what could be the issue?
Regards,
Karan
Hello Karan,
Have you checked my blog on consuming external API in custom Task UI: https://blogs.sap.com/2020/09/08/calling-external-api-in-custom-task-ui-of-workflow-in-cloud-foundry/
Hi Archana,
I was able to resolve this last week; Thanks for the informative blogs.
Wanted to know is there a possibility to autocomplete a task if the User doesn't approve or reject the task within a specified period? How can we trigger autocomplete after a specified period?
Can you please share the steps or a blog link for this?
Regards,
Karan
You can make it autocomplete after specified period using the timer boudary event. Just set the timer and out of that event make a call that will complete the task.
Hi Vladimir,
Can you please elaborate? I do not see the time boundary event; I have Start, Intermediate Message, Intermediate timer, End and Terminate End Event.
Can you share the steps; if any?
Regards,
Karan
Hi Archana,
I've followed this post https://blogs.sap.com/2020/09/10/create-workflow-mtar-application-with-custom-ui-using-business-app-studio/ to create a custom UI for workflow application.
But for me the view of my custom ui is not rendering on the detail page of the workflow screen.
Could you please help like what could be the issue?
Regards,
Abhishek
It is difficult to help with the information you provided. Open the developer console and send across the error you getting.
Console:
If you see the message, it clearly says 403 - Forbidden. Which means you are using APIs where you do not have the needed privileges.
Hi Abhishek Sharma ,
if you followed my tutorial, and you see this screen, you are done. This is what you should see.
The UI5 application used as in a blog is simple UI5 page without any content - just with page and title (look into xml view).
If you want to proof that - add some input field or label into that UI5 view and you should see it there.
Regarding the 403 error in your console - it is just call for OAuth token - the framework make both GET and HEAD calls for that and the WF API does not allow HEAD requests. Check that this 403 request is made with HEAD operation.
But as I said before - you made nothing wrong and this is what you should see as a result of that tutorial.
Hi Vladimir,
Thanks for your response and yes i have followed your tutorial.
But If you look closely to the screenshot that i have provided, ui5 view is not rendering properly, you can see the "title bar" of the view but "title" is missing there.
Furthermore, i have also added some inputs and labels in my view but they are not visible on the screen.
Regards,
Abhishek.
There is error in My Inbox app, that this title is rendered under master view when displayed in smaller resolutions. You can see that error also in a comment of Koray Yersel under this same blog. He found that error also.
Hi Vladimir,
You are right, title was under master view, but what causing it at the first place?
Regards,
Abhishek
But i don't know which role i'm missing. I followed the documentation as it is.
Network tab:
Only users who have the WorkflowParticipant role assigned are permitted to access these Inbox APIs. Just check if you have the needed roles.
Hi Archana,
I'm facing the same issue what Koray Yersel was facing.
Title was under the master view of the Inbox Application. Do you know how to resolve this?
Regards,
Abhishek.
Hi Archana. , Vladimir Balko ,
I have posted my query here; Can you please suggest a solution
https://answers.sap.com/questions/13182260/boundary-timer-event-along-with-service-task-in-sc.html
Regards,
Karan
Hi! Thanks for this tutorial
How do I create a destination to access the workflow developed in CF?
Or what is the URL to access the workflow that was deployed to CF?
Regards
Hi,
workflow deployed (hosted) on cloud foundry have its API in api.sap.com - https://beta.api.sap.com/package/SAPCPWorkflowAPIs/overview
Hello Archana Shukla,
Thank you for posting this wonderful blog.
I would like to ask you a question.
If I want to get the value entered in the input box of the view file, for example, "Full Name: John Dilbert" in the image below, and pass it to Component.js, how can I do that?
I would like to pass the value retrieved from the view file to Component.js and pass it as json to the workflow context, so I would like to include it in the yellow underline in the image below.
I would appreciate it if you could tell me how I can achieve this.
Sincerely,
Kai Umeki
Hello Kai,
First check the workflow context for any available instance from Workflow Instance application, and see if the context already has the Full Name attribute because if the information is entered as Task UI then you must already be storing it in the workflow context variable, else you can get it from the view model.
Dear Archana,
Thank you for your reply,
Thanks to you, I realized that the workflow context already exists as a model.
Successfully, I was able to get the value of the workflow context.
Thank you very much for your help.
Regards,
Kai Umeki
Hello Archana,
Wonderful blog!
I would appreciate if you could please let me know how is data from start forms handled in Workflows. Can I store the data somewhere?
Hello Kajal,
Workflow starts with the entire Start Form Data as the workflow context. For Example, say your Form has 3 fields Name, Address and Contact with context path like ${context.PersonalDetails.Name} etc, then your workflow is started with initial context as you have defined in the Context Path like {PersonalDetails : {Name: <as filled in the form>}, Address : <as filled in the form>} }etc.
Regards,
Archana
Hello Archana!
Thankyou very much for the response.
Regards,
Kajal
Hi Archana,
i tried so long adding Custom UI for User Task. For HTML5 Module it works fine but with outstanding HTML App i got this error in console:
Cannot create component......ffor smart template rendering. Showing standard task in the detail screen as a fallback: failed to load 'd../..../...../Component.js' from /...f/Component.js: 500 - Internal Server Error -
The app on its own runs without problems from Cloud.
What could cause this problem - I´m not on trial account.
BR Sudhir
500 internal server error comes when Component.js is not able to load due to various reasons. (a) Are you using any API call, then check the xs-app.json if you have used right routes. Verify the steps mentioned in the document carefully to ensure all the steps are followed. (b) Are you using MyInbox application from launchpad or portal? If you are using Launchpad then you must be using SAP Managed app-router for you application (follow the steps here)
ok, and what if i use the portal?
how can i see if i use launchpad or portal, i thought there is no launchpad anymore?!
Check the entitlements in your SAP BTP account.
Hi Archana. ,
I am using my inbox application from launchpad and i am only getting default screen with Title ,whatever changes i make in the view is not getting reflected in the usertask in my inbox.
This is insufficient information to help. Check in Developer console what is the problem. If the Component.js is not loading then it could be due to many reasons. Check my responses above.
Hi Archana Shukla,
I want my user task to be approved by a group of people. I want my task to wait till every member of the group approves it. But as of now by default if any one user of the group member approves the task then the task is getting processed. Any idea, how should I do that?
Hi Megha,
I guess you'll have to create multiple instances of the user task (e.g. by adding parallel gateways with multiple outgoing paths) where you assign the individual users. Usually in an approval process, an object only needs to be approved by one potential approver which is why there is no option to wait for all potential owners. Best would probably be to split this into groups for several tasks (e.g. Key account manager, sales approver, marketing approver...) and have each of those groups approve it
Hi Archana.
Thanks for the blog in detail. I have followed the steps however I am getting the below error. Can you please help me understand the issue?
Thanks in Advance!
Hello Lalit,
smart template based UI5 application is not supported with MyInbox of SAP BTP workflow
Hi Archana,
I have the same error but we are not using any smart template. we have a simple form in the view. The component.js is not getting appended with the cloud service name i used in the UI5 MTA project. When i append the cloud service manually to the URL it works fine.
Thanks and Regards,
Sridhar
Hi Archana. ,
How can i resolve this as i am not expert in UI and followed your blog end-2-end.
error
Hello!
I have the same problem:
Log-dbg.js:452 2022-01-31 10:09:55.435100 Cannot create componentppg.customUIfor smart template rendering. Showing standard task in the detail screen as a fallback: failed to load 'ppg/customUI/Component.js' from /ppgcustomUI/Component.js: 404 - Not Found -
I made according to your instructions and I use a Launchpad Service.
What could be the problem?
Hello,
Were you able to resolve this?
I also have a problem like this and would like to know
As I understood from the standard Inbox custom form does not work, I corrected mta.yaml so that this form was launched as if locally from the application and after that the task icon appeared in my application and the form worked
Great blog, Thanks so much Archana.
I few items that tripped me up.
With all these it seems to work pretty well.
My biggest issue now is trying to develop the UI in BAS locally. Using any of the preconfigured NPM scripts don't seem to work as they fail to find startupparameters. Makes sense as the inbox would supply these, but failing to come up with a way to mock this up so I can fine tune my screen prior to deployment. If anyone has any ideas I would love to hear them.
Thanks again,
Clark