Page 1 of 1
Hidden / Disabled Tab?
Posted: Tue Sep 24, 2013 5:09 am
by 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
Re: Hidden / Disabled Tab?
Posted: Tue Sep 24, 2013 9:45 am
by 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.
Re: Hidden / Disabled Tab?
Posted: Tue Sep 24, 2013 1:25 pm
by 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.
Re: Hidden / Disabled Tab?
Posted: Tue Sep 24, 2013 3:05 pm
by 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)
Re: Hidden / Disabled Tab?
Posted: Tue Sep 24, 2013 8:05 pm
by SeanTyree
Scott,
Agreed, I did mention "last tab". We ran into this and decided to locate conditional data on the last tab.
Re: Hidden / Disabled Tab?
Posted: Wed Sep 25, 2013 4:23 pm
by 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
Re: Hidden / Disabled Tab?
Posted: Thu Sep 26, 2013 2:34 am
by p.baum
Hi David,
Good idea, I will try it...
Thanks
Patrick
Re: Hidden / Disabled Tab?
Posted: Fri Sep 23, 2016 3:35 pm
by 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