#918 Exposing OIC Process Task Payloads in Visual Builder

I am still looking at the extend Opera use case - Move Reservation. I showed how to display Process task data in the last post. My effort there was very basic - try and fit in all the salient task details in the task name. You can check out the previous post here

So now I want to have the same approach as the OIC Worklist app - namely, a list of tasks with the ability to select a task and see its payload details. Once I've selected the task, I want to be able to add comments and either approve or reject the proposed move.

Essentially, I require the following api calls to OIC Process -

1. getTasks
2. getTaskPayload
3. addCommentToTask
4. updateTask

Now let's look at the anatomy of the first page - 

Here I have 2 tabs, one for Processes and one for Tasks. Let's look at the Tasks tab - the table shows my MoveReservation tasks, via -

and then select the relevant task fields.

Notice the button - View Task Details - this will retrieve the task payload from OIC process for the currently selected task. It will display the payload and allow the user to approve or reject the request. The user will also have the ability to add  comment to the task.

So essentially this page will require the 3 other api calls - getTaskPayload, updateTask and addCommentToTask. I have decided to create 3 service connections for these -

 

The highlighted one is for getting the task payload, as you can see, I did not change the default name; I did for the other 2.

Starting point was the OIC REST api docs - available here

 I checked out the Task apis and found - 

I used this to create the VB service connection - final step was to test the connection -

Note, the default format returned is xml - 

 

I get the json format by adding the header - 

I do the same in Visual Builder - 

I then create a type for this specific MoveReservation payload response -

I also create the other 2 service connections based on the following OIC Process apis - 

The REST api docs are comprehensive and include payload examples which one can use when testing the service connections in VB.

To approve a task - 

{

   "action":{"id":"APPROVE"} 

}

To add a comment to a task - 

{

  "commentStr":"This customer hates being moved",

  "commentScope":"TASK"

}

commentScope can be either TASK or BPM (process level comment).

Now to the actual navigation from the start page to the details page - the button action chain is as follows - 

Assign Variables - assign the task id from the selected row in the table - VB provides this OOTB - 

Call REST - invokes the get payload api

Assign Variables - assigns the response to variables that are mapped to the fields in the details page

    Navigate - to the task details page - main-task-form, shown below - 

As you can see, I have invested no time in making this look pretty - that's your job!

Finally, let's look at the action chain for the Approve button - 

Again, very simple - Firstly, check if comments have been entered, if so, update the Task with those comments, then update the task status via the ProcessUpdateTask REST based action.

Let's try out the whole use case -

The Majestic Hotel in Dublin is full, so we have to move Niall.

Let's move him to the Hollybrook - 

Niall is a Platinum level guest so a process has been started for management approval.

Now to the VB worklist app - 

Manager clicks on View Task Details - she adds a comment and clicks Approve -

I can validate this easily in the OIC Process Workspace, filtering on completed processes -

I appreciate this is a simple example, but it does show the power and flexibility of using OIC's Visual Builder component as the front end for your process flows.