Perspective: How can I hide a tab in a tab container?

[nminchin]

I need to hide tabs based on conditions, can I do it?

Edit: I’m using a custom view for my tabs with bindings on my viewparams

[calimero100582]

In the object on each tab define a custom value “tabKey” that corresponds to the tab the element belong

On tabIndex define the following binding (don’t know it this is possible with an expression)

Add/Remove tabs as you wish in the tab controller

[nminchin]

Is now a bad time to say that I’m using custom views with bound view params for my tabs? But otherwise, binding to the tabs prop would definitely work

[calimero100582]

sorry, but I don’t see how this prevent this from working

[nminchin]

Sorry, you’re right, I skimmed a little too quickly and assumed.

Yep, this will work basically forcing the shown index to nothing if it ‘doesn’t exist’ (technically it does still exist…)
I actually created a hideTab prop on my custom tab view, so I think I’ll use this to check against as its already bound.
Cheers!

[nathan1]

Here’s a function I use to hide/show tabs. Similar concept as @calimero100582 but in script.

def toggleTab(self, tab, visible):
		tabs = []
		idx = 0
		logger = system.util.getLogger('mylog')
		logger.info('toggling tab: %s %s' % (tab, visible))
		
		for c in self.children:
			metaTab = c.meta.tab
			name = c.meta.name
			logger.info('testing tab: %s %s' % (metaTab, name))
			
			if not metaTab:
				logger.warn('missing meta.tab on container: %s' % c.meta.name)
				return		
				
			if metaTab == tab:
				c.position.tabIndex = idx if visible else -1
			
			if c.position.tabIndex > -1:
				c.position.tabIndex = idx
				tabs.append(metaTab)
				idx = idx + 1
				logger.info('visible tab: %s' % metaTab)
			else:
				logger.info('hidden tab: %s' % metaTab)
						
		self.props.tabs = tabs

self is the TabContainer instance and you have to add a meta.tab value on each container in your TabContainer that corresponds to its associated tab.

[dhiraj.pawar]

Hello,
How can i hide a single tab in tab container based on condition. I have created 12 tab. As per view changes tab should have to hide.

Thanks

[pascal.fragnoud]

I don’t think there’s a built-in way to achieve this right now, but it can be done with css injection.
See this thread.

I see two ways:
Make a style class for each one of the tabs you want to hide (hide_tab1, hide_tab2, etc).
In each of those style classes, put this in the background-position property (or any other property that lets you type things): } .psc-hide_tabX .tab-menu-item[data-index="X-1"] {display: None } {
Of course you’ll have to change that to match the class and tab:
for tab 2 it will be } .psc-hide_tab2 .tab-menu-item[data-index="1"] {display: None } {,
for tab 3 } .psc-hide_tab3 .tab-menu-item[data-index="2"] {display: None } {
etc.
Then add the appropriate classes to your tab container’s style when changing views/doing whatever triggers the hiding of some tabs.

solution 2:
Add a custom property on your tab container to store the indices of the tabs you want to hide. You’ll have to update this property whenever you need to hide/display tabs.
Add any property to the tab container’s style, and bind it to your custom property.
then add a script transform, and put this in:

return "}} {} {{display: None }} {{".format(', '.join(".tab-menu-item[data-index='{}']".format(tab) for tab in value))

note that the tab indices are 0-based. If you’re putting 1-based indices in the custom prop, you’ll need to adjust them.

[dhiraj.pawar]

Thanks for response.

[pascal.fragnoud]

I just tried method 2 and I can’t seem to be able to make it work… first method works though.
I’ll try to figure out what’s wrong with it

[victordcq]

itsnt it easier to do the solution above and just remove the tab from the tabs prop?

@calimero100582

On tabIndex define the following binding (don’t know it this is possible with an expression)

[pascal.fragnoud]

You’re absolutely right. I didn’t read the previous posts, supposing that no solution had been found, since someone was asking again… I guess he didn’t read either !

[victordcq]

And your second idea wont work btw. It might have worked if perspected used scss instead of css tho
(it has nested classes) Though actually not sure if that woul even render in run time…xD

[drojas]

Shameless plug here, but I tend to combine a tab control with a Dynamic View. That way, I control what tabs are shown and the Dynamic View loads the view based on the tab selected.

Ignition Exchange