Adventures with Power Platform: Model-Driven Apps and JavaScript

If you are a Citizen Developer, don’t let the title of this article discourage you!

We are going to look at some code, but not terribly difficult code! It is code you could write or have a traditional developer write for you.

A customer was migrating and Access database and was asking how to mimic some functionality that was in their Access database in the Power Platform.

I have a Model-Driven App that allows editing of Dataverse Table with the following fields:

Combo217 – Choice, Values 0-6
Text120 – Date, Date Only
Text115 – Choice, Yes/No

When the value of Combo217 or Text120 changed, the value of Text115 would be set to Yes or No based on the values in Combo217 and Text120.

As the values changes, the Model-Driven App needed to update immediately.

I tried doing this with Business Rules, but there was a calculation that needed to occur around elapsed days between two dates.

I tried to create a column in the Dataverse table for Elapsed Days using a Formula column, but Power FX support is limited.

A teammate showed me how to do it with a workflow process, but that was going to be challenging for the customer, not very friendly.

Also, some of this functionality would only run for existing records.

What could I do now? I could write some JavaScript.

Wasn’t has bad as I thought, kept the names of the field the same, just to make it easy.

var Sample2 = window.Sample2 || {};

(function () {
    
    // Code to run in the form OnLoad event
    this.formOnLoad = function (executionContext) {
        var formContext = executionContext.getFormContext();
    }

    // Code to run in the column OnChange event 
    this.attributeOnChange = function (executionContext) {
        var formContext = executionContext.getFormContext();

        var combo217 = formContext.getAttribute("maruma_combo217").getValue();

        var text120 = formContext.getAttribute("maruma_text120").getValue();

        if (combo217 == 0) {
            formContext.getAttribute("maruma_text115").setValue(false);
        }
        
        var elapsedDays = 0;
       
        if (text120) {
            var currentDate = new Date();
            var text120AsDate = new Date(text120);
            var differenceInTime = currentDate.getTime() - (text120AsDate).getTime();
            
            elapsedDays = Math.round(differenceInTime / (1000 * 3600 * 24));
        }
        
        if (combo217 == 1) {
            if (text120) {
                if (elapsedDays > 30) {
                    formContext.getAttribute("maruma_text115").setValue(true);
                } else {
                    formContext.getAttribute("maruma_text115").setValue(false);
                }
            } else {
                formContext.getAttribute("maruma_text115").setValue(true);
            }
        }
        
        if (combo217 == 2) {
            if (text120) {
                if (elapsedDays > 15) {
                    formContext.getAttribute("maruma_text115").setValue(true);
                } else {
                    formContext.getAttribute("maruma_text115").setValue(false);
                }
            } else {
                formContext.getAttribute("maruma_text115").setValue(true);
            }
        }
        
        if (combo217 == 3) {
            if (text120) {
                if (elapsedDays > 10) {
                    formContext.getAttribute("maruma_text115").setValue(true);
                } else {
                    formContext.getAttribute("maruma_text115").setValue(false);
                }
            } else {
                formContext.getAttribute("maruma_text115").setValue(true);
            }
        }
        
        if (combo217 == 4) {
            if (text120) {
                if (elapsedDays > 7) {
                    formContext.getAttribute("maruma_text115").setValue(true);
                } else {
                    formContext.getAttribute("maruma_text115").setValue(false);
                }
            } else {
                formContext.getAttribute("maruma_text115").setValue(true);
            }
        }
        
        if (combo217 == 5) {
            formContext.getAttribute("maruma_text115").setValue(true);
        }  
        
        if (combo217 == 6) {
            if (text120) {
                if (elapsedDays > 90) {
                    formContext.getAttribute("maruma_text115").setValue(true);
                } else {
                    formContext.getAttribute("maruma_text115").setValue(false);
                }
            } else {
                formContext.getAttribute("maruma_text115").setValue(true);
            }
        }    
    }

    // Code to run in the form OnSave event 
    this.formOnSave = function () {
    }
}).call(Sample2);

100

var Sample2 = window.Sample2 || {};

(function () {

// Code to run in the form OnLoad event

this.formOnLoad = function (executionContext) {

var formContext = executionContext.getFormContext();

}

// Code to run in the column OnChange event

this.attributeOnChange = function (executionContext) {

var formContext = executionContext.getFormContext();

var combo217 = formContext.getAttribute("maruma_combo217").getValue();

var text120 = formContext.getAttribute("maruma_text120").getValue();

if (combo217 == 0) {

formContext.getAttribute("maruma_text115").setValue(false);

}

var elapsedDays = 0;

if (text120) {

var currentDate = new Date();

var text120AsDate = new Date(text120);

var differenceInTime = currentDate.getTime() - (text120AsDate).getTime();

elapsedDays = Math.round(differenceInTime / (1000 * 3600 * 24));

}

if (combo217 == 1) {

if (text120) {

if (elapsedDays > 30) {