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

• how to start workflow from custom application
• how to add start workflow custom UI as a tile in Portal Fiori Launchpad,
• how to use custom task UI as user task in your workflow
• how to call external service in the custom task UI