In an earlier post, I described how to use and configure editable grids in Dynamics 365. In this post I intend to dive a little deeper to look at how to add JavaScript.

If you missed my earlier post, you can view it here.

Note:
Before I start to explain JavaScript, I want to point out that entity level business rules will apply to editable grids. The example I’ll give here could probably have been achieved with a business rule. In fact, my preferred approach will be business rules. But at some point, you’ll find something that can’t be achieved with “just” a business rule. That is when you’ll need to turn to JavaScript.

When working with editable grids we have three events available to us that JavaScript can be linked to ….

• OnRecordSelect
  
• OnChange
  
• OnSave
  

Hopefully the meaning of these events is pretty self-explanatory!

How to add code to editable grid events

In my previous post, I explained how to enable editable grids. Once you have a grid enabled you can then link JavaScript! In customizations, I have opened my entity and added the “Editable Grid” control, now notice that I have an events tab on my entity.

You can see below that under form libraries I have added a JavaScript file. In my simple example I will run some JavaScript on the opportunity entity. So, I called the form library “OpportunityJavaScript”.

Having created the JavaScript web resource, I need to associate functions to field / events on the editable grid. (Note: We’ll look at what the code for those functions looks like a little later in this post!)

In the event handlers, I have selected the field that I want to work with. In my simple example I have used the probability field. Next I have selected the event. Options include “OnChange”, “OnSave” and “OnRecordSelect”. I have gone for “OnChange”.

Finally, I used the “Add” icon to say what function from what library I wanted to run.

Notice that I have called my function “Grid_And_Form”! There is a reason for this. In my example I have some simple code that will make the probability 80% if the user enters anything higher than 80. (We can never be 100% sure we’ll win an opportunity!)

I wanted my code to run on the form and also on the editable grid. (I expect this requirement will be quite common.)

I hate repeating code. Partly out of wanting to follow good coding practice but mainly because like lots of developers I am very lazy, I only want to do anything once. Therefore, I’ve structured my code to work both with the editable grid and the form. (More on that later. J)

One important point is that to make my code common to the grid and form I need to know the execution context. So, I must set the “Pass execution context as first parameter”.

My Simple Code

I’ve already mentioned that you can’t use Xrm.Page commands on editable grids. In my example I’ll want to set the probability value. On the form something like Xrm.Page.getAttribute(“closeprobability”).setValue(80) would do the trick. But this won’t work on editable grids.

Instead I need to use a new method that has been released with Dynamics 365 (getFormContext).

getFormContext returns a reference for either the form (Xrm.Page) or the editable grid (GridRow). Meaning we can now have code that will work in both situations.

function Grid_And_Form(executionContext) {
    var entityObject = executionContext.getFormContext().data.entity;
    var probAttr = entityObject.attributes.getByName("closeprobability");
    var prob = probAttr.getValue();
    if (prob >= 80) {
        probAttr.setValue(80);
    }  // End if
} // End function

This same code called from the form and the grid worked perfectly. (Not forgetting to select the option to pass execution context.)

NOTE: I have found one combination that gave an error! This same JavaScript worked on the web client and mobile client. (Which was nice!) Until I tried to edit an opportunity in a nested grid from account. I suspect this might be a product issue that will hopefully be resolved soon.

Granted this is a simple example but I hope you can easily adapt it to your purposes. Enjoy.
J