Wednesday, February 27, 2008

Create a button on your form

This is an example on how to create a button on the form, based on a former idea of Cornel. First of all we need to create a nvarchar attribute and put it on the form where we want our button. I assume that everybody knows how to create an attribute and put in on the form, so i won't talk about this.
In this example my attribute's schema name is new_button. Here is the code:

/////////////////////////////////////////////////////////
// This is how we call the button, what we see
crmForm.all.new_button.DataValue = "Ok";
// We could align it a bit
crmForm.all.new_button.style.textAlign = "center";
crmForm.all.new_button.vAlign = "middle";
//we make the mouse look as a hand when we're moving over
crmForm.all.new_button.style.cursor = "hand";
crmForm.all.new_button.style.backgroundColor = "#CADFFC";
crmForm.all.new_button.style.color = "#FF0000";
crmForm.all.new_button.style.borderColor = "#330066";
crmForm.all.new_button.style.fontWeight = "bold";
crmForm.all.new_button.contentEditable = false;
//we attach some events in order to make it look nice :)
crmForm.all.new_button.attachEvent("onmousedown",color1);
crmForm.all.new_button.attachEvent("onmouseup",color2);
crmForm.all.new_button.attachEvent("onmouseover",color3);
crmForm.all.new_button.attachEvent("onmouseleave",color4);
function color3() {
crmForm.all.new_button.style.backgroundColor = "#6699FF";
}
function color4() {
crmForm.all.new_button.style.backgroundColor = "CADFFC";
}
function color1() {
crmForm.all.new_button.style.color = "000099";
}
function color2() {
crmForm.all.new_button.style.color = "FF0000";
}
//here we attach what we want our button do
crmForm.all.new_button.attachEvent("onclick",someFunction);
//////////////////////////////////////////////////////////////
Here is how the button looks like:




I didn't define here the "someFunction", i leave it up to you. First time when i used such a button was to add product to a quote without click-ing on "New Quote Product", calling a Web Service...

15 comentarii:

CSCorpion said...

Nice article. Keep it up :)

Olivier said...

Very nice tutorial, thanks a lot!

Marcin said...

Hi, thank you for posting on your blog. It is very helpfull for me. I have just opened my own blog and I wonder if I could post your script on it with instruction in my home language (polish). Please let me know.

Mario Raunig said...

cool idea. i took it further and made it more generic and "native 4.0 looking". check it out at:
http://www.beatnik.at

dirana said...

Nice example and nice buttons too. You should really check Mario´s blog on this topic. Thanks both of you for sharing your code.

CSCorpion said...

glad this solution developed to 4.0 as well :) ty all for involving

Lucius said...

Thank you very much for writing this article...it makes my life much easier...

I spent hours working on making toolbar buttons and configuring the isv.config file. But this is actually what I needed.

Lucius said...

I just wanted to make sure of one thing. This code to create the button, should it be placed in the OnLoad event of the crmForm?

CSCorpion said...

yes Lucius, on the OnLoad event u alter that textbox properties until it comes to a button :P don't forget to add the event handlers/functions to make it act like one too... good luck

Kim said...

Reyly greate idea!
Just when I trying to add the handler in this way:
crmForm.all.rb_pricetitle.attachEvent("OnClick",crmForm.all.rb_price.FireOnChange());
it fails "window doesn't contains the method."
How we're creating and attaching a handler?

CSCorpion said...

Kim, if u want to make a function be triggered on a certain event for your button, you should try like this:

// example 1 - simple function
function SaySomethingFunny() {
alert("Dear diary! Jackpot!");
}
crmForm.all.your_button.attachEvent("onclick",SaySomethingFunny);

// example 2 - function with params
function SaySomethingFunny(message) {
alert(message);
}
crmForm.all.your_button.attachEvent("onclick",function() { SaySomethingFunny("Giggity"); });

Hope this helps :)

Anonymous said...

great job!!
One small issue, the text in the button can be changed. But setting the field to read-only solves this

Regards,
Marcel van den Aker

Anonymous said...

mate,

this article is f*cken awesome. Keep up the good work !!

Juliux said...

Thx, Great job !!!

Anonymous said...

Really smart! Thx