Add a button to CRM 2011 Form
-
Monday, March 21, 2011 9:29 PM
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.
Answers
-
Monday, March 21, 2011 10:31 PM
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
- Proposed As Answer by Sanaulah Khan Monday, March 21, 2011 10:32 PM
- Marked As Answer by Jamie MileyMVP, Moderator Monday, February 13, 2012 3:48 PM
-
Wednesday, March 23, 2011 11:49 PMModerator
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- Marked As Answer by Jamie MileyMVP, Moderator Monday, February 13, 2012 3:48 PM
-
Wednesday, March 30, 2011 4:37 AM
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- Marked As Answer by Jamie MileyMVP, Moderator Monday, February 13, 2012 3:49 PM
All Replies
-
Monday, March 21, 2011 10:31 PM
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
- Proposed As Answer by Sanaulah Khan Monday, March 21, 2011 10:32 PM
- Marked As Answer by Jamie MileyMVP, Moderator Monday, February 13, 2012 3:48 PM
-
Tuesday, March 22, 2011 1:19 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 2:02 PMEvery time I try to add a Button I get : Invalid web resource type for form
-
Wednesday, March 23, 2011 3:22 AM
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 1:04 PM
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 10:14 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:37 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 11:49 PMModerator
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- Marked As Answer by Jamie MileyMVP, Moderator Monday, February 13, 2012 3:48 PM
-
Thursday, March 24, 2011 1:17 PM
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:24 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 .
- Proposed As Answer by Guillermo Enrique Sunday, May 01, 2011 8:25 PM
- Unproposed As Answer by Guillermo Enrique Sunday, May 01, 2011 8:25 PM
-
Thursday, March 24, 2011 3:45 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 11:07 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 -
Monday, March 28, 2011 12:28 AM
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 Sanaulah Khan Monday, March 28, 2011 12:28 AM
-
Monday, March 28, 2011 4:52 PM
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 5:02 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 10:13 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:17 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 -
Tuesday, March 29, 2011 1:11 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.
-
Wednesday, March 30, 2011 4:37 AM
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- Marked As Answer by Jamie MileyMVP, Moderator Monday, February 13, 2012 3:49 PM
-
Thursday, March 31, 2011 11:20 PMhow did you go with it ?
cheers, S.Khan MCTS -
Thursday, April 07, 2011 2:27 AMi hope you were able to resolve this issue ?
cheers, S.Khan MCTS -
Thursday, April 14, 2011 3:54 PMwell 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 9:08 PMI got it working !!!!!!!!!!!!!!!!
-
Thursday, April 14, 2011 11:18 PMgreat , so what were you missing there ?
cheers, S.Khan MCTS -
Sunday, May 01, 2011 8:24 PM
It was very helpfull to me, thanks so much.
I got it working fine.
Thanks again
Guillermo
-
Sunday, May 01, 2011 11:29 PMno worries, best of luck !
cheers, S.Khan MCTS -
Wednesday, May 04, 2011 4:16 AM
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 04, 2011 4:44 AMhave 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 04, 2011 1:43 PMYes 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 04, 2011 2:47 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 04, 2011 4:00 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 04, 2011 6:44 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?
c
-
Wednesday, May 04, 2011 11:15 PMHi 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 -
Thursday, May 05, 2011 6:53 AM
Hello Jim,
Here are 2 examples for both CRM 2011 and CRM 4.0: http://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 & EntrepreneurIf this post answers your question, please click "Mark As Answer" on the post and "Mark as Helpful"
- Proposed As Answer by Cornel CroitoriuMicrosoft Community Contributor Thursday, May 05, 2011 6:54 AM
-
Wednesday, October 26, 2011 7:03 PM
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/ -
Saturday, February 11, 2012 4:14 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/
-
Thursday, April 19, 2012 5:31 AM
Try this link
http://thecrmworld.wordpress.com/2011/04/
- Proposed As Answer by Beaver_Rox Tuesday, May 01, 2012 4:25 AM