Adventures with Model-Driven Apps: Toggle Element Visibility Based on Dataverse Status Column

I wanted to see if I could toggle visibility for a Tab and/or a Section on a Form, whenever an Account record was Activated or Deactivated.

First thing I did was make sure the names of my Tabs and Sections were unique.

I made the following changes in my form:

• Set the Name for the Summary tab to TAB_SUMMARY.
• Set the Name for the Contacts tab to TAB_CONTACTS.
• Set the Name for the Contacts section on the Summary tab to SECTION_CONTACTS_TAB_SUMMARY.

Now for a little JavaScript to make the magic happen. 🪄

I created a JavaScript file called AccountFormEvents.js.

var AccountFormEvents = window.AccountFormEvents || {};

(function () {

    const TAB_SUMMARY = "TAB_SUMMARY";
    const TAB_CONTACTS = "TAB_CONTACTS";
    const SECTION_CONTACTS_TAB_SUMMARY = "SECTION_CONTACTS_TAB_SUMMARY"; 
    const STATUS_ACTIVE = 0;
    const STATUS_INACTIVE = 1;

    // Code to run in the form OnLoad event
    this.formOnLoad = function (executionContext) {
        console.log("AccountFormEvents - formOnLoad");

        // Current version of the file
        console.log("version", "2024.05.28.15");

        var formContext = executionContext.getFormContext();

        console.log("AccountFormEvents - formOnLoad - statecode", formContext.getAttribute("statecode").getValue());

        toggleContactsUIElements(formContext);
    }

    // Code to run in the column OnChange event 
    this.attributeOnChange = function (executionContext) {
        console.log("AccountFormEvents - attributeOnChange");

        var formContext = executionContext.getFormContext();

        console.log("AccountFormEvents - attributeOnChange - statecode", formContext.getAttribute("statecode").getValue());

        toggleContactsUIElements(formContext);
    }

    // Code to run in the form OnSave event 
    this.formOnSave = function (executionContext) {
        console.log("AccountFormEvents - formOnSave");

        var formContext = executionContext.getFormContext();
    }

    function toggleContactsUIElements(formContext) {
        console.log("AccountFormEvents - toggleContactsUIElements");

        var contactsIsVisible = formContext.getAttribute("statecode").getValue() == STATUS_ACTIVE;

        toggleSection(formContext, TAB_SUMMARY, SECTION_CONTACTS_TAB_SUMMARY, contactsIsVisible);
        toggleTab(formContext, TAB_CONTACTS, contactsIsVisible);
    }

    function toggleTab(formContext, tabName, isVisible) {
        console.log("AccountFormEvents - toggleTab");

        // formContext.ui.tabs (Client API reference)
        // https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/formcontext-ui-tabs
        var tab = formContext.ui.tabs.get(tabName);
        
        tab.setVisible(isVisible);
    }

    function toggleSection(formContext, tabName, sectionName, isVisible) {
        console.log("AccountFormEvents - toggleSection");

        // formContext.ui.sections (Client API reference)
        // https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/formcontext-ui-sections
        var tab = formContext.ui.tabs.get(tabName);

        var section = tab.sections.get(sectionName);

        section.setVisible(isVisible);
    }
}).call(AccountFormEvents);

I uploaded it as a Web Resource in my Solution.

Back to my Form!

I updated the Events for both form On Save and On Load, setting the Library to the Web Resource I just created, and setting the Function to AccountFormEvents.formOnSave and AccountFormEvents.formOnLoad, respectively.

The one thing I had to do to get this working, was add the Status field to the Form.

If I didn’t do this then I wasn’t able to respond to the change of the value, having the Status field on the Form allowed me to do so.

I went ahead and marked the Status field as hidden. 🙈

One last thing I needed to do was wire up the On Change event for the Status field.

I used the same JavaScript Web Resource from the previous step and set Function to AccountFormEvents.attributeOnChange and checked Pass execution context as first parameter.

I then clicked Save and publish.

I fired up my Model-Driven App that includes the Form and tested clicking Activate and Deactivate.

When the Status is Active, the Tab and Section are Visible. 👀

When the Status is Inactive, the Tab and Section are Hidden.

Download the complete solution at https://mattruma.com/wp-content/uploads/2024/03/ModelDrivenAppSolutionHideSectionOnInactive_1_0_0_0.zip.