Lock a Field on an Editable Subgrid using JavaScript in Dynamics 365

How to Use JavaScript to Lock a Field on an Editable Subgrid in Dynamics 365

In this blog post, I'll demonstrate how to use JavaScript to lock a specific field on an editable subgrid within a Dynamics 365 form. This ensures that users cannot update its values directly within the subgrid. For this example, we'll focus on the "Contacts" subgrid and lock the "emailaddress1" field.

Refer to this video for a detailed implementation guide

--Steps to Implement Field Locking with JavaScript--

Step 1: Create a JavaScript Web Resource

First, you need to create a JavaScript web resource that contains the code to lock the field.

1. Navigate to your Dynamics 365 solution.
2. Go to Web Resources and create a new JavaScript (JS) web resource.
3. Add the following code to the web resource and save it.

JavaScript c0de below - 

function onGridRowSelected(context) {

    console.log("Function Triggerred for Locking subgrid field...");

        context.getFormContext().getData().getEntity().attributes.forEach(function (attr) {

        console.log("Attribute name: ", attr.getName());

        if (attr.getName() === "emailaddress1") {

            console.log("Found 'emailaddress1' field.");

            attr.controls.forEach(function (myField) {

                console.log("Disabling 'emailaddress1' field...");

                myField.setDisabled(true);

                console.log("'emailaddress1' field disabled.");

            });

        }

    });

}

Step 2: Add the JavaScript Web Resource to the Form

Next, you'll add this JavaScript web resource to the form that contains the editable subgrid.

1. Open the Main Form for the entity (e.g., Account) that contains the subgrid.
2. Click on Form Properties .
3. Under the Form Libraries section, click Add and select the JavaScript web resource you created.
4. Click OK to add the web resource to the form.

Step 3: Attach the JavaScript Function to the Subgrid Event

Now, you'll attach the `onGridRowSelected` function to the OnRecordSelect event of the subgrid.

1. Select the subgrid on the form.
2. In the right-hand pane, find the Events section.
3. Click Add to add a new event.
4. Choose OnRecordSelect as the event.
5. In the Library dropdown, select the JavaScript web resource you added earlier.
6. In the Function field, enter `onGridRowSelected`.
7. Ensure that Pass execution context as first parameter is checked.
8. Click OK to save the event configuration.

Step 4: Publish

Finally, publish all customizations to apply the changes.

1. Click Save and Close on the form editor.
2. In the solution, click Publish All Customizations .

 # Testing the Implementation

To verify that the field locking functionality works correctly:

1. Navigate to the form containing the Contacts subgrid.
2. Select a row in the subgrid.
3. Attempt to edit the "emailaddress1" field.

You should notice that the "emailaddress1" field is now disabled and cannot be edited, ensuring the values remain unchanged.

 # Conclusion

By following these steps, you can effectively lock a specific field in an editable subgrid using JavaScript in Dynamics 365. This approach can be particularly useful for maintaining data integrity by preventing users from altering critical information directly within subgrids.

Stay tuned for more tips and tricks on optimizing your Dynamics 365 experience! If you have any questions or need further assistance, feel free to leave a comment.