Skip to Content
Technical Articles

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.

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

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

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

 

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

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

App Title App ID Intent Navigation
Workflow Instances

com.sap.bpm.monitorworkflow

 

bpmworkflowmonitor-DisplayInstances
My Inbox cross.fnd.fiori.inbox WorkflowTask-DisplayMyInbox

 

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

37 Comments
You must be Logged on to comment or reply to a post.
  • Hi Archana,

    thanks for the CF workflow blogs. They were really helpful. I've just noticed that My Inbox > Task View behaves funny with different resolutions / fullscreen. Did you had the same problem too? I couldn't see anything relevant in your source code. In our case the task view content is partially cut out. Please see the attachments (in second screenshot title is cut out).

    Thanks and regards,

    Koray

     

  • HI Archana,

    no actually I am using a custom UI5 view. The code is based on your example. That's why I posted my question to this blog post. I will raise an incident.

    Regards,

    Koray

  • Hi Archana,

    How can I add a custom/external HANA service built using CAPM in xs-app.json?

    I am getting an error when using additional route; the custom Inbox UI doesn't load.

    Any idea what could be the issue?

    Regards,

    Karan

    • Hello Karan,

      Have you checked my blog on consuming external API in custom Task UI: https://blogs.sap.com/2020/09/08/calling-external-api-in-custom-task-ui-of-workflow-in-cloud-foundry/

      • Hi Archana,

         

        I was able to resolve this last week; Thanks for the informative blogs.

         

        Wanted to know is there a possibility to autocomplete a task if the User doesn't approve or reject the task within a specified period? How can we trigger autocomplete after a specified period?

         

        Can you please share the steps or a blog link for this?

         

        Regards,

        Karan

        • You can make it autocomplete after specified period using the timer boudary event. Just set the timer and out of that event make a call that will complete the task.

          • Hi Vladimir,

            Can you please elaborate? I do not see the time boundary event; I have Start, Intermediate Message, Intermediate timer, End and Terminate End Event.

            Can you share the steps; if any?

            Regards,

            Karan

  • Hi Archana,

    I've followed this post https://blogs.sap.com/2020/09/10/create-workflow-mtar-application-with-custom-ui-using-business-app-studio/ to create a custom UI for workflow application.

    But for me the view of my custom ui is not rendering on the detail page of the workflow screen.

    Could you please help like what could be the issue?

    Regards,

    Abhishek

    /
    • Hi Abhishek Sharma ,

      if you followed my tutorial, and you see this screen, you are done. This is what you should see.

      The UI5 application used as in a blog is simple UI5 page without any content - just with page and title (look into xml view).

      If you want to proof that - add some input field or label into that UI5 view and you should see it there.

       

      Regarding the 403 error in your console - it is just call for OAuth token - the framework make both GET and HEAD calls for that and the WF API does not allow HEAD requests. Check that this 403 request is made with HEAD operation.

       

      But as I said before - you made nothing wrong and this is what you should see as a result of that tutorial.

      • Hi Vladimir,

        Thanks for your response and yes i have followed your tutorial.

        But If you look closely to the screenshot that i have provided, ui5 view is not rendering properly, you can see the "title bar" of the view but "title" is missing there.

        Furthermore, i have also added some inputs and labels in my view but they are not visible on the screen.

        Regards,

        Abhishek.

  • /
  • Hi! Thanks for this tutorial
    How do I create a destination to access the workflow developed in CF?
    Or what is the URL to access the workflow that was deployed to CF?

    Regards

  • Hello Archana Shukla,

    Thank you for posting this wonderful blog.

    I would like to ask you a question.

    If I want to get the value entered in the input box of the view file, for example, "Full Name: John Dilbert" in the image below, and pass it to Component.js, how can I do that?

     

     

    I would like to pass the value retrieved from the view file to Component.js and pass it as json to the workflow context, so I would like to include it in the yellow underline in the image below.

    I would appreciate it if you could tell me how I can achieve this.

    Sincerely,

    Kai Umeki

    • Hello Kai,

      First check the workflow context for any available instance from Workflow Instance application, and see if the context already has the Full Name attribute because if the information is entered as Task UI then you must already be storing it in the workflow context variable, else you can get it from the view model.

      • Dear Archana,

        Thank you for your reply,

        Thanks to you, I realized that the workflow context already exists as a model.
        Successfully, I was able to get the value of the workflow context.
        Thank you very much for your help.

        Regards,

        Kai Umeki

  • Hello Archana,

    Wonderful blog!

    I would appreciate if you could please let me know how is data from start forms handled in Workflows. Can I store the data somewhere?

    • Hello Kajal,

      Workflow starts with the entire Start Form Data as the workflow context. For Example, say your Form has 3 fields Name, Address and Contact with context path like ${context.PersonalDetails.Name} etc, then your workflow is started with initial context as you have defined in the Context Path like {PersonalDetails : {Name: <as filled in the form>}, Address : <as filled in the form>} }etc.

      Regards,

      Archana

  • 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

    • 500 internal server error comes when Component.js is not able to load due to various reasons. (a) Are you using any API call, then check the xs-app.json if you have used right routes. Verify the steps mentioned in the document carefully to ensure all the steps are followed. (b) Are you using MyInbox application from launchpad or portal? If you are using Launchpad then you must be using SAP Managed app-router for you application (follow the steps here)