cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
AhmedSalih
Most Valuable Professional
‎09-20-2022 11:23 PM

Show/Hide Model-Driven App Forms Tabs Based on Fields Data Values

MDA-HideTabs.png

WATCH THE FULL TUTORIAL

Use Case: 

We have a Dataverse Table Form with three tabs (Sections), and we want to guide the users to fill the data fields in one tab at a time before moving to the next tab. Using BPF, we can achieve this via the stages, but this example shows how we can utilize Web Resources and JavaScript to interact with the Dataverse Forms data and controls.  

Data:

I have a Dataverse Table called Customers, and I have the Main Form as below:

1.PNG

I have the Customers Table Form that has three tabs as below:

2.PNG

 

We need when the form load, to hide all Tabs except the Customer Tab. To do this, we will use a web resource as our Event Handler for the On Load Event:

3.PNG

As you can see, I have an event handler, but here is how we can create one. First, you need to have your JavaScript file ready. Below is my JavaScript File:

4.PNG

Next, you will click on the + to Add Event Handler as below:

5.PNG

In the above step, I will click on the Edit Library and follow the below steps to create a web resource:

66.PNG

  1. Click Select to Upload the JavaSctript File
  2. Give a Name for the Web Resource
  3. Save and Publish

After this, we are ready to set up the handler:

 

33.PNG

For this use case, we are also creating an Event Handler for some Data fields, and this Handler will be executed when the values of those fields change. We are using the same Web Resource, and I have built the JavaScript function to accommodate those other Event Handlers. We will repeat the below step for the: Customer Full Name Field in the Customer Tab, Street Address Field, and Postal Code Field in the Address Tab. In doing so, we will ensure that users have to enter the customer name before entering the address information and enter the address information before entering the email address. But what is beautiful here is the whole tab will disappear until our condition is met.

55.PNG

Comments