topic TabContainer hide tabs by title in Web AppBuilder Custom Widgets Questions

TabContainer hide tabs by title

JamesCrandall — Mon, 09 Jan 2023 14:22:14 GMT

WAB 2.19

JS 3.x

Inherited a custom widget that has TabContainer implemented and attempting to hide tabs by title. Removing the TabContainer altogether isn't an option as there is a ton of js that would have to be reworked and prefer to just have a simple loop to hide elements.

I'm able to setup a loop over the tabs and successfully evaluate on title but not able to apply the correct method to hide the tab.

_initTabContainer: function() { var tabs = []; tabs.push({ title: 'Water Use', content: this.tabNode1 }); tabs.push({ title: 'ERP', content: this.tabNode2 }); tabs.push({ title: 'OKEE', content: this.tabNode3 }); tabs.push({ title: 'ERC', content: this.tabNode4 }); this.selTab = 'ERP'; this.tabContainer = new TabContainer({ tabs: tabs, selected: this.selTab }, this.tabIdentify); this.tabContainer.startup(); //this is where I'm attempting to hide tabs for (var i = 0; i < this.tabContainer.tabs.length; i++) { if (this.tabContainer.tabs[i].title == 'Water Use'){ this.tabContainer.tabs[i].style.display ='none' //error: Cannot set properties of undefined (setting 'display') } } this.own(on(this.tabContainer, 'tabChanged', lang.hitch(this, function (title) { if (title == 'ERP') { this.currentTab = 'ERP'} else if (title == 'Water Use'){ this.currentTab = 'WU' } else if (title == 'OKEE'){ this.currentTab = 'OKEE' } else if (title == 'ERC') { this.currentTab = 'ERC' } }))); utils.setVerticalCenter(this.tabContainer.domNode); },

Re: TabContainer hide tabs by title

KenBuja — Mon, 09 Jan 2023 14:58:43 GMT

The TabContainer3 does have a removeTab method. Can you use that instead? It looks like you supply the title of the tab, from what I can tell from the code (found in client\stemapp\jimu.js\dijit\TabContainer3.js).

Re: TabContainer hide tabs by title

JamesCrandall — Mon, 09 Jan 2023 15:13:21 GMT

Thanks for the input -- I change TabContainer to TabContainer3 but don't see that it has any removeTab or remove method (probably not implementing correctly tho:

this.selTab = 'Water Use'; this.tabContainer = new TabContainer3({ tabs: tabs, selected: this.selTab }, this.tabIdentify); this.tabContainer.startup(); for (var i = 0; i < this.tabContainer.tabs.length; i++) { if (this.tabContainer.tabs[i].title == 'Water Use'){ this.tabContainer.tabs[i].removeTab(); //this.tabContainer.tabs[i].style.display ='none' //error: Cannot set properties of undefined (setting 'display') } }

Re: TabContainer hide tabs by title

KenBuja — Mon, 09 Jan 2023 15:45:01 GMT

See if this works

this.tabContainer.removeTab('Water Use');

Re: TabContainer hide tabs by title

JamesCrandall — Mon, 09 Jan 2023 16:02:44 GMT

Yep! Thank you!