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

[AhmedSalih]

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:

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

 

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:

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:

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

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

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:

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.

Useful Resources:

Model-driven apps developer documentation

Apply business logic using client scripting in model-driven apps using JavaScript

Understand the Client API object model

Client API execution context

Client API form context

Client API Reference for model-driven apps

[MD7]

Hi there, 

I'm trying to use this with a choice column so if the choice column is Yes (value being 1) then another tab appears.

I'm getting this error however: 

One of the scripts for this record has caused an error. For more details, download the log file.
Cannot read properties of null (reading 'getValue')
Session Id: 246e0904-6869-4eea-9ac3-69b7a4212b42
Correlation Id: 2f4c89c5-958a-4e13-b5df-b4897c9f4db0
Event Name: onload
Function Name: psdstab
Web Resource Name: cr0c5_pssdstab3
Solution Name: Active
Publisher Name: DefaultPublisherorg00000
Time: Thu Mar 09 2023 16:39:59 GMT+0000 (Greenwich Mean Time)

My code is:

function psdstab(executionContext) {
	var formContext = executionContext.getFormContext();
	var PSDSOrg = formContext.getAttribute('cr0c5_PSDSOrganisation').getValue();
	var PSDSInfoTab = formContext.ui.tabs.get('tab_3');

	if (PSDSOrg == 0)
	{PSDSInfoTab.setVisible(false);}
	else
	{PSDSInfoTab.setVisible(true);}

}

Can you tell me where I'm going wrong? Is it because I'm using a choice column, the code needs changing?

Thanks in advance.

[AhmedSalih]

@MD7, The code itself seems correct. Can you check again the logical name of the PSD0rg?

[MD7]

Hi there,

Thanks for getting back in touch so quickly. 

Ah that's what it is. I was using the Schema name which had capital letter in. Didn't realise it's case sensitive. I'm very new to this.

Thank you for your help.

[AhmedSalih]

@MD7, I am glad that I was able to help 🙂