BPM, Workflow, and Case

 View Only

Recipe: Assigning Context to a Table button in BPM without using list selected to fire a boundary event

By ZACHARY SILVERSTEIN posted Mon September 27, 2021 06:09 PM


Utilizing BPM to assign context and variables using Coachview Artifacts



Skill Level: Beginner

In this recipe we will be showing one way of firing boundary events via buttons in a table. We also show how to use a data attribute to store on screen value for usage.


  • BPM 8.6.0 With Spark UI


1. Initial CSHS Creation

Build a clientside human service.

I’m calling it Contextual Table.


    • Add a private list of nameValuePairs to the variables. Call this userID.
    • Add a single string called selectedAttribute

On the diagram initialize a sample list of users and IDs in a piece of clientsideJS that will populate our table.

2. Build your main coach
  1. Navigate to your coach and delete the OK button.
  2. Drop a table UI component on screen and assign the table CV to userID.
  3. Add output text cvs into the table and assign each field to currentItem name and value of userID.
  4. Also add two buttons, labeled get user’s name and get user’s ID.

At the bottom of the screen add a data CV and edit the controlID to say attributeData, and bind to selectedAttribute


Add two navigation events at the bottom of the screen under the data object. Change their controlIDs to nameNavigation and idNavigation respectively

3. Event Javascript

Select the first button and add this code to the onClick


var currentRow = this.ui.getIndex(); //Gets which row the current item is

var rowName = this.context._parentView.context.binding.get(‘value’).items[currentRow].name; // Gets the name of the item in the current row index

page.ui.get(‘attributeData’).context.binding.set(‘value’,rowName); //Sets our attribute data object to the right value

page.ui.get(‘nameNavigation’).context.trigger(); //Triggers the name navigation boundary event


Select the second button and add this code to the onClick


var currentRow = this.ui.getIndex();

var rowID = this.context._parentView.context.binding.get(‘value’).items[currentRow].value;




4. Diagram level changes

Go to your diagram and draw the boundary events to pieces of client side Javascript each, then back to the coach as seen below.



Add this code to the Name Clicked CSJS


console.log(‘The name was clicked for ‘ + tw.local.selectedAttribute);



Add this code to the ID Clicked CSJS

console.log(‘The ID was clicked for ‘ + tw.local.selectedAttribute);


5. Run and view your console as you click the buttons.



6. Questions?

For any questions please email me at zachary.silverstein@ibm.com