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!

3 comentarii:

Andriy a33ik Butenko said...

This is the sample for 3.0. 5.0 will be presented this year... Does it work for 4.0?

CSCorpion said...

Since it's DOM code (written in JS), it should work 100% on CRM 5.0 too. Can't guarantee it will work at its best cross-browser though :)

Octavian Cucută said...

Cross browser would be a dream... somehow, I doubt they leave it that open.

@Andriy: I'm forced to develop on a 3.0 platform. I post now and then things that show potential of being used in other applications, not as specific as those I implement. I mean, I need to keep confidentiality over my code while also offering interesting stuff for the blog. So - the things with general application will get here.