Preventing User Clicks During Postbacks with a Shield in the Infor CRM Web Client

When a postback occurs in Infor CRM (Saleslogix), there is a small circular loading icon that appears in the top, title/menu area of Infor CRM. However, for long postbacks, it doesn’t prevent users from still clicking or changing things during this postback. If the user does this, when the postback returns, things they might have clicked or changed will be lost. A simple solution to this is to shield the page during postbacks that will prevent the user from clicking anything while the postback is occurring.

This can be easily accomplished by hooking into the client-side async requests and showing and hiding a shield during these requests. We can use the begin and end request events from the Page’s ScriptManager using Sys.WebForms.PageRequestManager.getInstance(). We’ll also use the build-in loading shield and display this during the postback event.

The client-side Javascript code to do all of this looks like this:

require([
    'dojo/_base/lang',
    'Sage/Utility',
    'Sage/Utility/ErrorHandler'
], 
function (lang, Utility, ErrorHandler) {

    lang.mixin(Utility, {
        showRequestIndicator: function () {
            var indicator = document.getElementById('asyncpostbackindicator');
            if (indicator) { indicator.style.visibility = 'visible'; }

            var loader = document.getElementById('loader');
            if (loader) {
                loader.style.opacity = '.5';
                loader.style.display = 'block';
            }
        },
        hideRequestIndicator: function (sender, args) {
            var indicator = document.getElementById('asyncpostbackindicator');
            if (indicator) { indicator.style.visibility = 'hidden'; }
            
            var loader = document.getElementById('loader');
            if (loader) {
                loader.style.opacity = '0';
                loader.style.display = 'none';
            }
            ErrorHandler.handleEndRequestError(args);
        }
    });

});

If you’re using my Custom Loader Module all you need to do is save the above as main.js and drop that into a subfolder named “PostbackShield” in the “Custom\Modules” folder. If you’re not using that module (and really, you should be because it’s so much easier) just add your own <script> tag to load the script to the master page.

Once you do that, any time a postback occurs, you’ll see the shield like this (notice how there is a opaque shield that covers the screen when the save button is clicked):

If you’d like to have a completely transparent shield, rather than the faint opaque shield, just change the line that says this:

? {'opacity': '.5', 'display': 'block'}

to this

? {'opacity': '0', 'display': 'block'}

and it will still shield the content, but the user won’t see or notice anything.