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

[THowkins96]

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:

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

Thanks!

[Amik]

@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);

}

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]

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!

[THowkins96 · Accepted solution]

@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);
    }
}