Tuesday, February 24, 2015

Please Wait dialog Coach view in IBM BPM

Please wait Dialog is one of the common and useful UI features which is needed and helpful when there is a significant time consuming back ground operations involved while navigating between one screen to other screen.

In this post, let us see how to create a coach view which shows a Please wait dialog as shown in the below figure, when some back ground operation is happening while moving from one screen to another / while loading some data to the same screen.

Please Wait Dialog in the Coach

First Step to create this coach view is to search the web and find the animation (.gif) for Please wait Dialog. Once you find that, add the same under the files section in the Process Designer  as a web file as shown in the below figure.



Please wait animation file

Second Step is to create a coach View in User Interface --> Coach view. In the coach view we don't have to any thing in Variables or layout tabs. Go to behavior tab. This is where we are going to add all our code. In the AMD Dependencies Section add an entries for dojox/widget/Standby as shown in the below figure.
 Module


Now come to Event handlers section below AMD Dependencies Section and add the below code to the load.

    
// intialise the dialog widget
var standby = new STB({
    target: "mainBody",
    image: com_ibm_bpm_coach.getManagedAssetUrl( "Please_wait_while_loading.gif",com_ibm_bpm_coach.assetType_WEB),
    zIndex: 1000
});
document.body.appendChild(standby.domNode);
standby.startup();
//use unsafe inner js core, override show progress and hide progress functions
require(["com.ibm.bpm.coach/controller"], function (CONTROLLER) {
    CONTROLLER.showProgressIcon = function () {
        CONTROLLER.boundayEventInProgress = true;
        standby.show();
    };
    CONTROLLER.hideProgressIcon = function () {
        CONTROLLER.boundayEventInProgress = false;
        standby.hide();
    };
});


Now the coach view for Please wait dialog is ready. Just add this coach view some where coach layout as shown in the below figure and we are ready to see the Please wait dialog in the UI while moving from one screen to another.
Add please wait dialog to coach

You can also find this demo video of this here .

Hope this post is help full.

courtesy : Alexey Pronin (makvell) for the post




No comments:

Post a Comment