locked
Add a button to CRM 2011 Form RRS feed

  • Question

  • I'm trying to add a Java Script button the a form in CRM 2011 and it will not work. ?I keep getting this

    "Invalid web resource type form form"       any thoughts?  I added it as a resource to my liberary.

     

    Thanks,

    Jim m.

    Monday, March 21, 2011 9:29 PM

Answers

  • create a new text field on CRM 2011 form (type : Multiple Lines of Text).

    OnLoad :

    ConvertToButton('new_fieldname', 'ButtonText','100px',FunctionName,'Button Label');

    the function definitions can also reside in another web resource.

    function ConvertToButton(fieldname, buttontext, buttonwidth,clickevent, title)

    {

     //check if object exists; else return
     if (document.getElementById(fieldname) == null)
    {
      return;
     }

     
     functiontocall=clickevent;
     crmForm.all[fieldname].DataValue = buttontext;
     crmForm.all[fieldname].readOnly = true;
     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="hand";
     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);
     crmForm.all[fieldname].style.lineHeight="14px";
     crmForm.all[fieldname+'_c'].style.visibility = 'hidden';
     crmForm.all[fieldname].title=title;
     window.focus();
     

     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";
     }
    }

     

    // now the definition of the function to call on button click

    function FunctionName()

    {

    // do something

    }

     

    Hope it helps ,

    S.Khan

     

     



    Monday, March 21, 2011 10:31 PM
  • Hi Jim,

    can you please share the code that you've added as a resource as well as form javascript?

    Thanks

    George


    George Doubinski, MVP http://crm.georged.id.au
    Wednesday, March 23, 2011 11:49 PM
    Moderator
  • so the first step would be to get the javascript working in crm 2011

    call this function on the entity's OnLoad event, you can also try to call that a field's OnChange event (just for testing).

    function OnLoad()

    {

    alert('Javascript works');

    }

    if you see this message box on form load then we can move onto putting a button on the form.


    cheers, S.Khan
    Wednesday, March 30, 2011 4:37 AM

