Skip to Content
Technical Articles
Author's profile photo Archana Shukla

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.

    1. 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

    2. 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

    3. Click on the start event and from the speed buttons, select User Task
    4. Select the User Task and configure the task from the User Properties sectionIn General section, provide the name of the task

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.


  1. 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
  2. Finally, deploy the workflowNow let us see how the user task looks in the My Inbox application.
  3. 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
  4. Click on Workflow Definitions tile, and you will see your workflow
  5. 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"
    }
    }​

     

  6. 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

  7. 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-)
  8. 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

 

Related Blogs on Cloud Foundry Environment

Assigned Tags

      46 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dhruv Shah
      Dhruv Shah

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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

      Author's profile photo Dhruv Shah
      Dhruv Shah

      Hello Archana,

       

      Thanks, I found the Members Tab

      Regards,

      Dhruv

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      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?

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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

       

       

      Author's profile photo Former Member
      Former Member

       

      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!

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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!

       

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Check if you have WorkflowParticipant role assigned.

       

      Author's profile photo Former Member
      Former Member

      yes,I assigned all roles for my user

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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.

       

      Author's profile photo Former Member
      Former Member

      Hi Archana,

      tks for your patience.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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

      Author's profile photo luis andres hincapie
      luis andres hincapie

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Luis,
      What error you getting? Also let me know at what step you getting the error ...

       

      Author's profile photo luis andres hincapie
      luis andres hincapie

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Good that you figured that out. Let me know if you have any further queries.

       

      Author's profile photo Sam Hilton
      Sam Hilton

      hi archana

       

      i did everything but my form is not reflecting in MyInbox

      can u plz help me in this 

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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

       

      Author's profile photo Sam Hilton
      Sam Hilton

      hi archana

      in console its showing me that "LOAD_FORM_DEFENITION" 404 NOT FOUND

      i think its not able to map the  form

       

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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

      Author's profile photo Saurabh Parikh
      Saurabh Parikh

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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

      Author's profile photo Juan Zegarra
      Juan Zegarra

      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.

      adjunto una imagen con el error que sale, por favor una ayuda. Gracias

      Author's profile photo Francisco Jhonathan Rodriguez D
      Francisco Jhonathan Rodriguez D

      ¿Pudiste arreglar este tema?. A mi me sucede lo mismo

      Author's profile photo ROBERTO ISAAC FRANCO
      ROBERTO ISAAC FRANCO

      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

       

      Author's profile photo Werner Aldana
      Werner Aldana

      Anybody know how to solve this issue?

      Author's profile photo Francisco Jhonathan Rodriguez D
      Francisco Jhonathan Rodriguez D

      No. Do you fix this issue?

      Author's profile photo Mujeeb Chowdry
      Mujeeb Chowdry

      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

      Author's profile photo Tiago Moises
      Tiago Moises

      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?

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Tiago,
      We support multiple language. You can read here to know what are they and how to achieve it

      Author's profile photo Tiago Moises
      Tiago Moises

      Thanks!
      this link talks about the supported languages, how should I do to apply i18n in the task subject?

      thanks in advance

      subject%20i18n

      subject i18n

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Tiago,

      Aah ok, Translation for workflow is in roadmap.

      Author's profile photo Tiago Moises
      Tiago Moises

      Thanks! Was there any palliative solution to this need?

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Tiago Moises ,
      Translation is now available for selected user task properties. (read documentation for more information)

      Author's profile photo Kai Umeki
      Kai Umeki

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Kai,
      you have to use right UI5 control either an App or Page and it will automatically take care of scrolling.

      Author's profile photo Sudhir Kancherla
      Sudhir Kancherla

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Are you in Neo or CF?

      Author's profile photo Sudhir Kancherla
      Sudhir Kancherla

      I am on CF

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Then you should use another blog: https://blogs.sap.com/2020/08/31/enhancing-custom-application-as-workflow-task-ui-in-cloud-foundry/

      Author's profile photo Kajal .
      Kajal .

      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:

       

      Author's profile photo Punna Rao Vallabhapurapu
      Punna Rao Vallabhapurapu

      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: