Saturday, July 26, 2008

How To Remove padding when presenting CRMGrid in an IFRAME


The IFRAMEHandler is a utility class that handles the CRM GRID - IFRAME padding issue gracefully.
It also handles the preloading of a progress image and title e.g. “Account Opportunities”
If the URL is missing then an Error image is displayed followed by an inline message.

Here is a simple instruction on how to implement the solution:
1. Paste the IFRAMEHandler class inside the entity onload event.
2. Instanciate the IFRAMEHandler passing it the IFRAME id e.g. “IFRAME_Test”
3. The second parameter is an optional title/name that describes what the iframe is about to load.
4. Call the load function with the relevant url, this could be any url e.g. crm addressable url , your own aspx page or an external website.







Here is the complete code sample




var IFRAME_Test;
var IFRAME_More;

function OnCrmPageLoad()
{
//Create a Handler for the first IFRAME ( IframeId , IframeTitle )
IFRAME_Test = new IFRAMEHandler("IFRAME_Test","Account Homepage");

//Load the specified URL, this can be an inernal crm url , your own aspx or an external website
IFRAME_Test.LOAD("/[Organization Name]/_root/homepage.aspx?etc=1");

/* - */

//Create a Handler for the second IFRAME( IframeId )
IFRAME_More = new IFRAMEHandler("IFRAME_More");
//Set the iframe title, The title is displayed under the loading image
IFRAME_More.TITLE = "More Information";
IFRAME_More.LOAD("[URL]");
}

/* Paste the handler inside the entity onload event. */

function IFRAMEHandler(sIframeId,sTitle)
{
var Instance = this;

if(isNullOrEmpty(sIframeId)) return null;

/* Public Interface */

Instance.TITLE = sTitle;
//Get the Iframe object
Instance.IFRAME = document.getElementById(sIframeId);

//Bind to the change event
Instance.IFRAME.onreadystatechange = OnIframeReady;

//Pre-Defined messages
Instance.STRINGS = {
IFRAME_FAILEDLOAD : "", // + Title
IFRAME_PAGELOADING : "Loading" // + Title
}

Instance.IMAGES = {
IFRAME_LOADING : "/_imgs/AdvFind/progress.gif", //Progress
IFRAME_ERROR : "/_imgs/ico/16_L_remove.gif" //Error
}

Instance.LOAD = function(sUrl)
{
/* Reference the iframe document body and inject preloading html */
var IFRAMEBody = getIframeBody();
IFRAMEBody.style.margin = "0px";
IFRAMEBody.scroll = "no";

IFRAMEBody.innerHTML = "<table height='100%' width='100%' style='cursor:wait;border:1px solid #6b92ce'><tr><td valign='middle' align='center'><img id='Image' alt='' src='" + Instance.IMAGES.IFRAME_LOADING + "'/><br><span id='Message'>" + Instance.STRINGS.IFRAME_PAGELOADING + " " + Instance.TITLE + "</span></td></tr></table>";

/* Set the iframe url or preset an inline error message */
if(!isNullOrEmpty(sUrl)) Instance.IFRAME.src = sUrl;
else
{
var IFRAMElements = getIframeDoc().all;
IFRAMElements.Image.src = IMAGES.IFRAME_ERROR;
IFRAMElements.Message.innerHTML = STRINGS.IFRAME_FAILEDLOAD + " " + Instance.TITLE;
}
}

/* Private functions */
window.attachEvent("onunload",dispose);

function dispose()
{
Instance.STRINGS=null;
Instance.IMAGES=null;
Instance.IFRAME=null;
Instance=null;
}

function getIframeBody()
{
return getIframeDoc().body;
}

function getIframeDoc()
{
return Instance.IFRAME.contentWindow.document;
}

function OnIframeReady()
{
if( Instance.IFRAME.readyState!='complete') return;
if(typeof(getIframeDoc())=="unknown") return;

var IFRAMEBody = getIframeBody();
if(!IFRAMEBody.document.all.crmGrid) return;

IFRAMEBody.scroll="no";
IFRAMEBody.style.padding="0px";
IFRAMEBody.childNodes[0].rows[0].cells[0].style.padding="0px";
}

function isNullOrEmpty( obj )
{
return obj == null obj == "undefined" obj == "";
}
}

/* Entry point */
OnCrmPageLoad();

5 comments:

mceccacci said...

Hi Adi I copied and pasted your code into my form but I receive all the same error :
Field: window
Event: onload
Error: object doesn't support this property or method

Adi Katz said...

Hi mceccacci,

My code uses made up iframe names. You need to replace those iframe with the one/ones you have in your form.

Secondly I recommend you enable debugging and put the debugger keyword at the top of the OnCrmPageLoad function then see where the code breaks.

Adi

Bryan Sumter said...

Awesome!

Bryan Sumter said...

Oh, and it should be:

function isNullOrEmpty( obj )
{
return obj == null || obj == "undefined" || obj == "";
}

Jonas said...

Hi,

I'm using your code snippet from above and it works great!
The only thing is that sometimes I get an error 'IFRAMEHandler' is undefined. He doesn't know that object type. Which is included in my javascript file.
I'm looking crazy for a solution but I cant find any! £Can you help me with this? Using IE9 but I also get the error in IE87 and 8.

Thx