Technical Articles
Part 1B: Using your Custom HTML5 application as User Task in Workflow
In this part of the blog, you will see how you can integrate your SAPUI5 application as Task UI in workflow.
Before we start the learning, there are few things you must know about the user task of SAP Cloud Platform Workflow.
The task associated with user-task activity in the workflow are available under the Tasks list in My Inbox application. The user interface configured for the user task is rendered as task UI when an end user opens the task in My Inbox. Application developer is, thus, given the flexibility to integrate any custom UI with the user task of workflow
This means that your existing custom application needs to be modified so that it can (a) access the task-data, (b) bind the task data with the UI elements of the application and (c) implement code for the task actions like complete, cancel etc.
Let us now learn how can you do that.
-
- Open the SAP Web IDE Full-Stack.Refer section Part 1A to ensure the you open with correct URL parameter
Note: Ensure that you have Workflow Editor feature enabled in the Web IDE.Follow the guide to do so:
https://help.sap.com/viewer/f63bbdc234ce4211ab2cdb44564a0acd/Cloud/en-US/5e058cf1333b4e18bfa6431a52e991d3.html - Create a new Workflow Project if you do not have one.Follow the guide to do so:
https://help.sap.com/viewer/f63bbdc234ce4211ab2cdb44564a0acd/Cloud/en-US/2b6375d9a80945ff852142b9543ff1e1.html.If you already have a workflow project, then you can create a new workflow in <your project>/workflows folder - Click on the start event and from the speed buttons, select User Task
- Select the User Task and configure the task from the User Properties sectionIn General section, provide the name of the task
- Open the SAP Web IDE Full-Stack.Refer section Part 1A to ensure the you open with correct URL parameter
In Details section, fill in the following details of the user interface that would be seen when the task is opened in My Inbox.
Subject
This is the name of the task that would be seen in list of tasks when this task is available in the My Inbox.
Receivers
You can give comma-separated users or a group of users who will be able to see these tasks in their My Inbox. This is a way to control the access of confidential information and enables the access of information to the right set of people.
User Interface
Enter the details of the SAPUI5 application that you want to show when this task is opened in My Inbox.
HTML5 App: Name of the HTML5 application [Mandatory Field]
Component URL: Location of <Component.js> in the HTML5 project.
SAPUI5 Component: SAPUI5 component name without <.component> suffix
If you have doubts, then refer Step9 in the official documentation:
https://help.sap.com/viewer/f63bbdc234ce4211ab2cdb44564a0acd/Cloud/en-US/5e058cf1333b4e18bfa6431a52e991d3.html
Note: Carefully enter the required details as this is most crucial part of the configuration, especially the Component URL which is non-mandatory field.
With this, you are done with the User Task configuration.
- Click on the empty space in the editor and change the Workflow Properties as shown.This means that the subject of the workflow, when seen from Workflow Monitoring application, would pick up the FirstName and LastName fields from the workflow context
- Finally, deploy the workflow
Now let us see how the user task looks in the My Inbox application.
- Open the Workflow Monitor App from Fiori Launchpad.If you do not know the URL, then open the Fiori Launchpad URL from the Workflow service – Overview page in the cockpit
- Click on Workflow Definitions tile, and you will see your workflow
- Click on Start New Instance and enter the following initial payload to start the workflow
{ "user":{ "FirstName":"Kate", "LastName":"Beckett", "city":"London", "country":"United Kingdom" } }
- Click on Show Instances button to see all the running instances of the workflow.Observe the name of the workflow. The first-name (i.e. Kate) and last-name (i.e. Beckett) is picked from the initial payload that is being sent while starting the workflow.Also notice the EXECUTION LOG, you see that a new task is created in MyInbox of list of recipients
- Logon to the My Inbox with the recipient username and password.You can find the tile of MyInbox app in the Fiori Launchpad URL seen in the workflow overview page (-in SAP Cloud Platform cockpit-)
- Open MyInbox and click on the task
But why did the context data did not get loaded?
Let us now see how to update the user interface to show the task data and workflow context in Part 1C: Working with Task APIs in your Custom HTML5 application
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
Hi Archana,
Nice Bog. I am trying to do this however getting error while deploying the Workflow.
Error says:"User does not have sufficient Privileges"
Category: Deployment Error.
I have assigned WorkflowDeveloper and WorkflowAdmin role to my user id in HCP account.
Still i am getting error while deployment, is there any other specific role required?
Regards,
Dhruv
Hello Dhruv,
You have required permissions for Workflow service. Can you check if you have the Developer role at platform level. For that, open the Members tab in SAP Cloud Platform cockpit and ensure that you have Developer role assigned to you.
Regards,
Archana
Hello Archana,
Thanks, I found the Members Tab
Regards,
Dhruv
Hello Dhruv,
If you are using trial account then you already have the suggested roles and it should work.I actually have only WorkflowDeveloper role and still the deployment works. The permission take sometime to get activated. Wait for sometime after you change the roles and then try deploying again - it should work. Can you confirm if you still have the problem.
Hi Archana,when I deploy my workflow, I got the error:
Error:Mandatory attribute(s) 'sourceRef' on element 'SequenceFlow1' not available. Make sure that it has been provided.
Category: Deployment Error.
I have assigned WorkflowDeveloper and WorkflowAdmin role to my user id ,and I have done all the steps that are same with your guide,I don't know what to cause this error,can you help me?
Hello,
You seem to have a Sequence Flow that is not connected to the StartEvent or you may also have 2 start events in your workflow model. There will a circular icon on top right of your workflow editor, click that icon - to see if you have any unconnected nodes.
This error comes when you have any unconnected tasks or events in your workflow.
If this does not solve then delete the first sequence between StartEvent and User Task and connect again. This would solve the issue.
Regards,
Archana
Thanks for helping.
I have solved this problem.
But I got a new problem.....
After I deploy my workflow ,I can find it in Monitor Workflow and Start New Instance, then Show Instance,but I can't find it in My Inbox.
Appriaciate for your help!
This is because of the User that you have given as part of configuration of User Task in workflow. The user task is visible in MyInbox of only those users who are configured in User Task. Check the user again!
Hi Archana,
this is the detail:
In fact, I'm trying to send this task to myself, as your reply,I have Configure these things(like the image),but I still can't see the workflow in My Inbox
Best Regards,
Junyi Li
Check if you have WorkflowParticipant role assigned.
yes,I assigned all roles for my user
Thank you again,
I've soluted the problem,now I can send task to myself, but can't send mask to other user. I'm sure I have assigned all the roles for him.
Best Regrads
What was the issue?
If you working on trial then you cant send task to another user and trial doesnot allow members to be added.
Hi Archana,
tks for your patience.
Hi Archana,
I followed your steps but in MyInbox I am not getting the Personal Information page. Can you please help me on this.
Thanks,
Bhavya
Hello Bhavya,
Cause for the same could be that you have not binded the XML elements correctly with the workflow context. Some suggestions: (a) Check the workflow context path for the personal information (b) Check the bindings in the XML view
You can share your project screenshots for me to better understand the problem
Hello,
You could tell me if you solved the error, I'm having the same problem and I have not been able to solve it.
Thanks,
Luis
Hello Luis,
What error you getting? Also let me know at what step you getting the error ...
Hi thank you very much for answering, I do not know in any way I was not putting webapp in the component URL.and that was the mistake.
thank very much. regards
Good that you figured that out. Let me know if you have any further queries.
hi archana
i did everything but my form is not reflecting in MyInbox
can u plz help me in this
Hello Sam,
It is very simple actually, but just with this screenshot I could not help you as to what you could have missed. You need to send me email with how you have modelled your project and I need other implementation and trace details to help you. With the error it seems that you have not attached you task correctly with the user interface and the mapping is not done correctly. You can open your browser developer console and check for the error
Regards,
Archana
hi archana
in console its showing me that "LOAD_FORM_DEFENITION" 404 NOT FOUND
i think its not able to map the form
If you are using Workflow Forms then you need to deploy the form as well explicitly. It seems you have used the forms in workflow and have just deployed the workflow.
https://help.sap.com/viewer/f85276c5069a429fa37d1cd352785c25/Cloud/en-US/36834f05702c45b3ad11b2ca532f37b5.html
Regards,
Archana
Hi Archana,
Thanks for the blog. It is quite informative.
I followed given steps and I am able to see my detail page in My Inbox app for the first time.
But when I click on Refresh icon from Master Page, it gives error and detail page changes like below:
Initially:
After Refresh from Master Page:
Error in console:
Cannot create componentcom.< path >Detailfor smart template rendering. Showing standard task in the detail screen as a fallback: Cannot read property 'task' of undefined
Can you please help.
Regards,
Saurabh
Hello Saurabh,
I think that you have not associated your user interface correctly with the workflow task because it is not able to load the task. If you are not sure, then use Create Workflow Task UI option which is not available while modelling user interface for task. You can also explore Form option
https://help.sap.com/viewer/f85276c5069a429fa37d1cd352785c25/Cloud/en-US/686fc129aa594b75aee879bde0af29ba.html
hola archana, tengo un problema.
pasa que he creado todo tal cual como esta en tu blog aparte, agregue la congiguracion del destino en el archivo neo-app.json, pero no se llega a visualizar la aplicacion en el workflow.
ad
junto una imagen con el error que sale, por favor una ayuda. Gracias
¿Pudiste arreglar este tema?. A mi me sucede lo mismo
I´m having the same issue as Juan Zegarra here, the app is a very simple app that just display a text, no external services used and I´m just testing with this basic app the user task within a workflow. Any help will be appreciated
Anybody know how to solve this issue?
No. Do you fix this issue?
Any luck guys? im also facing same issue but i can not find solution for this.
I think this will be caused by the app router configuration in the mta, please check module xxx-destination-content. The destination default set for instance.
Change parameters > content > instance to subaccount and i hope your problem is fixed. The sample code is added to the MTA using Yeoman gen "Routing Config".
If you already deployed the application to CF, first undeploy, build and deploy again. Note that the policy for existing destinations is set to ignore. When needed change to update.
Hi Archana Shukla,
Thanks for the blog. Please have a look on the issue I am facing and assist me to walk through the issue.
Any hints, documentations etc. how to debug or solve that issue? I have no clue how to find the source of the problem.
https://answers.sap.com/questions/13151375/enhanced-workflow-application-custom-task-ui-issue.html
Thanks,
Mujeeb
Hi! When I define the task name ("Say Hello") in the workflow, that name appears in my inbox. Would it be possible to use i18n to internationalize the task name ("Say Hello") in other languages in my workflow?
Hello Tiago,
We support multiple language. You can read here to know what are they and how to achieve it
Thanks!
this link talks about the supported languages, how should I do to apply i18n in the task subject?
thanks in advance
subject i18n
Hello Tiago,
Aah ok, Translation for workflow is in roadmap.
Thanks! Was there any palliative solution to this need?
Hello Tiago Moises ,
Translation is now available for selected user task properties. (read documentation for more information)
Hello Archana Shukla,
Thank you very much for posting this wonderful blog.
I am trying to display UI5 application as a user task with the help of this blog. And I was able to display the user task, but I can't scroll the screen of that user task.
I would appreciate it if you could tell me what to do.
Sincerely,
Kai Umeki
Hello Kai,
you have to use right UI5 control either an App or Page and it will automatically take care of scrolling.
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
Are you in Neo or CF?
I am on CF
Then you should use another blog: https://blogs.sap.com/2020/08/31/enhancing-custom-application-as-workflow-task-ui-in-cloud-foundry/
Hey Archana Shukla,
Excellent blog!
Thanks for sharing!
I tried carrying out the steps in the blog but the HTML5 application is not being rendered in the My Inbox User Task. Could you please guide as to where am I going wrong.
Here's my HTML application:
This is the My Inbox:
Hey Archana Shukla,
Excellent blog!
Thanks for sharing!
I tried carrying out the steps in the blog but the HTML5 application is not being rendered in the My Inbox User Task. Could you please guide as to where am I going wrong.
Here's my HTML application:
Punna Rao Vallabhapurapu - Same issue in my App as well ... Unable to resolve.
thanks,
Shivam