Model Driven Powerapp(Dataverse) – How to show or hide sections based on lookup column

This article will explain how to show or hide a form tab section based on choices made by the user. Unfortunately, Model Driven App (Dataverse) does not allow this functionality using the Form Designer. Therefore, the function needs to be created using JavaScript.

I am not a Javascript programmer and learnt how to do this from other articles and Microsoft help docs on the Internet and colleagues who had some JavaScript skills.

The functionality

Before I explain how I built this functionality let me show you what the functional result looks like in my Model Driven PowerApp.

The number of sections in the Approvals Tab are displayed based on selection chosen in the Request Type lookup field in the General Tab.

Scenario 1 – When Complex Request is chosen then 3 approval sections are shown in the Approvals Tab.

Scenario 2 – When Simple Request is chosen then 1 approval section is shown in the Approvals Tab.

The Dataverse Design

I created 2 tables with the following columns (amongst others):

1. Requests

   1. Where the requests and approver columns are stored.

   1. Also has a lookup column to the Request Types table (ifmet_requesttype)

2. Request Types (ifmet_requesttypes)

   1. Request Type – text field.

   1. Number of Approvers (ifmet_numberofapprovers) – Choice column that provides the number of sections the request Type shows (Values 1, 2 or 3).

The PowerApp Form

I have named the Tab  – ApprovalsTab

I have named each section:
·         Approval1Section
·         Approval2Section
·         Approval3Section

The JavaScript code

//ShowApproverSection Function
// Used in Finance Request Form. Shows or hides Approve Sections based on Request Type chosen
// D.Lutchner January 2022
function ShowApproverSections(executionContext) {
    var formContext = executionContext.getFormContext();
    if (formContext.getAttribute("ifmet_requesttype").getValue() != null) {
        requesttype = formContext.getAttribute("ifmet_requesttype").getValue()[0].id;
    
         Xrm.WebApi.retrieveRecord("ifmet_requesttypes", requesttype, "?$select=ifmet_numberofapprovers").then(

             function success(result) {

// The column ifmet_numberofapprovers is a choice field so we need to add the section after @ to retrive the value (i.e. 1, 2 or 3).
                 var NumberOfApprovers = result['ifmet_numberofapprovers@OData.Community.Display.V1.FormattedValue']
                if (NumberOfApprovers == 1) {
                    formContext.ui.tabs.get('ApprovalsTab').sections.get('Approval2Section').setVisible(false);
                    formContext.ui.tabs.get('ApprovalsTab').sections.get('Approval3Section').setVisible(false);
                } else if (NumberOfApprovers == 2) {
                    formContext.ui.tabs.get('ApprovalsTab').sections.get('Approval2Section').setVisible(true);
                    formContext.ui.tabs.get('ApprovalsTab').sections.get('Approval3Section').setVisible(false);
                } else {
                    formContext.ui.tabs.get('ApprovalsTab').sections.get('Approval2Section').setVisible(true);
                    formContext.ui.tabs.get('ApprovalsTab').sections.get('Approval3Section').setVisible(true);
                }
            },
            function(error) {
                console.log(error.message);
                // handle error conditions
            }
			);
    }
}

There are many other articles on the internet on how to load JavaScript to PowerApps or Dynamics 365 form (same procedure).