The Visual Builder Cloud Service Blog

Processes in VBCS Applications - Adding Task Buttons to a Business Object Edit Page

John Jullion-Ceccarelli
Product Manager

This blog is part of the series Visual Builder Cloud Service Learning Path. In a previous lesson, we designed the process we will use in our application. If you don't have it, you can download the process and the VBCS application and import them into your environments. We assume that you've named the process Expense Approvals and have already started the process in Test mode as described in the first chapter.

In this chapter, we will add buttons to the bottom of the page for each of the task actions that are available to the current user for the current expense report record. 

Getting the List of Tasks

The first thing we will do is add an action to the loadExpenseReport action chain that fetches the list of tasks for processDefId that is stored with this Expense Report record. We will use a Type from Endpoint to create a type and variable that match the REST payload response for storing the information in the page's model.

When designing this functionality, it's best to load a record in the Page Designer that has current tasks. To do this, create a new Expense Report (this will also launch an ExpenseApproval process), then edit this record in the Page Designer by switching to Live Mode and clicking it in either the list of Expense Reports or the Task List.

  1. With EditExpenseReport open in the Page Designer, click the Variables tab. Then click Types. 
  2. Click the button to add a new type from endpoint.
  3. Select Process Objects > tasks > GET tasks and click Next.
  4. Select the top-level Response to select the entire response. You can omit the []links if you like.
  5. Click Finish.
  6. Switch the Variables tab. Add a new variable called tasks of type getTaskCollection.
  7. Switch to the Actions panel and open loadExpenseReportChain.
  8. Drag a Get Task Collection action under Assign Variables expenseReportRecord.
  9. In the Property Inspector, click alias under Input Parameters. 
  10. Enter "ExpenseApproval" for the alias.
  11. Map Page > expenseReportRecord > processDefId on the left to processInstanceId on the right. Click Save.
  12. Drag an AssignVariables action below the Get Task Collection. In the Property Inspector, click Assign next to Variables. Map getTaskCollection1 > content on the left to Page > tasks on the right. 
  13. Close the action chain editor tab.

Adding the Task Buttons

To dynamically bind the buttons, we're going to do the following:

  • Add an oj-bind-if that checks that the number of tasks is greater than zero. We're going to assume that the user will always only have one task assigned and so just hard-code the first result in the array of tasks that the REST service returns.
  • Add a for-each loop to loop over all of the tasks. We will filter out system tasks
  • Add a button in the template of the for-each loop for performing the task.

Note that for the sake of simplicity we're leaving out some things we'd probably want to do, like save the record before executing the task.

  1. Switch back to the Page Designer for the EditExpenseReport page.
  2. Drop an If component in the toolbar next to the Save and Cancel buttons.
  3. In the Property Inspector, set Test to [[ $page.variables.tasks.items.length > 0]]
  4. Drop a For Each component inside the Bind-If component. Note it may be easier for you to select the right drop target by dragging and dropping into the Structure pane rather than into the Page Designer.
  5. In the Property Inspector, set Data to [[$page.variables.tasks.items[0].actions.filter(a => a.type === 'Custom')]] and As to task.
  6. Switch to the Source View and manually enter an oj-button in the template for the oj-bind-for-each element. (A bug prevents you from dropping the button using the Design view.)
  7. Switch back to the Design view. In the Page Structure view select the button so that you can see its properties in the Property Inspector.
  8. In the Property Inspector, set the Text to {{task.data.label}}
  9. Still with the Button selected, open the Events tab of the Property Inspector and click New Event -> Quick Start: 'click'. The tab with the new action chain opens. But before we can configure the action chain, we have to configure our input variables to hold the information we need.
  10. In the Action Chain editor, switch to the Variables view and create two string variables named actionId and taskId. Mark both as input variables in the Property Inspector
  11. Now let's pass in the info from the button as part of the click event. Open the EditExpenseReport page again, click the Events tab, and select the button click action that you generated with the quickstart.
  12. In the Property Inspector, click Assign for the Input Parameters. Map actionId to {{ $current.data.id }} and taskId to {{ $current.data.taskId }}. Click Save.
  13. Go back to the action chain editor for the ButtonClickAction1 and drop a Perform Task action onto the action chain.
  14. In the Property Inspector for the Perform Task action, click Assign for Parameters. Assign actionId on the left to id on the right. Assign taskId on the left to taskId on the right. Click Save.
  15. Drop a Navigate action under the Perform Task action. In the Property Inspector, click Select Target > Peer Page > main-start.
  16. Test the application by creating a new expense report, checking for the Approve task in the task list, then going to its Edit screen and performing the action with the buttons.


Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.