Saturday, June 27, 2009

CRM 4.0 Adding a helper button to text fields




Sometimes you want to attach a click event to a text field. Since CRM does not provide a way to associate a button with a CRM field you need to implement the functionality using JavaScript. The following TextHelperButton object helps you achieve that goal for any given text field.

When creating an instance of the TextHelperButton set the following parameters:
Image width – This is used to adjust the image positioning.
MouseOver image URL – The image that is displayed when you go over the button.
MouseOut Image URL – The default image URL
Click – A function to call when the user clicks on the image.

Paste the code inside the entity onload event and enjoy...


TextHelperButton = function(fieldId)
{
var fldButton = this;

fldButton.Field = crmForm.all[fieldId];

if (!fldButton.Field)
{
return alert("Unknown Field: " + fieldId);
}

fldButton.Click = null;
fldButton.Image = new ButtonImage();
fldButton.Paint = function()
{
var field_d = document.all[fldButton.Field.id + "_d"];
if (field_d)
{
field_d.style.whiteSpace = "nowrap";
field_d.appendChild(fldButton.Image.ToObject())
}
}

fldButton.MouseOver = function()
{
event.srcElement.src = fldButton.Image.MouseOver;
}

fldButton.MouseOut = function()
{
event.srcElement.src = fldButton.Image.MouseOut;
}

function ButtonImage()
{
this.MouseOut = "";
this.MouseOver = "";
this.Width = 21

this.ToObject = function()
{
var img = document.createElement("IMG");
img.onmouseover = fldButton.MouseOver;
img.onmouseout = fldButton.MouseOut;
img.onclick = fldButton.Click;
img.src = this.MouseOut;

var cssText = "vertical-align:bottom;";
cssText+= "margin:1px;";
cssText+= "position:relative;";
cssText+= "right:" + (this.Width + 1) + "px";
img.style.cssText = cssText;
return img;
}
}
}

function OnCrmPageLoad()
{
/* pass the name of the crm field as parameter */
var actnButton = new TextHelperButton("name");
/* set the image button width */
actnButton.Image.Width = 21; //integer
/* supply image rollover URLS */
actnButton.Image.MouseOver = "/_imgs/lookupOn.gif";
actnButton.Image.MouseOut = "/_imgs/lookupOff.gif";
/* supply an function that is called when the image is clicked */
actnButton.Click = Accountnumber_Click;
/* add the image next to the field */
actnButton.Paint();
}

function Accountnumber_Click()
{
alert('Account Number Field Clicked');
}

OnCrmPageLoad();

1 comment:

Amol Gholap said...

Yeah! Nice Post.

Amol Gholap
http://mscrmkb.blogspot.com