Saturday, November 21, 2009

CRM 4.0 Read Only Iframe - A better solution




I already posted about creating a read only iframe in the past but the solution offered here is by far better and integrates nicely with CRM.
The idea, in a nut shell, is to create an upper blocking layer inside the iframe. The layer is decorated with an alpha filter which makes it look disabled and also presents a watermark text to the user. The helper object also accepts an alert text that is shown to the user when he tries to click inside the frame.
Feel free to change the opacity, colors and fonts for best appearance. This code, as usual, should be pasted into the onload event handler and published.



function IframeReadOnlyHelper(sIframeId)
{
var iro = this;
iro.Iframe = document.getElementById(sIframeId);
if (!iro.Iframe)
{
alert("IFRAME with id " + sIframeId + " is missing");
}

iro.WatermarkText = "";
iro.AlertMessage = "";

iro.OnIframeReady = function()
{
if (iro.Iframe.readyState != 'complete')
{
return;
}

var iframeDoc = iro.Iframe.contentWindow.document;
var iframeBody = iframeDoc.body;
var roSpan = iframeDoc.createElement("SPAN");

var roStyle = "overflow:hidden;";
roStyle += "position:absolute;";
roStyle += "z-index:1;";
roStyle += "left:0px;";
roStyle += "top:0px;";
roStyle += "height:100%;";
roStyle += "text-align:center;";
roStyle += "background-color:gray;";
roStyle += "font:72px Tahoma;";
roStyle += "filter:alpha(opacity=20)";

roSpan.style.cssText = roStyle;

iframeBody.appendChild(roSpan);

if (iro.WatermarkText != "")
{
roSpan.innerHTML = "<div style='height:100;'><br>" + iro.WatermarkText + "</div>";
}

if (iro.AlertMessage != "")
{
roSpan.attachEvent("onclick", function(){alert(iro.AlertMessage);});
}
}

iro.Disable = function()
{
iro.Iframe.onreadystatechange = iro.OnIframeReady;
iro.OnIframeReady();
}
}

function OnCrmPageLoad()
{
//Load IFRAME with any URL
var iframeActivity = document.all.IFRAME_account_association;
iframeActivity.src = "areas.aspx?oId=%7b50387202-6F73-DE11-9F19-0003FF230264%7d&oType=1&security=852023&tabSet=areaActivities";

//Use IframeReadOnlyHelper
var roIframe = new IframeReadOnlyHelper("IFRAME ID");
roIframe.WatermarkText = "Read Only";
roIframe.AlertMessage = "This Grid is Disabled";
roIframe.Disable();
}

OnCrmPageLoad();