Sunday, April 25, 2010

CRM 3.0: Simple button next to a given field

Hello!

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)

{
    try
   {
        // 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"
        buttonArea.style.width = "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];
            originalChildNodesArea.appendChild(myChild);
        }
        // Attach the table to the DIV element
        parentObject.appendChild(myTable);
        // Create a new button
        var myButton = document.createElement('input');
        // Set the open action
        function launchURL()
        {
            window.open('http://crmstuff.blogspot.com');
            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
        buttonArea.appendChild(myButton);
        // Done
    }
    catch (e) {}
}

// Method call
attachCRMbutton('subject');
 
Good luck and good hunting!