Create a Client Side Human Service to be used for demo
Create¬†a Client Side Human Service “Custom Event Handling” with a blank coach –¬†
Create a Coach View for handling the event
- Create a coach view and add a “Button” in the layout section¬† –¬†
- Add a event type configuration option “onButtonClick” –¬†
- 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¬† –¬†¬†
- 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.
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 .
Let’s run the Client Side Human Service and click the button –¬†
- It is displaying the alert with the string we passed from the invoking function.
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 –¬†
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”
value: The parameter we passed¬†
8¬†undefined parameters: Another 8 empty placeholder for custom parameters
bpmext: bpmext object
bpmEventHelper: bpm event helper object
So, this framework has a limitation of passing only 9 custom parameters, I think that is enough!
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 –¬†
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” –¬†
Save the service and run then click the button, it should display “Atanu Roy” and yes, it does –¬†
Before setting the “lastName”, if we see the debugger, only “firstName” is set and “lastName” is blank –¬†
So, we could successfully set the parameter and send back to the coach view.
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.