{"id":2378,"date":"2016-08-22T03:34:04","date_gmt":"2016-08-22T03:34:04","guid":{"rendered":"http:\/\/himbap.com\/blog\/?p=2378"},"modified":"2016-08-22T03:34:04","modified_gmt":"2016-08-22T03:34:04","slug":"adding-custom-html-button-for-attachment","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=2378","title":{"rendered":"Adding custom html button for attachment"},"content":{"rendered":"<p>Did you ever get a requirement to add html button on entity form?? If yes this post will help you to implement this requirement. Let\u2019s say we are building a registration form in CRM and we need to provide buttons to add attachment for ID proofs. Let\u2019s see how we can do this \ud83d\ude42<br \/>\nWe mainly have two high level requirements:<\/p>\n<p>1. Add a button on entity form<br \/>\n2. Adding attachment to record<\/p>\n<p><strong>Add a button on entity form<\/strong><\/p>\n<p>There is no direct way of adding button to entity form but we have options like converting text field to button using Java Script or creating html web resource. In this post we are going to create button through html web resource. We can use following code to add attachment button:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;&lt;head&gt;\r\n\r\n&lt;style&gt;\r\n.button {\r\n    background-color: 00bfff;\r\n    border: none;\r\n    color: white;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    font-size: 10px;\r\n    cursor: pointer;\r\n    border-radius: 6px;}\r\n&lt;\/style&gt;\r\n&lt;meta charset=&quot;utf-8&quot;&gt;&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;button class=&quot;button&quot;&gt;Attach&lt;\/button&gt;\r\n&lt;\/body&gt;&lt;\/html&gt;\r\n<\/pre>\n<p>We can create a html web resource and can use above code under source tab, so we should be able to see button created like following:<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentbutton2.png\"><img decoding=\"async\" loading=\"lazy\" class=\" size-full wp-image-2379 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentbutton2.png\" alt=\"attachmentbutton2\" width=\"161\" height=\"100\" \/><\/a><\/p>\n<p><strong>Adding attachment to record<\/strong><br \/>\nNow we need to add a method to add attachment using our button. We are going to add attachment to notes so we have two options for this, either we can a custom dialog and write a service call to add attachment to notes or we can use a system method to do the same for quick implementation. CRM has a following system method to show attachment dialog (<strong>And this is unsupported to use this method as this is not documented in CRM SDK<\/strong>)<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nMscrm.RibbonActions.addFileToRecord(entityETC, entityID)\r\n<\/pre>\n<p>Where <strong>entityETC<\/strong> is target entity code in CRM and <strong>entityID<\/strong> is target entity record GUID. But if we are using above code in updated forms we need to prefix parent to call this method like following:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nparent.Mscrm.RibbonActions.addFileToRecord(entityETC, entityID)\r\n<\/pre>\n<p>so here is our final html web resource code:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;&lt;head&gt;\r\n\r\n&lt;style&gt;\r\n.button {\r\n    background-color: 00bfff;\r\n    border: none;\r\n    color: white;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    font-size: 10px;\r\n    cursor: pointer;\r\n    border-radius: 6px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;script&gt;\r\nfunction Addattachment()\r\n{\r\nvar entityETC=10007; \/\/entity code\r\nvar entityID =window.parent.Xrm.Page.data.entity.getId();\/\/to read parent record ID\r\nparent.Mscrm.RibbonActions.addFileToRecord(1, entityID)\r\n}\r\n&lt;\/script&gt;\r\n&lt;meta charset=&quot;utf-8&quot;&gt;&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;button class=&quot;button&quot; onclick=&quot;Addattachment()&quot;&gt;Attach&lt;\/button&gt;\r\n&lt;\/body&gt;&lt;\/html&gt;\r\n<\/pre>\n<p>We can update our existing html web resource with above updated code. Finally we need to add this web resource to our entity form using Web Resource button under Insert menu.We have created a custom entity for registration and added required fields. We have added a two column section under default two column tab, and now we are going to place web resources next to ID proof text boxes.<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentidproof.png\"><img decoding=\"async\" loading=\"lazy\" class=\" size-medium wp-image-2384 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentidproof-300x139.png\" alt=\"attachmentidproof\" width=\"300\" height=\"139\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentidproof-300x139.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentidproof.png 317w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>While adding web resource make sure to set formatting option like below:<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentformat.png\"><img decoding=\"async\" loading=\"lazy\" class=\" size-medium wp-image-2381 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentformat-300x257.png\" alt=\"attachmentformat\" width=\"300\" height=\"257\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentformat-300x257.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentformat.png 497w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nNow after saving and publishing our changes, it will allow us to add attachment on click on attachment button after saving record, like following:<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentdialog.png\"><img decoding=\"async\" loading=\"lazy\" class=\" size-medium wp-image-2382 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentdialog-300x116.png\" alt=\"attachmentdialog\" width=\"300\" height=\"116\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentdialog-300x116.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentdialog-624x242.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2016\/08\/attachmentdialog.png 805w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you ever get a requirement to add html button on entity form?? If yes this post will help you to implement this requirement. Let\u2019s say we are building a registration form in CRM and we need to provide buttons to add attachment for ID proofs. Let\u2019s see how we can do this \ud83d\ude42 We mainly have two high level&#8230; <a href=\"https:\/\/himbap.com\/blog\/?p=2378\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":2380,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,275],"tags":[380,381,379,382],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2378"}],"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=2378"}],"version-history":[{"count":8,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2378\/revisions"}],"predecessor-version":[{"id":2391,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2378\/revisions\/2391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/2380"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}