Adventures with Power Platform: Toggle Sections in a Model-Driven App with JavaScript

I wanted to create an example of Model-Driven App view where a user could set the value of a Yes/No Choice, which would in turn, toggle the visibility of a specific section within the view.

I created a Solution.

From my solution, I created a Table in the Dataverse, called Sample 3 - Items.

The table consisted of the following fields:

• ShowSection1 – Choice column, Yes/No
• Section1Text – Text column, will be added to Section1
• ShowSection2 – Choice column, Yes/No
• Section2Text – Text column, will be added to Section2
• ShowSection3 – Choice column, Yes/No
• Section3Text – Text column, will be added to Section3

I then created a Model-Driven App called Sample 3 - Model-Driven App - Show or Hide Section with JavaScript.

I added three sections to the Information Form for Sample 3 - Items and named them section1, section2, and section3.

I added the toggles to the main section, and then added each SectionXText field to the appropriate section.

I created a JavaScript file to handle the toggling of sections whenever the form loaded or whenever one of the values changed.

I uploaded the code, as a Web Resource, to my solution and wired it up according to the steps at Walkthrough: Write your first client script in model-driven apps – Power Apps | Microsoft Learn.

I published my app and then tested it out, and everything worked, 1st, 2nd … 10th try! Had some JavaScript challenges I had to work through.

Download the complete solution at Sample3Solution_1_0_0_1.zip and play around with it yourself!

Enjoy!