Donnerstag, 24. April 2008

Create "real" CRM 4.0-Style form-buttons in 5 minutes


There are several ways to add custom buttons onto a crm form (apart from the boring method of adding buttons via ISV-config 8-):
1. use an iFrame and an external page
Drawback: no offline availability

2.do some DOM-injection and create the buttons at runtime
Drawback: a bit tricky with placement and so on

And then there is:
3. Adis idea to transform a textattribute into a button.
The nice thing is, that you can use the normal formeditor to place it.

So I took the idea further and applied the CRM 4.0 styles to make it look 100% native and more generic to use. (it even reacts to mousedown as expected - hehe ;-)

What to do:
  1. create a textattribute (you can set searchable to "no" so the attribute doesn't show up in advanced search


  2. put it on the form
  3. make it "readonly" (Thanks Marcel!)
  4. copy the sourcecode into the onLoad event.


  5. replace the fieldname "bwt_button1" in the last line with your attributename.

  6. create your functions to tell the button what to do when clicked.


  7. have fun


source:

//////////////////////////////////////////////////////
//////////////////////////////////////////////////////

//CRM 4.0-Style button creator
//Creates a Button from a Textattribute.
//For every Button you need, create a nText Attribute and place it on the Form
//mario raunig, world-direct 04/2008

function create_button_from_textattribute(fieldname, buttontext, buttonwidth,clickevent)
{
functiontocall=clickevent;
crmForm.all[fieldname].DataValue = buttontext;
crmForm.all[fieldname].style.borderRight="#3366cc 1px solid";
crmForm.all[fieldname].style.paddingRight="5px";
crmForm.all[fieldname].style.borderTop="#3366cc 1px solid";
crmForm.all[fieldname].style.paddingLeft="5px";
crmForm.all[fieldname].style.fontSize="11px";
crmForm.all[fieldname].style.backgroundImage="url(/_imgs/btn_rest.gif)";
crmForm.all[fieldname].style.borderLeft="#3366cc 1px solid";
crmForm.all[fieldname].style.width=buttonwidth;
crmForm.all[fieldname].style.cursor="pointer";
crmForm.all[fieldname].style.lineHeight="18px";
crmForm.all[fieldname].style.borderBottom="#3366cc 1px solid";
crmForm.all[fieldname].style.backgroundRepeat="repeat-x";
crmForm.all[fieldname].style.fontFamily="Tahoma";
crmForm.all[fieldname].style.height="20px";
crmForm.all[fieldname].style.backgroundColor="#cee7ff";
crmForm.all[fieldname].style.textAlign="center";
crmForm.all[fieldname].style.overflow="hidden";
crmForm.all[fieldname].attachEvent("onmousedown",push_button);
crmForm.all[fieldname].attachEvent("onmouseup",release_button);
crmForm.all[fieldname].attachEvent("onclick",functiontocall);
}

function push_button(){
window.event.srcElement.style.marginLeft="1px";
window.event.srcElement.style.marginTop="1px";
}

function release_button(){
window.event.srcElement.style.marginLeft="0px";
window.event.srcElement.style.marginTop="0px";
}

// tell the button what to do
function testfunction()
{
alert('Ta-da!');
}

// create the button
create_button_from_textattribute('bwt_button1', 'What a nice CRM 4.0 Button','184px',testfunction);

//////////////////////////////////////////////////////
/
/////////////////////////////////////////////////////

Kommentare:

  1. 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

    AntwortenLöschen
  2. Indika Abayarathne2. Februar 2009 um 14:23

    Great job !!!
    Very usefull for all CRM developers.

    AntwortenLöschen
  3. Thanks a lot for this!

    One question, can I do that to a label as well?

    AntwortenLöschen
  4. why not. you have to change the function "create_button_from_textattribute" so that it refers to labels. e.g.: crmForm.all(element+'_c')

    AntwortenLöschen
  5. Very nice thank you!

    This worked better for me to duplicate CRM button appearance:

    function push_button(){
    window.event.srcElement.style.borderWidth="2px";
    window.event.srcElement.style.borderStyle="groove ridge ridge groove";
    window.event.srcElement.style.borderColor="#3366cc #4080f0 #4080f0 #3366cc";
    }

    function release_button(){
    window.event.srcElement.style.border="1px solid #3366cc";
    }


    Also I found the button text could scroll a few pixels up and down so I changed to this to keep text in the middle of the button:

    crmForm.all[fieldname].style.lineHeight="14px";


    Added this line to hide the button label:

    crmForm.all[fieldname+'_c'].style.visibility = 'hidden';

    Added this line to function Fetch()to remove the flashing cursor from the button after click:

    window.focus();

    Can still see the cursor when mouse is down. Couldn't figure out how to get rid of that, but now the button is almost perfect for me! Cheers.

    AntwortenLöschen
  6. Dear MArio,

    I've created a lookup and want to create a duplicate of the lookup whenever I select the button.
    Instead of your text attribute i've the lookup and want to write in the function whenver I selct the button a duplicate lookup gets created automatically.
    Can you pls advice?

    Regards
    Prince

    AntwortenLöschen
  7. Hi :) one small issue. The original idea ain't Adis, but the CRM Stuff blog's creator - CSCorpion :) the article was writter by Adi, on CSCorpion's code, because he wanted to introduce him into the blog world in a friendlier manner :)

    AntwortenLöschen
  8. also, you may be interested in my new post about buttons, for CRM 2011: http://crmstuff.blogspot.com/2011/01/crm-2011-custom-form-button.html :) best of luck.

    AntwortenLöschen
  9. @csc: good job! although you could have mentioned where you got the 4.0 code from 8-D

    AntwortenLöschen
  10. Hi!
    Thansk for this, I have tried the above in dynamics CRM 5.0 but it didn't work, any idead???

    AntwortenLöschen
  11. Thanks for the article, this is exactly what I needed. But I need to be able to send an XML to an external URL (basically user fills out custom order, pushes button, and info is sent to externally to fill order). Can I put the XML in the function request? Will this script support that?

    AntwortenLöschen