{"id":1473,"date":"2015-04-01T11:13:44","date_gmt":"2015-04-01T11:13:44","guid":{"rendered":"https:\/\/mahenderpal.wordpress.com\/?p=1473"},"modified":"2015-11-30T10:41:03","modified_gmt":"2015-11-30T10:41:03","slug":"calling-java-script-on-click-of-command-button-ms-crm-2015-step-by-step","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=1473","title":{"rendered":"Calling Java Script on click of command button MS CRM 2015 &#8211; Step by Step"},"content":{"rendered":"<p>In this blog we will provide step by step process\u00a0to call your java script function from\u00a0command button. We are using RibbonWorkbench editor to create command button. You can download RibbonWorkbench tool from <a href=\"https:\/\/ribbonworkbench.uservoice.com\/knowledgebase\/articles\/80806-download-ribbon-workbench-for-crm-2011-2013-2015\">here<\/a>\u00a0and import it your crm organization by navigating Settings-&gt;Solutions-&gt;Import.\u00a0Let\u2019s first add our demo java script function, use following steps:<\/p>\n<ul>\n<li>Create a solution by navigating Settings-&gt;Solutions-&gt;New and using following settings\n<ul>\n<li><strong>Name<\/strong>: Demo<\/li>\n<li><strong>Publisher<\/strong>: Select default publisher of your organization<\/li>\n<li><strong>Version<\/strong>: provide version number for example 1.0<\/li>\n<li>Click <strong>Save<\/strong><\/li>\n<\/ul>\n<\/li>\n<li>Select <strong>Web Resources<\/strong> from left components tree and click on <strong>New<\/strong><\/li>\n<li>Fill <strong>name<\/strong> and <strong>display<\/strong> name for your web resource and select <strong>Script (Jscript)<\/strong> under <strong>Type<\/strong> drop down<\/li>\n<li>Click on <strong>Text Editor<\/strong> button and add hello function like below<\/li>\n<\/ul>\n<p>function Hello() { \u00a0 alert(&#8220;This is custom button&#8221;); }<\/p>\n<ul>\n<li>Click on <strong>Ok<\/strong> button and <strong>Save<\/strong> and <strong>Publish<\/strong> your web resource<\/li>\n<\/ul>\n<p>Let\u2019s say we want to add custom command button on account form, so let\u2019s add account entity to our solution, follow below steps to add account entity to your solution<\/p>\n<ul>\n<li>Select <strong>Entities<\/strong> and click on <strong>Add Existing<\/strong> button<\/li>\n<li>Select <strong>Account<\/strong> entity from list and click on <strong>Ok<\/strong><\/li>\n<li>Select \u201c<strong>No, do not include Required Components<\/strong>\u201d under Missing Required Components dialog and click <strong>Ok<\/strong><\/li>\n<\/ul>\n<p>Now we need to open RibbonWorkBench tool to use our custom solution. Follow below steps<\/p>\n<ul>\n<li>Open RibbonWorkBench solution and select our <strong>Demo<\/strong> solution<\/li>\n<li>Drag a button and leave it next to <strong>Save<\/strong> button under Form section like below<a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/dragbutton.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1475\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/dragbutton.png?w=300\" alt=\"Dragbutton\" width=\"300\" height=\"169\" \/><\/a>Expend button under <strong>Solution Elements<\/strong> and setup properties from right hand section like below<a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/setproperty.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1476\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/setproperty.png?w=300\" alt=\"setproperty\" width=\"300\" height=\"144\" \/><\/a>Right click on <strong>Commands<\/strong> tree and select <strong>Add New<\/strong><\/li>\n<li>Click on <strong>Actions<\/strong> lookup and click on <strong>Add<\/strong> button<\/li>\n<li>Select <strong>Javasript Funciton Action<\/strong> and click on <strong>Ok<\/strong><\/li>\n<li>Use our <strong>Hello<\/strong> function and select our javascript web resource under <strong>library<\/strong> lookup and click on <strong>OK<\/strong><\/li>\n<li>Select our button again and associate command it with it like below<\/li>\n<\/ul>\n<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/showdialog.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1477\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/showdialog.png?w=300\" alt=\"showdialog\" width=\"300\" height=\"68\" \/><\/a><\/p>\n<ul>\n<li>Click on <strong>Publish<\/strong> button to publish all the changes.<\/li>\n<li>Create new account record or open existing account, you should get your custom button and on click on this button we should get alert<\/li>\n<\/ul>\n<p><a href=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/alert.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-1479\" src=\"https:\/\/mahenderpal.files.wordpress.com\/2015\/04\/alert.png?w=300\" alt=\"alert\" width=\"300\" height=\"177\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will provide step by step process\u00a0to call your java script function from\u00a0command button. We are using RibbonWorkbench editor to create command button. You can download RibbonWorkbench tool from here\u00a0and import it your crm organization by navigating Settings-&gt;Solutions-&gt;Import.\u00a0Let\u2019s first add our demo java script function, use following steps: Create a solution by navigating Settings-&gt;Solutions-&gt;New and using following&#8230; <a href=\"https:\/\/himbap.com\/blog\/?p=1473\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,6,7,8],"tags":[30,39,42],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1473"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1473"}],"version-history":[{"count":3,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1473\/revisions"}],"predecessor-version":[{"id":1909,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1473\/revisions\/1909"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}