Sunday, April 25, 2010

CRM 3.0: Simple button next to a given field


The code below generates a simple button next to a given input field (let's say, for instance, the Subject field on a task record). As simple as that.

This is how a standard button is displayed by CRM. The basic magnifying glass on a lookup type field is an image from the standard images CRM comes with (so no, it's not a real button, like those on a Windows Forms application). If you would like that sort of a "button", you'd have to replace the code from the "// Create a new button" line down to the "// Place the button inside the second table TD" line. So, instead of a button INPUT element, you'd create an image field, with onMouseOver and onMouseOut events defined, so it would behave like a "real" button. ;-)

The code and the call:

function attachCRMbutton(currentfieldName)

        // Get the parent DIV of the given field
        var parentObject = document.getElementById(currentfieldName).parentNode;
        // Create a holding table
        var myTable = document.createElement("Table");
        // The table should fill the entire surrounding DIV element
        myTable.setAttribute('width', '100%');
        // Add one row to our table
        var myRow = myTable.insertRow(0);
        // Create the TD elements
        var originalChildNodesArea = myRow.insertCell(0);
        var buttonArea = myRow.insertCell(1);
        // For this example, a width of 75 pixels is enough to enclose the "Open address" = "75";
        // Place all the original child nodes inside the first table TD
        for(var i = 0; i < parentObject.childNodes.length; i++)
            var myChild = parentObject.childNodes[i];
        // Attach the table to the DIV element
        // Create a new button
        var myButton = document.createElement('input');
        // Set the open action
        function launchURL()
            return true;
        // Set the CRM-like attributes
        myButton.setAttribute('id', 'linkButton_' + currentfieldName);
        myButton.setAttribute('class', 'txt');
        myButton.setAttribute('type', 'button');
        myButton.setAttribute('maxLength', '50');
        myButton.setAttribute('value', 'Open address');
        myButton.setAttribute('req', '0');
        myButton.attachEvent('onclick', launchURL);
        // Place the button inside the second table TD
        // Done
    catch (e) {}

// Method call
Good luck and good hunting!