Confirmation Dialog on Click of a Button in IBM BPM

Introduction

In most of the UI applications, display of confirmation dialog when trying to submit some data or deleting some data is a common use case. In this article, I am going to show to implement a coach view with a button which will submit credit card application form. Before submitting the credit card application form we can use the functionality of Confirmation Dialogue using IBM BPM Coach View features.

Implementation

Here I am going to show detail steps for implementing this solution.

Create A Process Application:

Step 1: Create a new Process App name as ‘Credit Card Application’. Then Open in Process Designer/Web-based Process Center.

Create Business Object:

Step 1: Create a Business Object name as ‘CreditCardRequestBO’ and add the parameters as shown below.

 

Create Coach View:

Step 1: Create a Coach View name as ‘Confirmation Button CV’, drag a Button from pallet to Layout section.

Step 2: Select Overview tab of coach view, check the option, "Can Fire a Boundary Event".

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

Step 4: Select Layout tab of coach view, select button on Layout section. Go to General Properties and bind the label of the button with the variable "buttonName" as shown in the below image.

Step 5: Select Behavior tab of coach view, and select the load event handler, add the below code as shown in the figure.

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

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

            var res=confirm(this.context.options.message.get("value"));

            if(res==true){

                        this.context.trigger();

            } 

 });

Now we have created Coach View with button, we will create a Human Service which can be used this coach view.

Create Client Side Human Service:

Step 1: Create a Clint-side Human Service name as ‘Credit Card Application CHS’. Select Variables tab of Human Service, create private variable name as application type as ‘CreditCardRequestBO’ as shown in the below image.

Step 2: Select Diagram tab of Human Service, rename Coach to Credit Card Application. Double click on coach it will open Coach Tab.

Step 3: Drag a Vertical Section pallet to coach layout and drag application Variable from variable pallet to Coach Layout. Rename as shown below.

Step 4: Select Confirmation Button CV from View pallet to Coach Layout as shown below.

Step 5: Button and go to Configuration Properties and add the button name and message as shown below.

Step 6: Select Diagram tab of Human Service and select the line from Credit Card Application to End and change the End State binding as shown below.

Test the Application:

In Credit Card Application CHS Human Service click on Run, it will open UI and enter the details as shown below and Click on Submit.

 

Download

File Name	Size	Download
Confirmation Dialog on Click of a Button in IBM BPM	620 KB	Download
Credit_Card_Application_v1.0.twx	1500 KB	Download