Tag Archives: web resource

Make a Custom Button Web Resource (HTML/JavaScript) in Microsoft Dynamics CRM

Sometimes you just need a button. Adding a custom HTML button to an entity form in CRM has a ton of onClick() possibilities:

  • Hide a section or tab on the form
  • Trigger a workflow
  • Allow a user to submit information
  • Validate data entered by a user
  • Lock, unlock or update fields
  • Display a celebratory fireworks animation and play a .midi file

Okay you might not want to do that last one, but the possibilities are endless! This post will show you how to create a simple button in HTML and add some JavaScript to perform a function.

At work I had the task to create a button on the main Email form that would trigger a workflow. Our client wants to be able to review a few draft emails, then press the button to iterate through all draft emails and send them.

Create the Button Web Resource

Navigate to your solution and create a HTML New Web Resource.

 

 

Open up the Text Editor (or something like Notepad++) and create your button by adding HTML to the Source tab. You can preview your button on the Rich Text tab. It can be as simple or as detailed as you want it to be, here’s some barebones code. After you save your web resource, Dynamics automatically adds a few tags.

 

Add a Script to the HTML

Looks great! Now let’s make something happen when you click it. Let’s add some <script> tags with a JavaScript that changes a field’s value when a user clicks the button. We’ll call the function “changeFieldValue_onClick” and add an “onclick” event to the button.

A few notes about the code above:

  • Adding “debugger;” to the JavaScript allows you to step through and test your button after placing it on the form. An example of this is shown below.
  • var sendEmail holds the Attribute “esdc_sendemailtrigger” which is a Two Option Set. We then check if the value is “No”. If it’s “No” (false), set to “Yes” (true).
  • My custom workflow is triggered on the field change of “esdc_sendemailtrigger”: if it’s set to “Yes” the process is run and then it sets the value back to “No”.
  • I added the .setSubmitMode(“always”) to ensure the value of the field is changed immediately on the click of the button.
  • Lastly, don’t forget to call your new function “changeFieldValue_onClick” to your HTML button’s onclick event.

     

 

 

Publish All Customizations (<– very important step!). Okay your button is ready for action! Go ahead and pop that on any form or entity of your choosing. The field I want to change is on the Email entity’s Main Form, so I’ll put it there. Navigate to the Insert tab on the Form Editor, choose a section and press Web Resource.

 

Find your new button in the Lookup, give it a Name and optional Label. Save and publish your customizations and now you can take a look at your form and test the button. Press F12 before pressing your button to use the debugger and step through your code.

Fin!