Hidden / Disabled Tab?

[p.baum]

Hi,

I have a Tab Panel with 3 Tabs and under some conditions Tab 2 contain no information. So it’s not necessary to show Tab 2. Is it possible to hide or disable Tab 2 of the Tab Panel?

Regards
Patrick

[David]

The tab cannot be hidden at all. It can be 'somewhat' disabled by handling the 'ontabclick' event.

If an external JavaScript function (defined in a JS file) that runs from this event returns Boolean 'false', then the tab click will be cancelled and nothing will happen.

For example, you can set the property to this:

myFunction(tab);

The 'tab' is a special variable that is available in the event handler that has the tab number, with the leftmost tab being tab zero.

The function can then decide whether to return false or not, based on this. To control this through RPG logic, the RPG code could perhaps put a hidden field on screen that the script could examine in order to determine whether/not it should allow the tab click.

[SeanTyree]

There is a way to "hide" the last tab. Here is what we have done:

First, bind the tab names to a program field. Then when you want to conditionally display all three tabs, set the field to the comma separated list of all 3 tab names. When you do not want to show the third tab, only set the field to the first 2 tab names.

[Scott Klement]

Sean,

That makes sense for disabling the last (rightmost) tab, but won't work for the middle one (unless you somehow moved all of the data to the middle one -- which is possible, but quite a lot of effort)

[SeanTyree]

Scott,
Agreed, I did mention "last tab". We ran into this and decided to locate conditional data on the last tab.

[SeanTyree]

Scott,

As a follow-up, do you think there is any possibility of allowing the parent tab property of a field set to be bound? This would allow an easy way to move the content of a tab panel between tabsheets.

Sean

[p.baum]

Hi David,

Good idea, I will try it...

Thanks
Patrick

[shuffman]

I know this is an old thread but i think i may be able to help the next person who comes along.

This worked for me to hide tabs

If you bind a Wrapping Text widget's HTML property to a variable. This could probably work with many different widgets but i chose the Wrapping Text. This variable should contain a comma separated string with the tabs you want to show. The tab names in this string have to match the actual tab names. You'll want to hide this widget. After you have done this place the following function call in your screen onload event property.

Code: Select all

hideTabs("tabPanelID","validTabsID");

You will need to also place the function this is calling in an externally described js file. It could technically go in the screen but as is it will need to be external.

Code: Select all

function hideTabs(tabPanelId,validTabsId){
	var tabPanel = document.getElementById(tabPanelId); //tab panel widget object
	var validTabs = document.getElementById(validTabsId).textContent.split(','); //array of valid tabs
	var tabs = tabPanel.childNodes[1].childNodes; //tab <span> tags inside of tab widget
	for(var loopy = 0; loopy < tabs.length; loopy++){ //loop through all tabs
		var tab = tabs[loopy]; //single tab <span>
		if(validTabs.indexOf(tab.textContent.trim()) == -1){
			tab.style.display = "none"; //hide tab if it is not in the array of valid tabs
		}
	}
}

Assuming the DOM of the Tab Panel widget doesn't change this function should always work.

Sam