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:



4 comments:

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

    ReplyDelete

  2. Good to read article about open catalog interface Punchout.
    OCI Punchout




    ReplyDelete
  3. Thanks for sharing article about CXML Punchout
    CXML Punchout

    ReplyDelete
  4. cXML PunchOut - Commerce extensible markup language application who is a protocol created by Ariba used to communicate between sessions across the internet.
    Commerce Extensible Markup Language Punchout

    ReplyDelete