How to show/hide the Tab based on condition in 7.4?

Hi Harry,

All tabs are kept in the TabsCollection. You can access it like this;

this.get ("TabsCollection");

The example below shows how to hide the tab for the Account with 'Customer' type:

this.get ("TabsCollection");

attributes: {

                "Type": {

                    dependencies: [

                        {

                            columns: ["Type"],

                            methodName: "typeChange"

                        }

                    ]

                }

            },typeChange: function () {



                    /*  Show/Hide the tab */

                    var tabsCollection = this.get("TabsCollection");

                   //TestTab- name of the tab to be hidden

                    var TestTab = tabsCollection.contains("TestTab")?tabsCollection.get("TestTab"):false;

                    // hiding the "TestTab" for all Accounts except Customers

                    if( Type === Constants.Customer && 

                        !TestTab){

                        tabsCollection.insert(4, "TestTab", Terrasoft.Account.TestTab);

                    }else if(!(Type === Constants.Customer) &&

                        TestTab){

                        Terrasoft.Account.TestTab= TestTab;

                        tabsCollection.removeByKey("TestTab");

                    }

                }

Hi, I have a doubt with the code,

You use TestTab as the name of the tab and to the defined variable to evaluate, and after use this variable, where goes each one, there is a possiblity to name it differently?

Thanks in advance

Hi Julio!

I'm sorry, I do not follow. Could you please explain what you mean in more detail?

Alternatively to the method provided by Olly, you can use the BINDPARAMETER rule type to change the visibility. Here's an example:

https://academy.bpmonline.com/documents/technic-sdk/7-8/how-hide-edit-p…

Hi Adam,

Sorry... I saw you use TestTab as the TAB Name and a variable to manage it,

var TestTab = tabsCollection.contains("TestTab")?tabsCollection.get("TestTab"):false;

my question is

var TestTabVAR = tabsCollection.contains( "TestTab" ) ? tabsCollection.get( "TestTab" ) : false;

is OK, or must be the same name, if not where use each in your code?

Thanks in advance

Dear Julio,

You can use the following example as a reference: 

methods: {
			onRender: function(){
				this.callParent(arguments);
				this.showTabsForCategoryAndType();
			},
			
			onEntityInitialized: function(){
				this.callParent(arguments);
				this.showTabsForCategoryAndType();
			},
			
			showTabsForCategoryAndType: function(){
				var tabNames = {
					Refinance: "Tab1", //tab name in diff
					Purchase: "Tab2",
					Construction: "Tab3",	
				}
				var categoryValue = this.get("Category")?this.get("Category").value:null;
				var typeValue = this.get("Type")?this.get("Type").value:null;
				var isAnyActiveDynamicTab = false;
				if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Finance){
					if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Refinance){
						isAnyActiveDynamicTab = true;
						this.hideAllDynamicTabs(tabNames)
						this.hideTabByName(tabNames.Refinance, false);
					}
				}
				if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Finance){
					if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Purchase){
						isAnyActiveDynamicTab = true;
						this.hideAllDynamicTabs(tabNames)
						this.hideTabByName(tabNames.Purchase, false);
					}
				}
				if(categoryValue == OpportunityConfigurationConstants.Opportunity.Category.Finance){
					if(typeValue == OpportunityConfigurationConstants.Opportunity.Type.Construction){
						isAnyActiveDynamicTab = true;
						this.hideAllDynamicTabs(tabNames)
						this.hideTabByName(tabNames.Construction, false);
					}
				}
				if(!isAnyActiveDynamicTab){
					this.hideAllDynamicTabs(tabNames)
				}
			},
			hideAllDynamicTabs: function(tabNamesConfig){
				this.hideTabByName(tabNamesConfig.Refinance, true);
				this.hideTabByName(tabNamesConfig.Purchase, true);
				this.hideTabByName(tabNamesConfig.Construction, true);
			},
			hideTabByName: function(tabName, isHide){
				var tabsCollection = this.get("TabsCollection");
				if(tabsCollection){
					var tabIndex = tabsCollection.collection.keys.indexOf(tabName);
					var tabsPanelDomElement = document.getElementById("OpportunityPageV2TabsTabPanel-tabpanel-items");
					if(tabsPanelDomElement){
						tabDomElement = tabsPanelDomElement.querySelector('[data-item-index="'+tabIndex.toString()+'"]');
						if(tabDomElement){
							if(isHide){
								tabDomElement.style.display = "none";
							}else{
								tabDomElement.style.display = null;
							}
						}
					}
					
				}
				
			}
		},