Dataverse XRM: Is there a way to hide fields in a Form if a choice field is set to 0 (No)?

Question

I am building a model-driven app in Power Platform. I have my Form all set up. By default, so, on Form load, the column lm_drafttoggle is set to "Yes" which has the underlying value of '1' in Dataverse.

What I need is, therefore, for these three fields to be hidden by default (lm_drafttoggle, lm_technicalapprover and lm_cabapprover). If the user changes lm_drafttoggle to "No", these three fields should be visible.

I have tried the following, but it does nothing on form load...

function onFormLoad(executionContext) {
    var formContext = executionContext.getFormContext();

    // Get value of the 'lm_drafttoggle' field
    var toggleValue = formContext.getAttribute("lm_drafttoggle").getValue();

    if (toggleValue === "No") {
        // Hide the three fields
        formContext.getControl("lm_peerreviewer").setVisible(false);
        formContext.getControl("lm_technicalapprover").setVisible(false);
        formContext.getControl("lm_cabapprover").setVisible(false);
    } else if (toggleValue === "Yes") {
        // Show the three fields
        formContext.getControl("lm_peerreviewer").setVisible(true);
        formContext.getControl("lm_technicalapprover").setVisible(true);
        formContext.getControl("lm_cabapprover").setVisible(true);
    }
}

function onSave(executionContext) {
    onFormLoad(executionContext);
}

Many thanks in advance. LM

function onFormLoad(executionContext) {
    var formContext = executionContext.getFormContext();

    // Get value of the 'lm_drafttoggle' field
    var toggleValue = formContext.getAttribute("lm_drafttoggle").getValue();

    if (toggleValue === "No") {
        // Hide the three fields
        formContext.getControl("lm_peerreviewer").setVisible(false);
        formContext.getControl("lm_technicalapprover").setVisible(false);
        formContext.getControl("lm_cabapprover").setVisible(false);
    } else if (toggleValue === "Yes") {
        // Show the three fields
        formContext.getControl("lm_peerreviewer").setVisible(true);
        formContext.getControl("lm_technicalapprover").setVisible(true);
        formContext.getControl("lm_cabapprover").setVisible(true);
    }
}

function onSave(executionContext) {
    onFormLoad(executionContext);
}

Answer 1

If you want to format the form on change of "lm_drafttoggle" field you will have to use the code that is similar to the following:

function formatForm(executionContext) {
    var formContext = executionContext.getFormContext();

    // Get value of the 'lm_drafttoggle' field
    var toggleValue = formContext.getAttribute("lm_drafttoggle").getValue();

    if (!toggleValue) {
        // Hide the three fields
        formContext.getControl("lm_peerreviewer").setVisible(false);
        formContext.getControl("lm_technicalapprover").setVisible(false);
        formContext.getControl("lm_cabapprover").setVisible(false);
    } else {
        // Show the three fields
        formContext.getControl("lm_peerreviewer").setVisible(true);
        formContext.getControl("lm_technicalapprover").setVisible(true);
        formContext.getControl("lm_cabapprover").setVisible(true);
    }
}

function onFormLoad(executionContext) {
    formatForm(executionContext);

    var formContext = executionContext.getFormContext();
    formContext.getAttribute("lm_drafttoggle").addOnChange(formatForm);
}

I assumed that the field is a checkbox (2 values) and the getValue method will return a boolean and not a string value so I incorporated that change into the code.