Enhancing Dynamics 365 Forms with JavaScript: Real-Time Field Visibility and Multi-Select Handling
For businesses using Dynamics 365 CRM, creating a customized and automated user experience is essential for improving efficiency. JavaScript empowers developers to tailor form behavior based on user input or specific business logic, making your CRM highly adaptable.
Are you looking to automate form fields and improve usability in Dynamics 365 CRM? This guide will help you understand how to use JavaScript to dynamically control field visibility and behavior.
Research shows that 88% of users are more productive with tailored CRM systems. Automating workflows within Dynamics 365 CRM can reduce user errors by up to 70%, streamlining operations and enhancing user satisfaction.
Dynamics 365 CRM is highly customizable, and using JavaScript to enhance form behavior can significantly improve operational efficiency and user experience. Automating processes like field visibility and data handling minimizes manual intervention and ensures consistency.
At CloudFronts, we have extensive experience implementing Dynamics 365 CRM solutions, tailoring them with custom scripts to meet unique business needs. Through hands-on knowledge, we provide practical insights into achieving optimal CRM configurations.
Setting Up Your Dynamics 365 CRM Environment
– Go to the CRM main page, click Settings > Advanced Settings.
– Select Solutions and create a new solution.
– Provide a meaningful name and include the publisher’s name.
Develop a Web Resource
– After creating the solution, develop a web resource and ensure your code is included in it.
– After writing the code, upload the JavaScript and save it as a web resource in make.powerapps.com.
Write your JavaScript code
We’ll look at two key functions in the provided code: toggleExchangeReturnField and onChangeExhReturnItem.
Let’s break them down.
Key JavaScript Functions in Action
Function 1: Toggling Fields Based on User Input
Toggling Fields Based on the Toggle Control
toggleExchangeReturnField: function(executionContext) {
var formContext = executionContext.getFormContext(); // Get the form context
var toggleField = formContext.getAttribute(“cri_rma”).getValue(); // Get the value of the toggle field
if (toggleField == true) {
formContext.getControl(“cf_exchangereturnitem”).setVisible(true); // Show the exchange return item field
formContext.getControl(“cri_rmatype”).setVisible(true); // Show the return type field
}
else {
formContext.getControl(“cf_exchangereturnitem”).setVisible(false); // Hide the exchange return item field
formContext.getControl(“cri_rmatype”).setVisible(false); // Hide the return type field
}
},
The `//` symbol in JavaScript is used to add comments within the code. Comments are helpful for explaining the logic or purpose of the code, making it easier for others (or even yourself) to understand later. However, including comments is optional and not mandatory.
Explanation
executionContext.getFormContext(): This function retrieves the form context, which provides access to the form’s controls and attributes.
formContext.getAttribute(“cri_rma”).getValue(): This gets the current value of the cri_rma field, which is assumed to be a toggle field (a boolean that indicates whether the user has opted for an exchange or return process).
formContext.getControl(“cf_exchangereturnitem”).setVisible(true): Based on the value of the cri_rma field, the cf_exchangereturnitem and cri_rmatype fields are either shown or hidden using the setVisible() method.
Purpose:
This function is designed to hide or show form fields dynamically based on the selection in the toggle field (cri_rma). If the toggle is set to true (i.e., an exchange/return is required), it displays the cf_exchangereturnitem and cri_rmatype fields. Otherwise, these fields are hidden.
Purpose: Dynamically show or hide fields based on a toggle field’s value.
How it works: Retrieves the toggle field’s value and sets the visibility of dependent fields accordingly.
Function 2: Handling Multi-Select Field Changes
Handling Changes in the Exchange Return Item Field
onChangeExhReturnItem: function(executionContext) {
var formContext = executionContext.getFormContext(); // Get the form context
var selectedoptions = formContext.getAttribute(‘cf_exchangereturnitem’)?.getSelectedOption(); // Get selected options from the multi-select field
var exchangeReturnProductDescription = “”;
if (selectedoptions != null) {
selectedoptions.forEach(ele => {
exchangeReturnProductDescription += ele.text + “,”; // Append the text of selected options
})
exchangeReturnProductDescription = exchangeReturnProductDescription.slice(0, -1); // Remove the last comma
formContext.getAttribute(‘cf_exchangereturnproduct’).setValue(exchangeReturnProductDescription); // Set the field value with selected options
formContext.data.save(); // Save the data
}
else {
formContext.getAttribute(‘cf_exchangereturnproduct’).setValue(null); // Reset the field if no options are selected
}
}
The `//` symbol in JavaScript is used to add comments within the code. Comments are helpful for explaining the logic or purpose of the code, making it easier for others (or even yourself) to understand later. However, including comments is optional and not mandatory.
Explanation
formContext.getAttribute(‘cf_exchangereturnitem’).getSelectedOption(): This retrieves the selected options from the multi-select field cf_exchangereturnitem. This field likely holds a list of items that the user can select for return or exchange.
exchangeReturnProductDescription += ele.text + “,”;: For each selected option, the code concatenates the text (name) of the item with a comma to build a string of product descriptions.
formContext.getAttribute(‘cf_exchangereturnproduct’).setValue(exchangeReturnProductDescription): The concatenated string of selected items is then assigned to the cf_exchangereturnproduct field. This could be a text field that lists the products selected for exchange or return.
formContext.data.save();: After updating the field, the form data is saved to ensure the changes are persisted.
formContext.getAttribute(‘cf_exchangereturnproduct’).setValue(null);: If no items are selected, the field value is reset to null.
The most crucial step is to add the lines of code within the field. Above all, we need to ensure that the function is added to the form properties. This process will be demonstrated below.
Purpose: Builds a comma-separated list of selected items and updates a designated field.
How it works: Gathers user selections and updates the field in real time, saving changes instantly.
Final Code for Execution
Binding the JavaScript Functions to Form Events
– Open the desired form in your solution at make.powerapps.com and select Entities > Forms.
– Add the JavaScript web resource to Form Properties.
– Under Form Libraries, click Add, select the JavaScript Web Resource you created earlier, and click OK.
Bind the toggleExchangeReturnField and onChangeExhReturnItem functions to relevant field events
– In the Form Editor, select the field (e.g., a text field or lookup) for which you want to trigger the OnChange event.
– In the Field Properties window, go to the Events tab.
– Under OnChange, click Add to create a new event handler.
– Select the Library (the JavaScript Web Resource you added).
– In the Function Name box, type the name of the function you defined (e.g., onFieldChange). Ensure the Enabled box is checked and click Done.
Save, Publish, and Test the changes on your CRM forms
– After binding the JavaScript function to the field’s OnChange event, click Save and Close to exit the Form Editor. Click Publish to apply the changes and make them active.
– Return to the CRM page and change the toggle from “No” to “Yes.” You will notice that fields become visible, and in the Exchange/Return Item field, whenever products are added in bulk, it will be separated by commas.
With the steps outlined, you can now enhance your Dynamics 365 CRM forms to dynamically respond to user actions. Test your new setup by toggling field values or updating multi-select fields to see how they work seamlessly.
If you’re ready to take your CRM customization further or need assistance, reach out to CloudFronts at [email protected] for expert guidance.
