Show Loading message during function execution in CRM Form


I found one question in CRM Development form where user asked to show some processing message during long function execution, we have done this in many projects, so I thought to write this post so that it can be help CRM developers. 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 you can use below function

function showLoadingMessage() {
    tdAreas.style.display = ‘none’;
    var newdiv = document.createElement(‘div’);
    newdiv.setAttribute(‘id’, “msgDiv”);
    newdiv.valign = “middle”;
    newdiv.align = “center”;
    var divInnerHTML = “<table height=’100%’ width=’100%’ style=’cursor:wait’>”;
    divInnerHTML += “<tr>”;
    divInnerHTML += “<td valign=’middle’ align=’center’>”;
    divInnerHTML += “<img alt=” src=’/_imgs/AdvFind/progress.gif’/>”;
    divInnerHTML += “<div/><b>Working…</b>”;
    divInnerHTML += “</td></tr></table>”;
    newdiv.innerHTML = divInnerHTML;
    newdiv.style.background = ‘#FFFFFF’;
    newdiv.style.fontSize = “15px”;
    newdiv.style.zIndex = “1010”;
    newdiv.style.width = document.body.clientWidth;
    newdiv.style.height = document.body.clientHeight;
    newdiv.style.position = ‘absolute’;
    document.body.insertBefore(newdiv, document.body.firstChild);
    document.all.msgDiv.style.visibility = ‘visible’;
}

it will display message like below

once processing is done you can hide this message using below code

document.all.msgDiv.style.visibility = ‘hidden’;

Enjoy !!!

 

Advertisements

2 Comments

Filed under JS Script, MS CRM 2011, MS CRM 4.0

2 responses to “Show Loading message during function execution in CRM Form

  1. eleana

    hi there , great work

    I had some problems with the above code (crm 2011 /roll up 12 ) so I changed it to:

    function showLoading() {

    //document.getElementById(‘tdAreas’).parentElement.style.opacity = ‘0.1’;//use it to change opacity of main content
    document.getElementById(‘tdAreas’).parentElement.style.display = ‘none’;//use it to hide main content
    var newdiv = document.createElement(‘div’);
    newdiv.setAttribute(‘id’, ‘msgDiv’);
    newdiv.valign = ‘middle’;
    newdiv.align = ‘center’;
    var divInnerHTML = “”;
    divInnerHTML += “”;
    divInnerHTML += “”;
    divInnerHTML += “”;
    divInnerHTML += “Please wait…“;

    divInnerHTML += ”;
    newdiv.innerHTML = divInnerHTML;
    newdiv.style.background = ‘#FFFFFF’;
    newdiv.style.fontSize = ’15px’;
    newdiv.style.zIndex = ‘1010’;
    newdiv.style.margin = ‘0 auto’;

    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, 500); //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.opacity = ”;
    document.getElementById(“tdAreas”).parentElement.style.display = ‘block’;
    }
    }

  2. Kabita

    Hi Mahender,
    Nice!!!
    I am eagerly waiting to apply this on my project. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s