Overview

Skill Level: Intermediate

You are familiar with Coach View framework and customization.

This recipe will show you how to define custom events in Coach Views and how to use them with realtime examples.

Ingredients

IBM BPM v8.5.7, IBM BPM v8.6, IBM BAW

Step-by-step

  1. Create a Client Side Human Service to be used for demo

    Create¬†a Client Side Human Service “Custom Event Handling” with a blank coach –¬†

    7

  2. Create a Coach View for handling the event

    1. Create a coach view and add a “Button” in the layout section¬† –¬†1
    2. Add a event type configuration option “onButtonClick” –¬†2
    3. So, the user defined event has been created and now this needs to be registered in one of the event handlers in the “Behavior” pane. The registration can be done using this.registerEventHandlingFunction if we want to pass additional parameters to the event handler, otherwise the event handler gets automatically registered with no additional parameters. In this example we want to register this event in the load event and as well as we will pass additional parameters. For now, we will pass one extra parameter “value” to the event handler as shown below¬† –¬†¬†5
    4. Next is invoking the event handler – here we want the event handler to be invoked when we click the button on the coach view and also we want a string to be passed to the event handler via the “value” parameter. In the view even handler we will capture the button click. So, we have captured the button click event and we are invoking the event handler using¬†this.executeEventHandlingFunction and we are passing “Button Clicked !” as the parameter. Now, our Coach View is ready to execute the first test.6
  3. First Run

    Let’s¬†add the Coach View in the Coach of the Client Side Human Service. We can see the event handler is appearing in the “Events” section of the Coach View. Let’s try to print the value we have passed while invoking the event handler.¬† We will also see – what all other variables are available in the event handler execution .

    alert(value); 

    4

     

    Let’s run the Client Side Human Service and click the button –¬†

    8

     

    1. It is displaying the alert with the string we passed from the invoking function.
  4. Let's debug the service to see what all other variables are available to the event handler

    Add a debugger before the alert statement in the event handler and run the service enabling the developer mode and click on the button –¬†

    10

     

    As you see, lots of other variables are available which can be used to write custom logic in the event handler.

     

    me: The coach view object of “Custom Event Handling”
    view
    value: The parameter we passed 
    8 undefined parameters: Another 8 empty placeholder for custom parameters
    bpmext: bpmext object
    bpmEventHelper: bpm event helper object
    parentView

    So, this framework has a limitation of passing only 9 custom parameters, I think that is enough!

  5. Let's try to update the passed parameter

    Finally, as the last exercise of this recipe, let’s try to update the parameter which is getting passed while invoking the event handler.

    So, we will update the view event handler of the Coach View a bit –¬†

    11

    Let’s create an object “name” consisting of two attributes “firstName” and “lastName”. “firstName” is set to “Atanu” and let’s pass this “name” object while invoking the event handler.

     

    In the event handler configuration let’s set the value of the “lastName” attribute as “Roy” –¬†

    12

     

    Save the service and run then click the button, it should display “Atanu Roy” and yes, it does –¬†

    111

    Before setting the “lastName”, if we see the debugger, only “firstName” is set and “lastName” is blank –¬†

    1

     

    So, we could successfully set the parameter and send back to the coach view.

  6. Conclusion

    So, in this recipe we have learnt how to configure a custom used defined event in coach view, how to pass pameters and how to update the parameter from the event handler.

    I hope this would be helpful and please share your views on this.

Join The Discussion