All replies

  • create a new text field on CRM 2011 form (type : Multiple Lines of Text).

    OnLoad :

    ConvertToButton('new_fieldname', 'ButtonText','100px',FunctionName,'Button Label');

    the function definitions can also reside in another web resource.

    function ConvertToButton(fieldname, buttontext, buttonwidth,clickevent, title)

    {

     //check if object exists; else return
     if (document.getElementById(fieldname) == null)
    {
      return;
     }

     
     functiontocall=clickevent;
     crmForm.all[fieldname].DataValue = buttontext;
     crmForm.all[fieldname].readOnly = true;
     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="hand";
     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);
     crmForm.all[fieldname].style.lineHeight="14px";
     crmForm.all[fieldname+'_c'].style.visibility = 'hidden';
     crmForm.all[fieldname].title=title;
     window.focus();
     

     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";
     }
    }

     

    // now the definition of the function to call on button click

    function FunctionName()

    {

    // do something

    }

     

    Hope it helps ,

    S.Khan

     

     



    Monday, March 21, 2011 10:31 PM
  • Sanaulah, thanks for your help I just started working with CRM and not very good at it yet. When I creat the New Field what do I select for:

    Display Name:

    Name:

    then do I save it it and then add the rest of the code you have??

    Sorry for being so bad it this..

    JimM.

    Tuesday, March 22, 2011 1:19 PM
  • Every time I try to add a Button I get :  Invalid web resource type for form
    Tuesday, March 22, 2011 2:02 PM
  • Hi Jim,

    if you are new to this environment then do it step by step,

    1- Create a new field of type text

    after creating the new field, you can then use its "Name" in the code that I have posted above (for example, new_mynewfield), not the Display Name.

    basically the code will convert this field into a button and will attach a function to be called when clicked.

    Hope it helps, feel free to write back.

     

     

     

     

     


    cheers, S.Khan
    Wednesday, March 23, 2011 3:22 AM
  • I'm trying very had to make thia work but I'm doing something worng. Here is how i

    created the button.

    1. I created a text field on the form and called it new_button4

    2. I went to web resources and created a Java Scritp using your code and Name = new_button4

    3. but when I run it it just looks like a text field???

    What I'm I doing wrong?????

    Thanks,

    Jim M.

     

     

    Wednesday, March 23, 2011 1:04 PM
  • Jim,

    are you calling the javascript function OnLoad event of the form ?

    Load this webresource (that you created with the code in it) and call its function from onLoad event of the entity form.

    ConvertToButton('new_button4', 'ButtonText','100px',FunctionName,'Button Label');

    hope it helps,

     


    cheers, S.Khan
    Wednesday, March 23, 2011 10:14 PM
  • Jim,

    double check three things

    1- if the webresource that you created is of type JScript

    2- make sure it is loaded before the webresource which has OnLoad function

    3- call the function ConvertToButton from OnLoad function.


    cheers, S.Khan
    Wednesday, March 23, 2011 10:37 PM
  • Hi Jim,

    can you please share the code that you've added as a resource as well as form javascript?

    Thanks

    George


    George Doubinski, MVP http://crm.georged.id.au
    Wednesday, March 23, 2011 11:49 PM
    Moderator
  • sing. it is the code I got from SKhan:

    function ConvertToButton(new_button, buttontext, buttonwidth,clickevent, title)

    {

     //check if object exists; else return
     if (document.getElementById(fieldname) == null)
    {
      return;
     }

     
     functiontocall=clickevent;
     crmForm.all[fieldname].DataValue = buttontext;
     crmForm.all[fieldname].readOnly = true;
     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="hand";
     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);
     crmForm.all[fieldname].style.lineHeight="14px";
     crmForm.all[fieldname+'_c'].style.visibility = 'hidden';
     crmForm.all[fieldname].title=title;
     window.focus();
     

     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";
     }
    }

     

    // now the definition of the function to call on button click

    function FunctionName()

    {

    // do something

    }

     

    Thursday, March 24, 2011 1:17 PM
  • OK, so I will use this : It is your code I'm trying to use.

    ConvertToButton('new_button', 'ButtonText','100px',FunctionName,'Test Button);
    {

     //check if object exists; else return
     if (document.getElementById(fieldname) == null)
    {
      return;
     }

     
     functiontocall=clickevent;
     crmForm.all[fieldname].DataValue = buttontext;
     crmForm.all[fieldname].readOnly = true;
     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="hand";
     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);
     crmForm.all[fieldname].style.lineHeight="14px";
     crmForm.all[fieldname+'_c'].style.visibility = 'hidden';
     crmForm.all[fieldname].title=title;
     window.focus();
     

     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";
     }
    }

     

    // now the definition of the function to call on button click

    function FunctionName()

    {

    // do something

    }

     

    What do I put in for the FuntionName?  I'm sorry I'm new at this.. I'm do this is the web Resource .

    Thursday, March 24, 2011 1:24 PM
  • I do not know where ot put the code... Is thate a Utube video i see to show me how to do this . I jus need to get thru this the first time. I just want to know stept by stept how to add a button to a CRM 2011 form na make it work jus a simple button..

     

    Thanks, sorry for being so dumb!

    Jim M.

    Thursday, March 24, 2011 3:45 PM
  • Hi Jim,

    no worries, I will write a step by step blog for you tonight, and will then send you the link

     


    cheers, S.Khan
    Thursday, March 24, 2011 11:07 PM
  • Hi Jim,

    sorry for a delayed response.

    here are the steps.

    1- create a new field of type "Multiple Lines of Text" and name it as "new_buttonfield"

    2- create a new web resource of type "JScript" and name it as "myWebResource" and create a new function onLoad() in it

    function OnLoad()
    {
    
    }
    

    3- Now go to the entity form -> Customize tab -> Form -> Form Properties

    a screen will popup, Under "Form Libraries" click Add button and then select the "myWebResource".

    4- Now that you have loaded the library, on the same popup screen under "Event Handlers", 

    select "Form" for the dropdown "Control"

    and select "OnLoad" for the dropdown "Event"

    Now Click "Add" button, select the "myWebResource" as Library and enter the name of the onload function "OnLoad", which we created earlier.

    Click the checkbox "Enabled" and then click "OK". and then close the popup screen

    5- Now go to the "myWebResource" that you created earlier and then paste this code.

    function onLoad()
    
    {
    
    ConvertToButton('new_buttonfield', 'ButtonText','100px',FunctionName,'Button Label'); 
    
    }
    
    function ConvertToButton(fieldname, buttontext, buttonwidth,clickevent, title)
    
    {
    
     //check if object exists; else return
     if (document.getElementById(fieldname) == null)
    {
     return;
     }
    
     
     functiontocall=clickevent;
     crmForm.all[fieldname].DataValue = buttontext;
     crmForm.all[fieldname].readOnly = true;
     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="hand";
     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);
     crmForm.all[fieldname].style.lineHeight="14px";
     crmForm.all[fieldname+'_c'].style.visibility = 'hidden';
     crmForm.all[fieldname].title=title;
     window.focus();
     
    
     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";
     }
    }
    
     
    
    // now the definition of the function to call on button click
    
    function FunctionName()
    
    {
    
    // do something
    
    }
    
    

    Publish All Customization ( dont think it will make any difference but just in case).

    Please follow the steps carefully. You should be fine then.

    do let me know if you get it working.

     

     


    cheers, S.Khan
    • Proposed as answer by Sanaullah Khan Monday, March 28, 2011 12:28 AM
    Monday, March 28, 2011 12:28 AM
  • I tried it  each stept you sent and it still shows up as a field. No button. I wish I could send you a screen shot. I know how had you have been trying to help me. I'm sorry I just cannot seem to get it to work. I must be doing something worng.

     

    Here is what I did:

    1. I created a field called buttonfield This i put in the label field on the display tab.

    2. Under the Formating tab I made it 1 column

    3. Under the Details Tab: Display Name: buttonfield, Name: new_buttonfield

    4. Under Edit: Display Name: buttonfield, Name: new_buttonfield, Type: Multiple Lines of Text, maximun Lenght: 2,000, IME Mode: auto

    5. undar the Events Tab: added libraries: new_mywebresource

    6. under event Handlers: add: new_mywebresource     Also: Control: buttonfield, Event: Onchange

    I also created the web Resource code as well.  When I try to creat a new form it shows up as a field and it ERRORs out.

     

    Monday, March 28, 2011 4:52 PM
  • Here is the ERROR I'm getting when I run the form:

     

    Microsoft Dynamics CRM Error Report Contents

    <CrmScriptErrorReport>
      <ReportVersion>1.0</ReportVersion>
      <ScriptErrorDetails>
     <Message>Syntax error</Message>
     <Line>9</Line>
     <URL>/Tools/FormEditor/preview.aspx?appSolutionId=%7bFD140AAF-4DF4-11DD-BD17-0019B9312238%7d</URL>
     <PageURL>/Tools/FormEditor/preview.aspx?appSolutionId=%7bFD140AAF-4DF4-11DD-BD17-0019B9312238%7d</PageURL>
     <Function></Function>
     <CallStack>
     </CallStack>
      </ScriptErrorDetails>

    Monday, March 28, 2011 5:02 PM
  • Hi Jim,

    I went through your steps and I picked one thing.

    Call the OnLoad() function on the OnLoad Event of the form, why are you using OnChange event ?

    try OnLoad so that when the form gets loaded, it converts the field into button.

    hope it helps,


    cheers, S.Khan
    Monday, March 28, 2011 10:13 PM
  • and it appears to me that at line 9, there is a syntax error. please try to findout which line is it and send it to me.

    thanks


    cheers, S.Khan
    Monday, March 28, 2011 10:17 PM
  • I did use OnLoad i just typed it in wrong on the e-mail. I ran the code thru I can not find anything wrong. I have tried other code as well I just can noy get any Java Script to work on a form in CRM 2011. can you send me a Simple button with little code. and lets try that.

     

    Once again thanks for your help

     

    Jim M.

    Tuesday, March 29, 2011 1:11 PM
  • so the first step would be to get the javascript working in crm 2011

    call this function on the entity's OnLoad event, you can also try to call that a field's OnChange event (just for testing).

    function OnLoad()

    {

    alert('Javascript works');

    }

    if you see this message box on form load then we can move onto putting a button on the form.


    cheers, S.Khan
    Wednesday, March 30, 2011 4:37 AM
  • how did you go with it ?
    cheers, S.Khan MCTS
    Thursday, March 31, 2011 11:20 PM
  • i hope you were able to resolve this issue ?
    cheers, S.Khan MCTS
    Thursday, April 7, 2011 2:27 AM
  • well it did not work, man what is going on I can not get any JavaScript to work I have tried at least 20 different ones. What am I doing worng?
    Thursday, April 14, 2011 3:54 PM
  • I got it working !!!!!!!!!!!!!!!!
    Thursday, April 14, 2011 9:08 PM
  • great , so what were you missing there ?
    cheers, S.Khan MCTS
    Thursday, April 14, 2011 11:18 PM
  • It was very helpfull to me, thanks so much.

    I got it working fine.

     

    Thanks again

    Guillermo

    Sunday, May 1, 2011 8:24 PM
  • no worries, best of luck !
    cheers, S.Khan MCTS
    Sunday, May 1, 2011 11:29 PM
  • Do you know if this will work with the online. I am getting the error that my onload function is not an object.

     

    c

    Wednesday, May 4, 2011 4:16 AM
  • have you seen that actual html source of the page in CRM online that OnLoad event is there or not ? I have not tried in CRM Online but in theory it should work, if you can call other functions from onLoad function then this should be fine. hope it helps!
    cheers, S.Khan MCTS
    Wednesday, May 4, 2011 4:44 AM
  • Yes the onload event is there. I copied the code to my weresource that controls this form and added the following to the onload function ConvertToButton("new_timebutton", "yrdy","100px",timenow,"Now");. The onload is already doing a bunch of screen setup but when I add your code to the library and add the above the onload function nothing runs onload and get the error that the onload function is not an object.
    Wednesday, May 4, 2011 1:43 PM
  • I have the button working fine in the CRM On-Line version too, same code as in the on-premise. So probably your problem is in the code you added.

     

    Kind Regards

    Gmo

     

    Wednesday, May 4, 2011 2:47 PM
  • getting closer. I fat fingered the onload and added an extra }

     

    Now I an getting a FunctionName undefined when it runs the converttobutton line of the onload script. I have created the FunctionName function to grab the current date time...

     

    Any thoughts on this one?

     

    c

    Wednesday, May 4, 2011 4:00 PM
  • Solved the problem I had an extra } from another function mixed in.

     

    Is there a way to add parameter to the click event function?

     

    Wednesday, May 4, 2011 6:44 PM
  • Hi Chris, Its good to hear that it is working for you now. can you explain what you are trying to do with parameters ?
    cheers, S.Khan MCTS
    Wednesday, May 4, 2011 11:15 PM
  • Hello Jim,

    Here are 2 examples for both CRM 2011 and CRM 4.0http://www.bizforward.cws-international.com/2011/01/25/crm-2011-custom-form-button/.

    The one for CRM 4.0 has some fixes than Sanaulah Khan's version (copy-pasted with no source quoted).

    If you have further questions, I'll gladly help.


    Cornel Croitoriu - Senior Software Developer & Entrepreneur

    If this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful"

    Biz-Forward.comCroitoriu.NET

    Thursday, May 5, 2011 6:53 AM
  • Thanks Sanaulah for your help on creating a button on CRM form. :)

     


    Prathmesh If this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful" http://patelprathmesh.blogspot.com/
    Wednesday, October 26, 2011 7:03 PM
  • Don't know if you are still looking for a solution, but here is one I wrote as a Jquery Plugin, Its pretty flexible!

    http://www.netrisoft.net/2012/01/24/adding-buttons-to-a-crm-from-using-jquery/

    • Proposed as answer by vasubabuk Friday, March 15, 2013 6:22 AM
    Saturday, February 11, 2012 4:14 PM
  • Try this link

    http://thecrmworld.wordpress.com/2011/04/

    • Proposed as answer by Beaver_Rox Tuesday, May 1, 2012 4:25 AM
    Thursday, April 19, 2012 5:31 AM
  • Hi,

    create a new text field on CRM 2011 form (type : Multiple Lines of Text).

    OnLoad :

    ConvertToButton('new_fieldname', 'ButtonText','100px',FunctionName,'Button Label');

    the function definitions can also reside in another web resource.

    function ConvertToButton(fieldname, buttontext, buttonwidth,clickevent, title)

    {

     //check if object exists; else return
     if (document.getElementById(fieldname) == null)
    {
      return;
     }

     
     functiontocall=clickevent;
     crmForm.all[fieldname].DataValue = buttontext;
     crmForm.all[fieldname].readOnly = true;
     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="hand";
     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);
     crmForm.all[fieldname].style.lineHeight="14px";
     crmForm.all[fieldname+'_c'].style.visibility = 'hidden';
     crmForm.all[fieldname].title=title;
     window.focus();

     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";
     }
    }

     

    // now the definition of the function to call on button click

    function FunctionName()

    {

    // do something

    }

     

    Hope it helps 

    • Proposed as answer by vasubabuk Wednesday, March 20, 2013 4:20 AM
    Wednesday, March 20, 2013 4:20 AM
  • Hi,

    create a new text field on CRM 2011 form (type : Multiple Lines of Text).

    OnLoad :

    ConvertToButton('new_fieldname', 'ButtonText','100px',FunctionName,'Button Label');

    the function definitions can also reside in another web resource.

    function ConvertToButton(fieldname, buttontext, buttonwidth,clickevent, title)

    {

     //check if object exists; else return
     if (document.getElementById(fieldname) == null)
    {
      return;
     }

     
     functiontocall=clickevent;
     crmForm.all[fieldname].DataValue = buttontext;
     crmForm.all[fieldname].readOnly = true;
     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="hand";
     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);
     crmForm.all[fieldname].style.lineHeight="14px";
     crmForm.all[fieldname+'_c'].style.visibility = 'hidden';
     crmForm.all[fieldname].title=title;
     window.focus();

     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";
     }
    }

     

    // now the definition of the function to call on button click

    function FunctionName()

    {

    // do something

    }

     

    Hope it helps 

    hi it works well but buttontext value always comes empty 

    is there any solution ?


    Crm Software Specialist

    Thursday, April 25, 2013 9:11 AM
  • I having the same issue, I cannot get it to work.
    Monday, June 24, 2013 2:48 PM
  • <rant>I see this solution posted and every time I wonder how many professional CRM developers actually use it, because you shouldn't.  This is UNSUPPORTED code.  That means is Microsoft decides to change the way they create the DOM on your page, your form is going to stop working and there won't be any documentation to help you fix it.  Microsoft will not support your project if the problem is because of code like this.</rant>

     There is a perfectly supported way (and much cleaner, IMO) to get a button on your form.  And it's reusable so you don't have to hack your form whenever you need a button.  All you have to do is create an HTML web resource with the following code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>
       <script type="text/javascript"> 
        
            function setText(text) {
                if ( text == undefined )
                {
                    text =  decodeURI(location.search).replace("?data=", "").replace('%3a',':').replace('[br]','<br>');
                }
    
        	    var msg = document.getElementById('crmButton');
    
    		    msg.value = text
    	
            }
    
    
     </script>
        <title></title>
     </head>
    
    
    
    <body onload="setText();" style="border: 0px; padding-left: 0px; padding-top: 0px; margin-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: 0px; font-family:Segoe UI, Tahoma, Arial; font-size:11px; font-weight:normal;color:#3b3b3b; background-color:rgb(246, 248, 250)">
        <button type='button' id="crmButton" style='width:100%; height:100%;'>CRM Button</button>
    </body>
    </html>
    

    Then, on your form, go to the "Insert" tab and choose "Web Resource" and select the webresource you created.  Now you have a button on your form.  You can gain access to this button through javascript and attach events.  As you can see in the code, there is a very simple function to change the text of the button.  You can add other functions to extend it's usefulness further.  If you ever need a button again, just insert the web resource and away you go.  No attributes need to be created only to be modified into a button.  No mess.

    Hope that helps someone and I hope this "Add an attribute and change it into a button with javascript" idea goes the way of the dodo.

    • Proposed as answer by Razvan York Friday, August 9, 2013 5:58 PM
    Monday, June 24, 2013 6:33 PM
  • Thanks for the code, it work the first time. One question, I thought DOM calls were not supported by CRM (document.getElementById('crmButton').  Is that true, if so is there a xrm.page call that works? 
    Tuesday, June 25, 2013 1:58 PM
  • In this case, it's perfectly fine to do a DOM call because it's in our webresource.  We created "crmButton".  It's only things Microsoft created that we are not allowed to use the DOM access model on.
    Tuesday, June 25, 2013 2:10 PM
  • That webResource idea doesn't seem very scalable though.  How would I
    put 20-30 buttons on one page?  Each web resource has a hard-coded ID
    for the button object: 'CrmButton'.  Wouldn't one have to then create
    additional web resources for each button, with a different ID for each
    button, if they wanted to manipulate them through JavaScript?  If not,
    how?

    It is at least a supported solution, so it is better than the current Answer, but how would one create more than one button?


    Friday, August 9, 2013 5:54 PM
  • You would create one web resource.  When it's added to the form, you give it a name.  So if you give it the name "button1", you can get that instance of the button in javascript using the Xrm.Page object.  Here's the function we use:

    //gets the specified web resource on the form
    function GetWebResource( name )
    {
    	try
    	{
    		var wrt = Xrm.Page.getControl( name );
    		if ( wrt != null )
    		{
    		    if ( wrt.getObject().contentWindow.window != undefined )
    		    {
    		        return wrt.getObject().contentWindow.window;
    		    }
    		    else
    		    {
    		        return null;
    		    }
    		}
    		else
    			return null;
    	}
    	catch ( e )
    	{
    		debugger;
    		alert( "Error encountered(GetWebResource): " + e.message );
    	}
    }


    This code returns an object that will allow us to directly interact with our web resource's functions.  So, if you have a function on your button called "ChangeText", you could do:

    var myButton = GetWebResource("WebResource_button1");
    myButton.ChangeText("My New Text");
    


    Friday, August 9, 2013 6:05 PM
  • That is very interesting, but I find that difficult to attach events or enable/disable the button if you are using multiple functions spread throughout your JavaScript.  I am posting some of my progress in adopting this button technique in case it helps anyone else...

    Here is how I have modified your HTML Web Resource to attach events/change text and enable/disable:

    <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE> <SCRIPT type=text/javascript src="ClientGlobalContext.js.aspx"></SCRIPT> <SCRIPT type=text/javascript> function setText(text) { if (text === undefined) { text = decodeURI(location.search).replace("?data=", "").replace('%3a', ':').replace('[br]', '<br>'); } var msg = document.getElementById('crmButton'); msg.value = text; } //Set the text for the button & attach event function initializeButton(text, clickEvent) { if (text !== undefined) { document.getElementById('crmButton').value = text; } if (clickEvent !== undefined) { document.getElementById('crmButton').attachEvent("onclick", clickEvent); //Legacy IE code } function enable() { document.getElementById('crmButton').disabled = false; } function disable() { document.getElementById('crmButton').disabled = true; } </SCRIPT> <META charset=utf-8></HEAD> <BODY style="BORDER-BOTTOM: 0px; BORDER- BACKGROUND-COLOR: rgb(246,248,250); MARGIN: 0px; PADDING- FONT-FAMILY: Segoe UI, Tahoma, Arial; COLOR: #3b3b3b; FONT-SIZE: 11px; BORDER- FONT-WEIGHT: normal; BORDER-RIGHT: 0px; PADDING- onload=setText(); contentEditable=true> <BUTTON style="WIDTH: 100%; HEIGHT: 100%" id="crmButton">CRM Button</BUTTON> </BODY></HTML>

    And here is a slight change to your JavaScript that runs with the rest of the JavaScript:

    function GetWebResource(name)
    {
        try
        {
            var wrt = Xrm.Page.getControl("WebResource_" + name );//automatically adds WebResource_
            if ( wrt != null )
            {
                if ( wrt.getObject().contentWindow.window != undefined )
                {
                    return wrt.getObject().contentWindow.window;
                }
                else
                {
                    return null;
                }
            }
            else
                return null;
        }
        catch ( e )
        {
            //debugger;
            alert("Error encountered(GetWebResource): " + e.message);
        }
    } 

    Then in JavaScript you'd have to do this for each button that is set:

    var btnName = GetWebResource("ButtonName"); btnName.initializeButton("Do Stuff", functionToRun); btnName.disable();

    function functionToRun() {

    //do something

    }

    The issue is that you have to create a new variable (ie btnName) for each function to assign a variable to GetWebResources("ButtonName") in order to then call one of the ButtonName's functions.  What if you wanted to have several different functions being able to disable/enable the button, change the text, etc.? Doesn't seem very easy and there'd be lots of redundant calls to initialize the btnName variable.  Unless there's a different way...


    • Proposed as answer by Janet T Friday, October 4, 2013 3:27 PM
    • Edited by Razvan York Thursday, October 31, 2013 9:07 PM Fixed script issue
    Saturday, August 10, 2013 12:01 AM
  • Glad I  persevered to the bottom of this long chain for a supported method as the unsupported doesn’t work in IE9/10 either it seem.

    Razvan, I tried your method and had to change the function syntax to:

       function initializeButton(text, clickEvent) {
            if (text !== undefined) {
                document.getElementById('crmButtonProduct').value = text;
            }
            if (clickEvent !== undefined) {
                try {
                    document.getElementById('crmButtonProduct').attachEvent("onclick", clickEvent); //Legacy IE code
                }
                catch (exception) { }
            }
        }

    This is all working now except my button name doesn’t change on my form.  I’m wondering if this is a refresh issue?  Any ideas?  My calling code is:

            var btnName = GetWebResource("addproduct");

            btnName.initializeButton("Add Product", AddProduct);

            btnName.setText("Add Product");

            Xrm.Page.getControl("WebResource_addproduct").setVisible(true);

    Friday, October 4, 2013 3:26 PM
  • I am able to get the button on the form. Looks great. Now how do I assign actions to it. For example, what if I wanted to Save and Close the form while simultaneously changing the value of a field-- aka a Submit button.
    Wednesday, October 9, 2013 4:27 PM
  • Hello,

    Here you can get code for creating a button in CRM 2013

    http://crmjavascripts.blogspot.in/2013/12/add-button-on-crm-2013-form.html


    jsh

    Sunday, December 22, 2013 4:42 PM
  • The link  to http://crmjavascripts.blogspot.in/2013/12/add-button-on-crm-2013-form.html doesn't work.

    Anyone got another link?

    Friday, January 24, 2014 11:26 AM
  • Not sure what's wrong with the link, but the URL is correct.  I just copied/pasted it in another window and it loaded.

    Wednesday, July 16, 2014 11:10 PM
  • Dear Sanaullah Khan,

    Thank you for the above code. It worked perfectly well in Internet Explorer.
    But when we ran it on Google Chrome it threw the following error:

    JavaScript Error on Chrome

    It failed to show the Button. So, What's this error & How can we solve it?

    Best Regards,
    Harshit Mehta

    Wednesday, November 4, 2015 7:37 AM