Friday, February 26, 2010

MSCRM: IFRAME Performance

A client asked: We have a MSCRM form with several IFRAMES contained in multiple tabs. The form is slow to load - what can we do to improve the performance?

The performance issue is at the client browser due to the frames all loading at once. One way to improve performance is to delay loading an IFRAME until the tab where it is located is clicked.

To do this, you need to create a function that sets the source of the IFRAME and then attach the function to the onclick event of the tab. Below is an IFRAME named ‘IFRAME_myiframe’ and the original url is set to ‘about:blank’. We want the IFRAME to display the Bing search engine when it’s tab is displayed.

IFRAME Load function
Setting an IFRAME source via javascript is a simple piece of code that CRM customizers should be familiar with. We’re going to embed the code within a function:

LoadFrame = function() {
crmForm.all.IFRAME_myiframe.src='http://www.bing.com';
}

This function should be placed in the OnLoad event of the form.

The Tab Element
Next, we need to identify the name of the specific tab we want. The id of any tab on a CRM form is ‘tabXTab’ where ‘X’ represents the zero-based index of the tab. So the first tab is named tab0Tab, the second is named tab1Tab, etc. The tab we want to work with is the second tab, so the element we want is named ‘tab1Tab’.

After you have identified the tab element, attach the load function:

document.getElementById('tab1Tab').onclick = LoadFrame;

Note: Place this code in the form’s OnLoad event, but make sure it comes after the load function defined above.

That's it. When you click on tab, the related IFRAME will load and the performance should be improved.