Skip to Content
Technical Articles
Author's profile photo Archana Shukla

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

Assigned Tags

      50 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jimmy Arnold Moreno Nuñez
      Jimmy Arnold Moreno Nuñez

      Hi Archana.

      How can I get the response or context user task after user task if one user approve or reject a request?

      Thanks in advance.

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Jimmy,

      Check step 6, _completeTask method captures that decision of the user tasks and passes it on the workflow context for further processing.

      Author's profile photo Jimmy Arnold Moreno Nuñez
      Jimmy Arnold Moreno Nuñez

      In my case, I created the buttons inside a form decision. How can I call that function?

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      You can refer the documentation how to access decisions from the form
      https://help.sap.com/viewer/e157c391253b4ecd93647bf232d18a83/Cloud/en-US/9fd9395339e94143ac9ce9e693b06bd1.html?q=access%20decision

       

      Author's profile photo Koray Yersel
      Koray Yersel

      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

       

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Koray,

      I haven't seen this but it's clearly an issue. Can you raise the ticket on LOD-BPM-WFS. I think you are using Forms.

      Author's profile photo Koray Yersel
      Koray Yersel

      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

      Author's profile photo Hamza Masood
      Hamza Masood

      Hi,

      I have the same problem. Have any resolutions been found on this issue?

      Thanks,

      Regards,

      Hamza Masood

      Author's profile photo Hamza Masood
      Hamza Masood

      Hi,

      The solution for me was to remove the <shell> tag in my view.xml.

      Regards,

      Hamza Masood

      Author's profile photo Karan Bahl
      Karan Bahl

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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/

      Author's profile photo Karan Bahl
      Karan Bahl

      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

      Author's profile photo Vladimír Balko
      Vladimír Balko

      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.

      Author's profile photo Karan Bahl
      Karan Bahl

      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

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      It is difficult to help with the information you provided. Open the developer console and send across the error you getting.

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Console:

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      If you see the message, it clearly says 403 - Forbidden. Which means you are using APIs where you do not have the needed privileges.

      Author's profile photo Vladimír Balko
      Vladimír Balko

      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.

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      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.

      Author's profile photo Vladimír Balko
      Vladimír Balko

      There is error in My Inbox app, that this title is rendered under master view when displayed in smaller resolutions. You can see that error also in a comment of Koray Yersel under this same blog. He found that error also.

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Hi Vladimir,

      You are right, title was under master view, but what causing it at the first place?

      Regards,

      Abhishek

       

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      But i don't know which role i'm missing. I followed the documentation as it is.

      Network tab:

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Only users who have the WorkflowParticipant role assigned are permitted to access these Inbox APIs. Just check if you have the needed roles.

      Author's profile photo Abhishek Sharma
      Abhishek Sharma

      Hi Archana,

      I'm facing the same issue what Koray Yersel was facing.

      Title was under the master view of the Inbox Application. Do you know how to resolve this?

      Regards,

      Abhishek.

      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Archana. , Vladimir Balko ,

       

      I have posted my query here; Can you please suggest a solution

      https://answers.sap.com/questions/13182260/boundary-timer-event-along-with-service-task-in-sc.html

      Regards,

      Karan

      Author's profile photo Tiago Moises
      Tiago Moises

      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

      Author's profile photo Vladimír Balko
      Vladimír Balko

      Hi,

      workflow deployed (hosted) on cloud foundry have its API in api.sap.com - https://beta.api.sap.com/package/SAPCPWorkflowAPIs/overview

      Author's profile photo Kai Umeki
      Kai Umeki

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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.

      Author's profile photo Kai Umeki
      Kai Umeki

      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

      Author's profile photo Kajal .
      Kajal .

      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?

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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

      Author's profile photo Kajal .
      Kajal .

      Hello Archana!

      Thankyou very much for the response.

      Regards,

      Kajal

      Author's profile photo Sudhir Kancherla
      Sudhir Kancherla

      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

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      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)

      Author's profile photo Sudhir Kancherla
      Sudhir Kancherla

      ok, and what if i use the portal?

       

      how can i see if i use launchpad or portal, i thought there is no launchpad anymore?!

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Check the entitlements in your SAP BTP account.

      Author's profile photo Keerthana Jayathran
      Keerthana Jayathran

      Hi Archana. ,

      I am using my inbox application from launchpad and i am only getting default screen with Title ,whatever changes i make in the view is not getting reflected in the usertask in my inbox.

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      This is insufficient information to help. Check in Developer console what is the problem. If the Component.js is not loading then it could be due to many reasons. Check my responses above.

      Author's profile photo Megha Chavare
      Megha Chavare

      Hi Archana Shukla,
      I want my user task to be approved by a group of people. I want my task to wait till every member of the group approves it. But as of now by default if any one user of the group member approves the task then the task is getting processed. Any idea, how should I do that?

      Author's profile photo Jakob Ruf
      Jakob Ruf

      Hi Megha,

      I guess you'll have to create multiple instances of the user task (e.g. by adding parallel gateways with multiple outgoing paths) where you assign the individual users. Usually in an approval process, an object only needs to be approved by one potential approver which is why there is no option to wait for all potential owners. Best would probably be to split this into groups for several tasks (e.g. Key account manager, sales approver, marketing approver...) and have each of those groups approve it

      Author's profile photo Lalit Goyal
      Lalit Goyal

      Hi Archana. 

       

      Thanks for the blog in detail. I have followed the steps however I am getting the below error. Can you please help me understand the issue?

      Thanks in Advance!

      Author's profile photo Archana Shukla
      Archana Shukla
      Blog Post Author

      Hello Lalit,

      smart template based UI5 application is not supported with MyInbox of SAP BTP workflow

      Author's profile photo Sridhar Rajagopal
      Sridhar Rajagopal

      Hi Archana,

      I have the same error but we are not using any smart template. we have a simple form in the view. The component.js is not getting appended with the cloud service name i used in the UI5 MTA project. When i append the cloud service manually to the URL it works fine.

      Thanks and Regards,

      Sridhar

      Author's profile photo Shivam Shukla
      Shivam Shukla

      Hi Archana. ,

       

      How can i resolve this as i am not expert in UI and followed your blog end-2-end.

      error

      error

      Author's profile photo Vitali Khvisevich
      Vitali Khvisevich

      Hello!

      I have the same problem:

      Log-dbg.js:452 2022-01-31 10:09:55.435100 Cannot create componentppg.customUIfor smart template rendering. Showing standard task in the detail screen as a fallback: failed to load 'ppg/customUI/Component.js' from /ppgcustomUI/Component.js: 404 - Not Found -

      I made according to your instructions and I use a Launchpad Service.

      What could be the problem?
      
                    
      Author's profile photo Edward Arcenal
      Edward Arcenal

      Hello,

       

      Were you able to resolve this?

      I also have a problem like this and would like to know

      Author's profile photo Vitali Khvisevich
      Vitali Khvisevich
      As I understood from the standard Inbox custom form does not work, I corrected mta.yaml so that this form was launched as if locally from the application and after that the task icon appeared in my application and the form worked
      Author's profile photo Clark Dennison
      Clark Dennison

      Great blog, Thanks so much Archana.

      I few items that tripped me up.

      1. Make sure you create a managed app router by right clicking on your mta file and picking a managed app router. If you don't do this you will continue to get the template generation error.
      2. I had to make sure the ID in my MTA matched the root folder name. When this was different the template generator failed.
      3. Make sure you add the parameter "enable-parallel-deployments: true" to your MTA or the deployment will fail.

      With all these it seems to work pretty well.

      My biggest issue now is trying to develop the UI in BAS locally. Using any of the preconfigured NPM scripts don't seem to work as they fail to find startupparameters. Makes sense as the inbox would supply these, but failing to come up with a way to mock this up so I can fine tune my screen prior to deployment. If anyone has any ideas I would love to hear them.

      Thanks again,

      Clark