Saturday, July 11, 2015

Confirmation Dialog on Click of a Button in IBM BPM

In most of the UI applications, display of confirmation dialog when trying to delete some data or cancel the current operation is a very common use case. In this post, let see how to create a coach view with a button which will do this. Below Image shows the confirmation dialog on click of the Delete button.

Confirmation Dialog on Click of Delete Button



Let us see how to create coach view for the same.
Step 1 : Create a new Coach view , Human Services --> Coach View.
Step 2 : In the overview tab of coach view, check the option, "Can Fire a Boundary Event".



Step 3 : In the variables tab of coach view, create two variables under configuration as shown in the below image.


Step 4: Now add a button to the Layout tab and bind the label of the button with the variable "buttonName" as shown in the below image.



Step 5 : In the load event handler of Behaviour tab, add the below code as shown in the figure.

 Below is the code shown in figure:

var button=this.context.element.getElementsByTagName("Button")[0];

 dojo.connect(button, "click",this,function(){

  var res=confirm(this.context.options.dialogMessage.get("value"));
  
  if(res==true){
     this.context.trigger();
  }  

 });


With this our coach view is ready.

Now create a human service with a coach. In the coach add this coach view and provide the name of the button to "buttonName" variable and message to be displayed in the confirmation dialog to the variable "dialogMessage" as shown in the figure.











3 comments: