2. PHPRunner Tips and Tricks
  3. How to show or hide tabs conditionally
This topic is locked

How to show or hide tabs conditionally

 		3/2/2011 12:36:53 PM
PHPRunner Tips and Tricks
F
 FunkDaddy author

I decided to add this simple tip to elaborate on the posting that asked how to hide and show tabs conditionally (original post here http://www.asprunner.com/forums/topic/15679-asprunner-6-3-conditional-tab/)
As you can see,per Sergey's answer, Here is how you can hide the tab in Javascript onload event.



pageObj.tabs['tabGroup_New_tab_11'].removeTab(pageObj.tabs['tabGroup_New_tab_11'].getTab(2));


In this example tabGroup_New_tab_11 is the name of tab group. To find this name proceed to the Edit page, make tab group selected and switch to HTML mode. Tab name will be highlighted.
In getTab(2) 2 is a tab index (zero based). 0 - first tab, 1 - second tab etc.
-----

Great, now to add a conditional to this you could add a hidden field to your form and have javascript fetch the value of that field to evaluate whether or not to trigger the pageObj.tabs method.
However, a better approach would be to add an event to the "Before display" event in the form that is being loaded that would add a javascript variable to your page only if a condition is met at the server level (via PHP logic) before the page is rendered. For example:



if( $_SESSION["Show_Households_CF1"] == 1){

echo "<script language=\"JavaScript\"> var DisplayCustomTab = 1; </script>";

} else {

echo "<script language=\"JavaScript\"> var DisplayCustomTab = 0; </script>";

}


I just wanted to share this in case others needed to use a PHP Session var to trigger a javascript on page without the need to insert a custom button, etc.
Cheers,
A
 		agentsmith 3/20/2011

Thanks for the codes.
Is it possible to hide multiple tabs based on one condition?
In my case, I'm trying to hide 2 tabs by writing it this way, and it doesn't work.

Thanks.



pageObj.tabs['tabGroup_New_tab_11'].removeTab(pageObj.tabs['tabGroup_New_tab_11'].getTab(2));

pageObj.tabs['tabGroup_New_tab_11'].removeTab(pageObj.tabs['tabGroup_New_tab_11'].getTab(3));




I decided to add this simple tip to elaborate on the posting that asked how to hide and show tabs conditionally (original post here http://www.asprunner.com/forums/topic/15679-asprunner-6-3-conditional-tab/)
As you can see,per Sergey's answer, Here is how you can hide the tab in Javascript onload event.



pageObj.tabs['tabGroup_New_tab_11'].removeTab(pageObj.tabs['tabGroup_New_tab_11'].getTab(2));


In this example tabGroup_New_tab_11 is the name of tab group. To find this name proceed to the Edit page, make tab group selected and switch to HTML mode. Tab name will be highlighted.
In getTab(2) 2 is a tab index (zero based). 0 - first tab, 1 - second tab etc.
-----

Great, now to add a conditional to this you could add a hidden field to your form and have javascript fetch the value of that field to evaluate whether or not to trigger the pageObj.tabs method.
However, a better approach would be to add an event to the "Before display" event in the form that is being loaded that would add a javascript variable to your page only if a condition is met at the server level (via PHP logic) before the page is rendered. For example:



if( $_SESSION["Show_Households_CF1"] == 1){

echo "<script language=\"JavaScript\"> var DisplayCustomTab = 1; </script>";

} else {

echo "<script language=\"JavaScript\"> var DisplayCustomTab = 0; </script>";

}


I just wanted to share this in case others needed to use a PHP Session var to trigger a javascript on page without the need to insert a custom button, etc.
Cheers,
F
 		FunkDaddy author 3/20/2011

I don't see why it wouldn't work. Are you sure you are referring to the tab numbers correctly? Remember they use zero based index array. Thus, 1st tab is numbr zero, 2nd tab is number one, etc.
M
A
 		agentsmith 3/23/2011

It works after a few trials and errors. In my case, I have to use
pageObj.tabs['tabGroup_New_tab_11'].removeTab(pageObj.tabs['tabGroup_New_tab_11'].getTab(2));

pageObj.tabs['tabGroup_New_tab_11'].removeTab(pageObj.tabs['tabGroup_New_tab_11'].getTab(2));
basically, once the first tab(2) is removed, the remaining tabs will be renamed according to the new array.
Thanks FunkDaddy for this tip and the rest that you put up, really appreciate them.



I don't see why it wouldn't work. Are you sure you are referring to the tab numbers correctly? Remember they use zero based index array. Thus, 1st tab is numbr zero, 2nd tab is number one, etc.
M
A
 		auez 6/15/2011

Ok, but what happen when i want to show this tabs if the condition change like a dropdown list ?. Are there a way to show it ?