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.

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.

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