web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / JavaScript - Show Hide...
Power Apps
Answered

JavaScript - Show Hide Tabs based on lookup vield value in a form

(0) ShareShare
ReportReport
Posted on by THowkins96 88

Hi all!

 

I have been scratching my head and scouring the forums for an answer to this. I have tried multiple options that I have seen on forums but nothing seems to be working for me.

 

In my form I want to show/hide tabs based on the provider (cr6fc_provider) that has been selected.

 

Below is the JS code:

 

function onSupplierChange(executionContext) {
    var formContext = executionContext.getFormContext();
    var providerLookupName = formContext.getAttribute("cr6fc_provider").getValue()[0].id;

    if(providerLookupName == "fc5d1173-7d42-ee11-bdf3-002248a1f770")
    {
        formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
        formContext.ui.tabs.get("tab_systopia").setVisible(true);
    }
    if(providerLookupName == "ad5d1173-7d42-ee11-bdf3-002248a1f770")
    {
        formContext.ui.tabs.get("tab_365smartfridge").setVisible(true);
        formContext.ui.tabs.get("tab_systopia").setVisible(false);
    }    
    else
    {
        formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
        formContext.ui.tabs.get("tab_systopia").setVisible(false);
    }
}
 
I have applied this to the form as below image shows:
 
THowkins96_0-1707144888124.png

 

Is there something obvious here that I am missing? Please help 😄

 

Thanks!

Categories:
Building Power Apps
I have the same question (0)
  • Ami K Profile Picture
    Ami K 15,687 Super User 2024 Season 1 on at

    @THowkins96 - assuming you're not receiving any error messages OnLoad, I suspect the cause is because you still have brackets in your GUID. You can verify this yourself by inserting a pop up dialog alert into your function: 

     

     

    function onSupplierChange(executionContext) {
 var formContext = executionContext.getFormContext();
 var providerLookupName = formContext.getAttribute("cr6fc_provider").getValue()[0].id;

 if(providerLookupName == "fc5d1173-7d42-ee11-bdf3-002248a1f770")
 {
 formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
 formContext.ui.tabs.get("tab_systopia").setVisible(true);
 }
 if(providerLookupName == "ad5d1173-7d42-ee11-bdf3-002248a1f770")
 {
 formContext.ui.tabs.get("tab_365smartfridge").setVisible(true);
 formContext.ui.tabs.get("tab_systopia").setVisible(false);
 } 
 else
 {
 formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
 formContext.ui.tabs.get("tab_systopia").setVisible(false);
 }


	alert(providerLookupName);

}

     

     

     

    Amik_0-1707174975120.png

     

    try:

     

     

     

    function onSupplierChange(executionContext) {
	var formContext = executionContext.getFormContext();
	var providerLookupName = formContext.getAttribute("cr6fc_provider").getValue()[0].id;

	var providerLookupNameNoBracket = providerLookupName.replace("{", "").replace("}", "");

	if (providerLookupNameNoBracket == "fc5d1173-7d42-ee11-bdf3-002248a1f770") {
		formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
		formContext.ui.tabs.get("tab_systopia").setVisible(true);
	}
	if (providerLookupNameNoBracket == "ad5d1173-7d42-ee11-bdf3-002248a1f770") {
		formContext.ui.tabs.get("tab_365smartfridge").setVisible(true);
		formContext.ui.tabs.get("tab_systopia").setVisible(false);
	} else {
		formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
		formContext.ui.tabs.get("tab_systopia").setVisible(false);
	}
}

     

  • THowkins96 Profile Picture
    THowkins96 88 on at

    Hi @Amik 

     

    I actually got this to work with a bit of extra tweaking as per below:

     

    function onLoad(executionContext) {
 var formContext = executionContext.getFormContext();
 formContext.getAttribute("cr6fc_provider").addOnChange(onSupplierChange);
 formContext.data.addOnLoad(onSupplierChange);
}


function onSupplierChange(executionContext) {
	var formContext = executionContext.getFormContext();
	var providerLookupName = formContext.getAttribute("cr6fc_provider").getValue()[0].id;
 var providerNewForm = formContext.getAttribute("cr6fc_provider").getValue();
	var providerLookupNameNoBracket = providerLookupName.replace("{", "").replace("}", "");

	if (providerLookupNameNoBracket == "FC5D1173-7D42-EE11-BDF3-002248A1F770") {
		formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
		formContext.ui.tabs.get("tab_systopia").setVisible(true);
	}
	else if (providerLookupNameNoBracket == "AD5D1173-7D42-EE11-BDF3-002248A1F770") {
		formContext.ui.tabs.get("tab_365smartfridge").setVisible(true);
		formContext.ui.tabs.get("tab_systopia").setVisible(false);
	}
 else {
 formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
		formContext.ui.tabs.get("tab_systopia").setVisible(false);
 }
}

     

    I did notice that the GUID is in upper case so converted that in the script.

     

    However, now when I begin a new row in the data I get an error that you cannot find a null value in array [0].

     

    I thought the "else" condition below would take care of that but it does not seem to work. Any ideas?

     

    Any further ideas at all?

     

    Thanks!

  • Verified answer
    THowkins96 Profile Picture
    THowkins96 88 on at

    @Amik 

     

    For the benefit of the forum I have cracked my issue in the code below where I embed the variable codes within the if statement so that it does not run the variables for everything. The issue was that [0] could not be found if the provider field was null, therefore I am querying that the field does not equal null and equals the GUID of the row and then the final else if says if it is null then hide everything!

     

    Problem solved!

     

    function onLoad(executionContext) {
 var formContext = executionContext.getFormContext();
 formContext.getAttribute("cr6fc_provider").addOnChange(onSupplierChange);
}


function onSupplierChange(executionContext) {
	var formContext = executionContext.getFormContext();

	if (formContext.getAttribute("cr6fc_provider").getValue() != null && formContext.getAttribute("cr6fc_provider").getValue()[0].id.replace("{", "").replace("}", "") == "FC5D1173-7D42-EE11-BDF3-002248A1F770") {
		formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
		formContext.ui.tabs.get("tab_systopia").setVisible(true);
	}
	else if (formContext.getAttribute("cr6fc_provider").getValue() != null && formContext.getAttribute("cr6fc_provider").getValue()[0].id.replace("{", "").replace("}", "") == "AD5D1173-7D42-EE11-BDF3-002248A1F770") {
		formContext.ui.tabs.get("tab_365smartfridge").setVisible(true);
		formContext.ui.tabs.get("tab_systopia").setVisible(false);
	}
 else if (formContext.getAttribute("cr6fc_provider").getValue() == null){
 formContext.ui.tabs.get("tab_365smartfridge").setVisible(false);
		formContext.ui.tabs.get("tab_systopia").setVisible(false);
 }
}

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 342 Most Valuable Professional

#2
11manish Profile Picture

11manish 234

#3
Valantis Profile Picture

Valantis 187

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans