Disable Tab on Tab View

Hi all,

I have the following layered tab structure for selecting some filter criteria before running a fairly expensive query that will populate the “Overview”/“Details” tabs:

I’d like to disable the “Overview” and “Details” tab until the user has selected a plant, equipment, and time range on the “Details” tab. Any suggestions on how to do this?

Thanks

Sorry for the late response, but one way of doing this would be to use a style that turns off pointer events. You can do this by going to the tabbed container and creating the props.tabStyle.inactive.pointerEvents style. You can then bind this to the value of the dropdown and use a script transform to set the pointerEvents value to ‘none’ when the dropdown is empty and ‘auto’ when it has a value.
I’ve attached a sample project where I believe this is currently working the way you want. tabbedView.zip (3.5 KB)
In the example here, I used an embedded view with an output parameter that is bound to the value of the dropdown. Then that is utilized in the binding for TabContainer.props.tabStyle.inactive.pointerEvents.