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 a Task List that shows all of the currently active tasks for the logged in user.
VBCS contains a quickstart to populate a table with a list of tasks for the current user and drop-down of available actions for each given task. The tricky part is hooking up the task list to the correctly list information from the business object, like the expense request name, and to link to the correct Edit page for the business object record. We do this by storing the information we pass into the PCS business object in the properties of the tasks.
Configuring Tasks to Propagate Business Data
We're going to highjack some of the standard properties of the tasks to pass business object informaiton. (Note, in an upcoming release of PCS you'll be able to get fetch any PCS business object field with the list of tasks.)
- In PCS, open the ExpenseApproval process in the editor. Select the Approve Request task. Then click the menu icon and select Data Association.
- Map name and id from ExpenseApproval > Data Object > expenseReport on the left to title and longSummary from execData on the right. Then click Apply.
- Do the same for the Resubmit action.
- Save, publish, and test the process.
Adding the Task List to the Application
We will add the task list by just dropping a table in the mytasks page and hooking it up to a ProcessDataProvider. Then we'll use the quickstart to add the Task Actions buttons.
- In VBCS, open the Web Apps tab and click the mytasks page to open it in the Editor.
- Drop a table component on the page.
- In the Property Inspector for the table, choose the quickstarts tab and click Add Data.
- Choose Process Objects > task > GET tasks as the endpoint and click Next.
- Select the following columns:
- Expand the query parameters and select the alias parameter. In the field at the bottom of the editor, type in "ExpenseApproval". Make sure to include the quotation marks. Click Finish.
- Preview the application and create a few records. Your task list table will look something like this:
- Select the table in the Page Designer and switch to the Data tab in the Property Inspector. Reorder and rename the columns so that they say:
- Expense Report
- Created By
- Created On
- Drag and drop an Input Date component onto the Created On column in the Page Designer. The display switches to correctly display as a date.
Linking a Task to an Edit Page
Now we'll link the values in the Expense Report column to the correct Edit page for the expense report record.
- In the Page Designer, drag and drop a Hyperlink component onto the Expense Report column in the table. The values turn into links.
- Click any of the column hyperlinks to select them in the Property Inspector.
- In the Events tab click New Event > Quick Start: 'click'.
- Before you can hook up the action chain, we have to pass in the ID of the expense report. Remember in PCS we mapped that into the longSummary field of the tasks. The REST call to the GET /tasks returns a payload with a field called description, which contains the longSummary field from the task.
Go back to the my-tasks page and click the Events tab.
- In the Property Inspector, click key under Input Parameters.
- Select the key parameter in the right side of the dialog. In the field at the bottom of the type in $current.row.description. Click Save.
- Switch back to the HyperlinkClickAction tab. If you've closed it, you can find it in the Actions tab of the mytasks page.
- Drag a Navigate action onto the action chain. Click Select Target > Peer Page > EditExpenseReport.
- In the Property Inspector, click expenseReportId under Input Parameters.
- Map key to expenseReportId and click Save.
- Preview the mytasks page again. Click any of the links in the task list. The application navigates to the correct page.
Adding a Task Actions Button
- Select the task list table in the Page Designer.
- Open the Quick Starts panel of the Property Inspector and click Add Task Actions.
- Accept the default information and click OK. The Task Actions button is added above the list of tasks. Preview the page and select any task, then open the menu to choose from a list of actions to perform on the task.
In the next section, we look at how to add Task buttons to the Edit page itself.