Skip to Content
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.

    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:

    2. Create a new Workflow Project if you do not have one.Follow the guide to do so: 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.

This is the name of the task that would be seen in list of tasks when this task is available in the My Inbox.

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:

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
    "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

You must be Logged on to comment or reply to a post.
  • 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?



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


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




  • Hi Archana,


    I followed your steps but in MyInbox I am not getting the Personal Information page. Can you please help me on this.




    • 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 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



      • /
        • 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.



  • 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:


    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.




    • 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

  • 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

  • /
  • 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 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.


    Kai Umeki

  • 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

  • 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: