Show Loading Message during function execution or Javascript load in CRM Form.

Hey CRM Folks, Today I am going to share one very interesting task that most of CRM folks face while working in CRM and play with Javascript. Many times Customers complaint that Javascript validations are avoided because the user performs operations before JS are completely loaded.

How can I check for the Condition ?
How could i restrict user to enter anything on the CRM form while JS not get fully loaded.......

Most of the times situation occur where user asked to show some processing message during long function execution, if you are doing some processing or calling any webservice which is taking time to execute and you want to show loading messsage to user.

Javascript : 

By using below mentioned Javascript function you can show Loading Message to user and can restrict untill JS get completely loaded.

function showJSProcessingMessage() 
{
    var formdiv = document.getElementById('dummyDiv');
    formdiv.disabled = true;

    document.getElementById('tdAreas').parentElement.style.display = 'none';
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', 'msgDiv');
    //newdiv.valign = 'middle';
    newdiv.align = 'center';
    newdiv.marginBottom = '5000px';
    var divInnerHTML = "";
    divInnerHTML += "";
    divInnerHTML += "";
    divInnerHTML += "";
    divInnerHTML += "</br><img alt='' src='/_imgs/AdvFind/progress.gif' height='34px' width='34px'/></br>";
    divInnerHTML += "<b>Please wait while Script is Loading...</b>";
    divInnerHTML += "";


    divInnerHTML += "";
    newdiv.innerHTML = divInnerHTML;
    newdiv.style.color = '#001D72';
    newdiv.style.fontSize = '13px';
    newdiv.style.zIndex = '1010';
    newdiv.style.margin = '0 auto';
    newdiv.style.marginTop = '210px';
    newdiv.style.width = '270px';
    newdiv.style.height = '100px';
    newdiv.style.background = '#FFFFE4';
    newdiv.style.border = "thin solid #000000";

    //newdiv.style.width = getBrowserWidth()+'px';
    //newdiv.style.height = getBrowserHeight()+'px';
    newdiv.style.position = 'relative';
    document.body.insertBefore(newdiv, document.body.firstChild);
    document.getElementById('msgDiv').style.visibility = 'block';
   
    setTimeout(disableLoading, 10000); //use it to define ms for disable loading
    
}
function disableLoading() 
{
    if (document.readyState === "complete") 
    {
        document.getElementById('msgDiv').style.display = 'none';
        document.getElementById("tdAreas").parentElement.style.display = 'block';
        document.getElementById('dummyDiv').disabled = false;
    }

}

Use this script on form OnLoad event :

Loading Message will look like below :

Hope this will someone.....You can use it based upon your project requirement.

Enjoy and Keep Reading !!! \A/\S/