How to use JavaScript in Dynamics 365 CE?

Client-side scripting using JavaScript is one of the ways to apply custom business process logic for displaying data on a form in Dynamics 365 for Customer Engagement apps. Forms in Customer Engagement apps help display data to the user. A form in a Customer Engagement app can contain items such as fields, a quick form, or a grid.

Events:

All client-side code is initiated by events. In model-driven apps, you associate a specific function in a JavaScript library to be executed when an event occurs. This function is called an event handler. Each event handler specifies a single function within a JavaScript library and any parameters that can be passed to the function.

Events List:

• OnLoad
• OnSave
• OnChange

OnLoad:

OnLoad is an event which triggers whenever the page loads.

Logic : Hide Business phone field if Mobile phone contains data.
Step 1:
Form Editor > Form Properties > Add new Library > Click New

Step 2:
Add Details > Select JavaScript in type > Click Text Editor/Upload Js file > Save > Publish > Close

function ShowhideContactnumber(context) {
    debugger;
	var formContext = context.getFormContext();
	var mobile = formContext.getAttribute("mobilephone").getValue(); //mobilephone is the name of the field used for coding. This may differ from Display name.
    if(mobile != null){
	formContext.getControl("telephone1").setVisible(false);
	}
}

“Mobilephone” is the name of the field used for coding. This may differ from Display name.

Step 3:
Click Add > Event handler > Control “Form” > Event “OnLoad” > Click Add > Add details > Click Ok > Save and publish

Step 4:
Refresh the form to validate.

Add details > Save > Refresh(To run OnLoad event)

OnSave:

OnSave is an event which triggers whenever the page is saved.

Logic : Convert Topic field data to upper case, on save.
Step 2:
We can also use the same Library and add new code. However, we will create new library to understand the process better.
Form Editor > Form Properties > Add new Library > Click New

Step 2:
Add Details > Select JavaScript in type > Click Text Editor/Upload Js file > Save > Publish > Close

function initialUpper(context) {
    debugger;
	var formContext = context.getFormContext();
	var str = formContext.getAttribute("subject").getValue();
    var res = str.toUpperCase();
    formContext.getAttribute("subject").setValue(res);
}

Step 3:
Click Add > Event handler > Control “Form” > Event “OnSave” > Click Add > Add details > Click Ok > Save and publish

Step 4:
Refresh form page > Add details and Save the form to validate.

OnChange:

OnChange is an event which triggers whenever the field value is changed.

Logic : Validate field which have combination of characters and numbers.
Example : ABC0123456

Step 1:
Create new simple text field.

Step 2:
We can also use the same Library and add new code. However, we will create new library to understand the process better.
Form Editor > Form Properties > Add new Library > Click New

Step 3:
Add Details > Select JavaScript in type > Click Text Editor/Upload Js file > Save > Publish > Close

function validateCombinationId(context) {
    debugger;
	var formContext = context.getFormContext();
    var VoterId = context.getFormContext().getAttribute("new_combinationid").getValue();
    var combination = /^([a-zA-Z]){3}([0-9]){7}?$/;
    if (VoterId != null || VoterId != undefined) {
        if (combination.test(VoterId) == false) {
                formContext.getControl("new_combinationid").clearNotification();
                formContext.getControl("new_combinationid").setNotification("Combination Id is not yet valid.");
        }
        else {
              formContext.getControl("new_combinationid").clearNotification();         
        }
    }
	else {
              formContext.getControl("new_combinationid").clearNotification();         
        }
}

Step 3:
Click Add > Event handler > Control “Field Name”(Combination ID) > Event “OnChange” > Click Add > Add details > Click Ok > Save and publish

Step 4:
Refresh form page > Add value to field and click outside the field.

Events which are common and are used frequently have been covered in this post. If you have any query or concern regarding JavaScript in MS Dynamics 365 CE, feel free to connect.