Create your first JavaScript Web Resource

Syed HussainPost Date: February 23, 2017

Microsoft Dynamics Consultant

[vc_row][vc_column][cq_vc_zoomimage displaystyle=”magnify” magnifyimage=”6302″ bordercolor=”#ffffff”][vc_separator][vc_empty_space height=”50px”][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”Summary”]The fastest and probably the easiest way to add custom code to Dynamics CRM is through JavaScript and Web Resources. In this article, I’ll show you how to create a JavaScript web resource to extract the text value out of the Account Name and display the name in the Description field with a Hello, as a prefix.

Hello Syed Hussain

Some items covered in this tutorial:

Create a Solution
Create a JavaScript Web Resource
Add the JavaScript Web Resource to the Account Form
Add the JavaScript Function to the Account Name, onChange Event

Understanding how to use JavaScript in Dynamics CRM is the first step to creating complex business logic that Business Rules or Processes cannot solve.[/vc_wp_text][vc_empty_space height=”100px”][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”1. Create a new Dynamics CRM solution”]Start by creating a new Solution. We’ll use the CRM solution to host our JavaScript File.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”2. Create a new Web Resource”]Create a new CRM Web Resource. Click the icon labeled ‘Web Resources‘.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”3. Create a new JScript File”]Copy the details below as you see it.

You’ll notice that once you have entered the Web Resource details, you will not be able to save this Web Resource. This is because JScript resources need to have either an attached JScript file, or you can use the Text Editor to paste some saved JScript code. For this simple tutorial, we’ll go with pasting the code into the Text Editor.

Click the Text Editor button to open up the text area. Then copy and paste the code into the text area using the snippet below.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”4. Add JavaScript snippet”]Copy and paste the JavaScript snippet below into the text area.

//----------------------------------------------------------------------------// 
//Purpose: Set the Account name to Upper Case
//Author: Syed Hussain
//Date: 02/02/2017 
//----------------------------------------------------------------------------// 
function HelloAccountName() {

    // Get the current Account name text value
    var name = Xrm.Page.getAttribute("name").getValue(); 

    // Add the text "Hello"
    var message = "Hello " + name;

    // Set the Description field
    Xrm.Page.getAttribute("description").setValue(message); 

    // Done
}
//----------------------------------------------------------------------------//

//----------------------------------------------------------------------------//

//Purpose: Set the Account name to Upper Case

//Author: Syed Hussain

//Date: 02/02/2017

//----------------------------------------------------------------------------//

function HelloAccountName() {

// Get the current Account name text value

var name = Xrm.Page.getAttribute("name").getValue();

// Add the text "Hello"

var message = "Hello " + name;

// Set the Description field

Xrm.Page.getAttribute("description").setValue(message);

// Done

}

//----------------------------------------------------------------------------//

You should end up with the following:

[/vc_wp_text][vc_wp_text title=”5. Publish all changes”]Save all the changes and hit the Publish All Customizations button.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”6. The Account Form”]We’ll now make changes to the Account form.

This is the current Account Form. As mentioned before, what we want to do here is output the text “Hello Account Name”, where Account Name will be the Account Name you have entered.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”7. Edit the Account Form”]Place the Account Form into Edit mode.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”8. Add the Web Resource to the Account Form”]It’s time to add that JavaScript Web Resource to the Account form.

Double-click on the ‘Form Properties‘ icon in the header.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”9. Edit Form Properties”]The Form Properties has several tabs. The Tab that we’re interested in is Events.

There are two sections in the Events tab, Form Libraries and Event Handlers. You’ll notice that the Form Libraries section already has a library attached – this is the Activity Feeds script. We’ll add our script to the Form Libraries section.

Click Add under Form Libraries.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”10. Add your library to the Form Libraries section”]Search for the library record named ‘new_account_form_library.js‘. Once you’ve found the library, click the Add button. This will add your script to the form.

You should end up with something that looks like this:

Click OK. The window should now close. Save any other changes and close all Windows.[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”11. Hook the script to the Account Name”]Now that we’ve added the script to the Account form, we need to trigger the change when the Account name changes. For this, we need to “hook” the script to the Account Name field.

The behaviour we’re after is – When the Account name changes, we want our script to trigger causing the description field to be updated.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”12. Add the script to the Account Name field”]Double-click on the field name, this will open the ‘Field Properties’ dialog box. Click on the Events tab, you’ll notice that your script, new_account_form_library.js is available and ready to use.

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”13. Associate your function to the on change event”]Click on the Add icon, this will load up a new window.

From the Library pick-list, select your JavaScript library file; new_account_form_library.js.

In the Function field, add the name of the function – HelloAccountName

Click OK. Close any other Windows and save changes.[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”14. Save and Publish the changes”]Save and Publish the changes

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text title=”15. The Result”]The final result should mean that, when you enter a name: ‘Syed Hussain‘ in the Account Name field, the name is extracted and displayed in the Description field as ‘Hello Syed Hussain‘.