Show and Hide sections based on Multi-Select Option Set using JavaScript

Multi-Select Option Set in Dataverse allows you to select multiple options for a single field. The selected values of the options are stored in the form of integer array like [1,2,3]. Here in this blog, you will learn how to toggle the visibility of sections based on the options in Multi-Select Option Set using JavaScript. Every model driven app form has a hierarchy of Tabs → Sections → Fields.

 

    I have created a new Multi-Select Option Set field Sections to show in Accounts Entity. With this field values we can show and hide the sections in the form. I have added the sections as choices and added the choice to the Multi-Select Option Set.

Add the field to the form on the tab and section of your choice. Here in this i have added this field to the Contact Preferences Section of Details Tab. Save and Publish the form

Note: Do not place the field to the section which you are planning to hide. Because this field also get hidden with the section. 

Hide the sections you want to toggle the visibility by default as like the above image. Unless it will appear untill the Section To Show field gets selection when creating new record.

Create a new JavaScript Web Resource to handle the visibility of the sections. Add the function to the Web resource. The below snippet contains the function to show and hide the sections

Note: Add this function to the both onload and onchange event handlers. It works fine with onchange but while refreshing it do not check the field values and it got mess up. So we added onload event too. Save and publish the form again

    We can the section after getting the Tab control. Create an Array of Objects with id and sections fields. id is the Option Set values of the Multi-Select Option Set field and section is the logical name of the sections. Initiate a foreach to iterate through the object array and check the field value. If the value from field includes any of the id in the array, then set visibility to the section equivalent to that id.