Dynamics CRM Creating and Debugging JavaScript Code

One of the benefits of using Dynamics CRM is the ability to write client side JavaScript code to perform actions on the user interface. Let’s go through an example of how to do this. In this example, we will show a message box when a user changes a value on a field. We will do this on the Website field on the Accounts form:

1. Firstly, edit the Accounts form to display the developer view:

   

2. Double click the Website field:

   

3. Note the name of the website field – websiteurl:

   

4. Under Events->Form Libraries click add. We will add a new library and a new function to that library.

   

5. Click New:

   

6. Enter in information regarding the new script. Before saving, click Text Editor:

   

7. Enter some text into the text editor. Add some simple code below. Here we have some JavaScript that displays an alert.

   

8. Click OK, Save and Publish.

   

9. Select the new library and click Add:

   

10. With Website->Change selected, go to the Events tab and click Add to add a new library:

    

11. Change the Library drop down to select the new_WebsiteChange libarary. Enter the function within the library as WebsiteChange, the function created above. Ensure Enabled is checked:

    

12. The field properties should now look like below. Click OK:

    

13. Click Save and Publish on the form.
14. Go to the Accounts form and enter a new account. Enter a website and tab off the website. A new alert will now appear. This is the JavaScript code running:

    

15. From here, we can debug the JavaScript on the form. Open the WebsiteChange function and add the line below. This will tell the browser to debug at this point:debugger;
    

    

16. Save and publish the changes, then refresh the Accounts form.
17. Click F12 to bring up the developer tools.
18. Go to the website field and change the website. This will enable the debugger breakpoint to be hit by the developer tools:

    

19. From here you can step into the code, debug etc.
20. Now, add some more code to get the website field on the page:

    

    The code should look like this:

    function WebsiteChange() {

    debugger;

    var ws = Xrm.Page.getAttribute(“websiteurl”).getValue();

    alert (“The website ” + ws + ” has changed.”)
    }

21. Save and publish the code, and reload the page. Hit F12 to open the debugger.
22. Change the website on the page. Note the debugger starts. Here I am doing this in Chrome. Step through the code and note you can zoom over the variables to see the data:

    

23. Step through to complete the code. A message will now show the website name in the alert:

    

24. If there is a compile issue with the JavaScript code, you will see a message like below:
    

    

25. Open the text file and view details regarding the error message.

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.com | LinkedIn | Twitter | YouTube

Facebook

Twitter

Linkedin