Delayed IFRAME Loading

Will Wilson — Fri, 05 Feb 2010 09:55:37 -0500

Suppose you have a CRM form that has several IFRAMES contained in multiple tabs. Loading such a form can sometimes create a performance issue on the client browser due to the frames all loading at the same time. One such way to reduce the hit on performance would be to delay loading an IFRAME until the tab it is on is clicked and made visible.

What we’re going to do is create a function that sets the source of the IFRAME and then we’ll attach the function to the onclick event of the tab. In this example, I have an IFRAME named ‘IFRAME_myiframe’ and I have set the original url to be ‘about:blank’. I 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 pretty simple piece of code that CRM customizers should be familiar with. We’re just going to wrap the code within a function:

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

This function should be placed in the OnLoad 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, and so on. The tab I want to work with is the second tab, so the element I’m looking for is named ‘tab1Tab’.

Now that we’ve identified the tab element, let’s 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 we defined above.

That’s all there is to it. Cheers!

Technorati Tags: CRM,Javascript,CRM IFRAME,CRM Customizations,CRM Scripting

Preventing Characters from being Entered in a Form Field

Will Wilson — Thu, 07 Jan 2010 20:58:57 -0500

With CRM, we use a couple of different methods to perform data entry validation before a record is saved to the database: either form javascript, a pre-event plug-in, or some combination of both.

For data validation in “real-time” (ie, you want the validation to occur when the actual data is entered, rather than when the entire record is saved), form javascript is the way to go. Most javascript validation is perform in a field’s OnChange event, however you can utilize other events.

Validating Phone Numbers

Recently, we had a client ask if we could prevent alphabetical characters from being entered into the various phone fields (telephone1, telephone2, fax, etc).

Instead of using the OnChange event, I decided to try and utilize the field’s OnKeyPress event and simply nullify any invalid key strokes.

The following function looks at the key being pressed and only accepts numbers 0 – 9, parentheses (), dash (-), period (.) and spaces:

ValidateCharacters = function() {
    // get key code
    var key = event.keyCode;
    // only allow 0 through 9, parentheses (), dash -, period . and space
    if(!(((key >= 48) && (key <= 57)) || key == 45 || key == 46 || key == 32 || key == 40 || key == 41)) {
        event.returnValue = false;
        return false;
    }
}

In CRM, to cancel a keypress, we must set the event.returnValue = false and then have the function return false.

Now we just need to hook up the function to the keypress event for the appropriate field (in this case, I’ll do the telephone1 attribute). Simply place the following code in the form’s OnLoad() event:

document.getElementById('telephone1').onkeypress = ValidateCharacters;