Model-Driven-Apps: Implement Editable Grid and learn how to customize it

Let’s learn how to implement Editable Grid and apply simple customization. As the name, the Editable Grid is a grid where we can do inline editing. In this blog, I create a custom table where we will implement the below scenario:

– On Qty or Unit Price changed, set Total with formula Qty * Unit Price.

– On Calculate Status changed, if set as “In Progress” then set Actual Start = Today’s date. If set as “Completed”, set Actual End = Today’s date.

On the Parent Entity (Contact) where we want to place the Editable Grid, add the component > Editable Grid. Then you can set the necessary properties to suit your needs:

To only allow related records, checked the “Show related records” (don’t forget to set the view with the columns that you need):

For the customization, actually, there is no particular difference with the one that we are using. Here is the code that we want to apply:

var grid = grid || {};
(function() {
    var calculateTotal = function(executionContext) {
        var formContext = executionContext.getFormContext();
        var qty = formContext.getAttribute('ins_qty').getValue();
        var pricePerUnit = formContext.getAttribute('ins_unitprice').getValue();
        var total = qty * pricePerUnit;
        formContext.getAttribute('ins_total').setValue(total);
    };
    this.onPriceChange = function(executionContext) {
        calculateTotal(executionContext);
    };
    this.onQtyChange = function(executionContext) {
        calculateTotal(executionContext);
    };
    var calculateStatus = {
        'InProgress': 826540001,
        'Completed': 826540002
    };
    this.statusOnChange = function(executionContext){
        var formContext = executionContext.getFormContext();
        var status = formContext.getAttribute('ins_calculatestatus').getValue();

        if(status === calculateStatus.InProgress){
            formContext.getAttribute('ins_actualstart').setValue(new Date());
        }
        if(status === calculateStatus.Completed){
            formContext.getAttribute('ins_actualend').setValue(new Date());
        }
    };
}).apply(grid);

Once you load the above file and create the WebResource in the CRM (Dataverse), you can open the form where you already set the Editable Grid, then add the necessary events (unfortunately on the make.powerapps.com, we can’t see the events. So I need to go back to Classic UI to add the events):

From the above image, as you can see. I add the event OnChange on the Calculate Status. Then we need to set the correct Library and the JavaScript function that we want to call (in this case, I call “grid.statusOnChange“).
And last, here is the demo:

Happy CRM-ing!

Advertisement