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();

3 comments:

Shweta-Amol said...

Yeah! Nice Post.

Amol Gholap
http://mscrmkb.blogspot.com

moni.w said...

Thanks forr posting this

Gouse said...

Great insights on enhancing user experience with the new helper button in CRM 4.0! This feature will definitely streamline data entry and improve overall efficiency. Looking forward to seeing how it impacts user interactions
Digital Marketing Course In Hyderabad
Digital Marketing Course In Ameerpet