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:

1. Get Task Model Data.

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

3. Update UI Context Model with the Task Model Data.

4. Create task action buttons to complete task.
   • Task completion operation will call workflow user task APIs.

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

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

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

• starting workflow from custom task UI
• how to add start workflow custom UI as a tile in Portal Fiori Launchpad
• calling external API from custom task UI