Concatenate in Dynamics 365 with JavaScript

Updated: Dec 17, 2018

Introduction to using JavaScript with Dynamics 365 forms and fields

  • I have created 5 fields, shown below

  • All of them are Single Line of Text fields, except for State which is a global option set

Concatenate Dynamics 365 Fields with JavaScript
  • Open up Visual Studios, you can download the free version here

  • Click "New File" in the top left, shown below

  • Click the File tab in the top left and select Save As or press Ctrl Shift S

  • Name the file something sensible like FullAddress.js, make sure to include .js or select the file type from the "Save as type:" drop down

Copy the following code into Visual Studio Code:

//Create a function and REMEMBER THIS FUNCTION'S NAME function CreateFullAddress() { //Create a variable for each of the form's fields //Name the variables sensibly and set them equal to the field's logical name //Get the logical name from the form editor var street = Xrm.Page.getAttribute("new_streetaddress").getValue(); var city = Xrm.Page.getAttribute("new_city").getValue(); //Use .getText() for the State field because it is a global option set field //Using .getValue() would return the state's option set value, example 100,000,000 var state = Xrm.Page.getAttribute("new_state").getText(); var zip = Xrm.Page.getAttribute("new_zipcode").getValue(); //Create a variable to contain the concatenated values var fullAddress = ""; //Create conditional checks for blank or null values if (street != "" && street != null) { //Add the street value to the fullAddress variable //Add a coma and space afterwards fullAddress += street + ", "; } //Repeat the conditional checks for the rest of the fields //Repeat the addition of a coma and space to each field if (city != "" && city != null) { fullAddress += city + ", "; } if (state != "" && state != null) { //Only add a space after state, no comma fullAddress += state + " "; } if (zip != null) { //Do not add anything to the end zip code fullAddress += zip; } //push the concatenated value into the fulladdress field on the form Xrm.Page.getAttribute("new_fulladdress").setValue(fullAddress); }
  • Click the File tab in the top left and select Save or press Ctrl S

  • Please examine the code, read the comments and understand the purpose of each step

  • Open up your Dynamics 365 solution or select Customize the System from Settings

  • Scroll down and select Web Resources from the entity list on the left, see below

  • Click New above the Web Resources Sub-grid to create a new Web Resource

  • Choose a sensible logical name for the web resource

  • Choose a sensible Display name for the web resource

  • Select "Script (JScript)" from the Type drop down

  • Upload the JavaScript file with the "Choose File" button

  • Click Save at the top of the window and then select Publish

  • Navigate to the form where we will use the Web Resource

Which fields act as inputs in our function?

  • Street Address, City, State, Zip Code

  • Double click the Address field to open the Field Properties Menu

  • Select the Events Tab

  • Click "Form Libraries" to expand the corresponding section

  • Click the green Add button

  • Search for the Web Resource that you just uploaded, Type in new_ and then the Web Resources Name

NOTE: I suggest using folders for your Web Resources, that is why my file path is new_/Scripts/Project/FullAddress.js

  • Select the Web Resource and click add

  • Navigate to the section below Form Libraries labeled Event Handlers

  • Notice that the event selected from the Event drop down is OnChange

  • We are telling the system that we want an event to occur if the field value changes

  • In our case we want to execute a JavaScript function

  • Click the green Add button to add an Event Handler

  • Select the Web Resource from the Library drop down

  • Type in the function from the JavaScript file that we would like to execute if there is a field value change to Street Address, example "CreateFullAddress"

  • Make sure Enabled is checked, and select OK

  • Do the same exact steps for the other input fields, City, State, and Zip Code

  • Click Save and then click publish

  • Navigate to the form and make a change to any of the input fields to test your function

  • You're all set!

  • If you encounter any problems, please leave a comment and I will get back to you as soon as I can

I try my very best to provide simple instructions for problems that I encounter and would really appreciate any feedback, even a thanks this helped me really does let me know that I am making a difference and drives me to do better. All suggestions are appreciated and please leave any sources that could improve my understanding.

Please like and share to other forums that encounter this problem.

958 views5 comments

© 2023 by Clark and Ali

  • LinkedIn Social Icon