Monday, 16 April 2018

Displaying Processing Spinners in APEX AJAX Process


When a process is called in APEX page without page submission (AJAX Process), user will have no visual feedback that something is happening.
For example if an AJAX (apex.server.process) “EMP_INSERT” is called in the page on click of LOAD button, a spinner can be displayed during the process.

Steps:

Create a dynamic action on click of the “LOAD” button.

Action: Execute Javascript

Code:

apex.server.process(
"EMP_INSERT", {}, { pageItems: '#P9_E_ID', //Process to be called & Items to submit
dataType: 'text',
beforeSend: function() {
var lSpinner$ = apex.util.showSpinner(); //displays processing spinners
},
success: function(pData) {
$('#STY').trigger('apexrefresh');
setTimeout(function() {
$(document).ajaxStop( function(){ $(".u-Processing").hide();});
//hides the spinner
}, 2000);
}
}
);

If you want to display the same spinner on click link column redirects to a pop up page:

apex.server.process(
    "EMP_INSERT", {}, { pageItems: '#P9_E_ID',
        dataType: 'text',
        beforeSend: function() {
            apex.widget.waitPopup();
        },

        success: function(pData) {
            setTimeout(function() {
               $('#STY').trigger('apexrefresh');
                $("#apex_wait_overlay").remove();
                $(".u-Processing").remove();
            }, 2000);
        }
    });

//setTimeout is used to simulate a 2 second AJAX call.

 Output:



1 comment:

  1. Nice blog about punchout XML, it's being great to read this.
    CXML Punchout

    ReplyDelete