Post
Ask Question

Adding Custom HTML Button For Attachment

Did you ever get a requirement to add an HTML button on an entity form? If yes, this post will help you to implement this requirement. Let’s say, we are building a registration form in CRM and we need to provide the buttons to add the attachment for the ID proofs. Let’s see, how we can do this :)
 
We mainly have two high level requirements:
  1. Add a button on the entity form
  2. Adding an attachment to the record 

Add a button on entity form

There is no direct way of adding the button to an entity form, but we have the options like converting a text field to a button, using Java Script or creating HTML Web resource. In this post, we are going to create a button through HTML Web resource. We can use the following code to add an attachment button:

  1. <html><head>  
  2.  <style>  
  3. .button {  
  4.     background-color: 00bfff;  
  5.     border: none;  
  6.     color: white;  
  7.     text-align: center;  
  8.     text-decoration: none;  
  9.     display: inline-block;  
  10.     font-size: 10px;  
  11.     cursor: pointer;  
  12.     border-radius: 6px;}  
  13. </style>  
  14. <meta charset="utf-8"></head>  
  15. <body>  
  16. <button class="button">Attach</button>  
  17. </body></html>  
We can create an HTML Web resource and can use the code, given above, under source tab. Thus, we should be able to see the button is created like following:

 
Adding an attachment to the record

Now, we need to add a method to add an attachment, using our button. We are going to add an attachment to the notes. Thus, we have two options for this, either we can add a custom dialog and write a Service call to add an attachment to the notes or we can use a system method to do the same for quick implementation. CRM has a following system method to show an attachment dialog (This is not documented in CRM SDK).
  1. Mscrm.RibbonActions.addFileToRecord(entityETC, entityID)  
EntityETC is the target entity code in CRM and entityID is the target entity record in GUID. If we are using the code, given above, in the updated forms, we need to prefix a parent to call this method, as shown below:
  1. parent.Mscrm.RibbonActions.addFileToRecord(entityETC, entityID)  
  2.    
Here is our final HTML Web resource code:
  1. <html><head>  
  2.    
  3. <style>  
  4. .button {  
  5.     background-color: 00bfff;  
  6.     border: none;  
  7.     color: white;  
  8.     text-align: center;  
  9.     text-decoration: none;  
  10.     display: inline-block;  
  11.     font-size: 10px;  
  12.     cursor: pointer;  
  13.     border-radius: 6px;  
  14. }  
  15. </style>  
  16. <script>  
  17. function Addattachment()  
  18. {  
  19. var entityETC=10007; //entity code  
  20. var entityID =window.parent.Xrm.Page.data.entity.getId();//to read parent record ID  
  21. parent.Mscrm.RibbonActions.addFileToRecord(1, entityID)  
  22. }  
  23. </script>  
  24. <meta charset="utf-8"></head>  
  25. <body>  
  26. <button class="button" onclick="Addattachment()">Attach</button>  
  27. </body></html>  
We can update our existing HTML Web resource with the updated code, mentioned above. 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 the registration and added the 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.

 

While adding the Web resource, make sure to set the formatting option, as given below:

 

Now, after saving and publishing our changes, it will allow us to add an attachment on the click of an attachment button after saving the record, as shown below:

 
 
If you need any help in Microsoft CRM, Contact US.


Similar Articles
HIMBAP
We are expert in Microsoft Power Platform.