Hiding tabs in Tabbed Panels - XPages

There was once a requirement where I had to hide and display tabs in XPages as and when the scenario required it.

It took me some time though to find the solution. Though this post may feel simple and straight forward, it discuss about a little trick that you will experience as you follow.

Create an XPage, put two edit boxes named tab1Flag and tab2Flag and give them a default values of 1 and 0 respectively.

In the next line put two buttons.Name them Toggle tab 1 and Toogle tab 2.

Code these buttons such a way that these buttons enable the fields to toogle between values 0 and 1.

Code on Toggle tab 1 button would be some thing like,

var dispVal=getComponent('tab1Flag').getValue();
(dispVal=='1')? getComponent('tab1Flag').setValue('0') : getComponent('tab1Flag').setValue('1')

Replace all 1s by 2s (except for the 3rd line) for the second button

Now drag and drop a tabbeb panel control into the XPage on a new line.

Select the newly created tabbed control, and go to the outline view and select the individual tab properties as illustrated by the following figure.

Select the small diamond near the Visible check box and key in the following code into it.

flagComp=getComponent('tab1Flag').getValue();
(flagComp == '1')? true : false ;

Similarly mark the second tab's visiblity property with the following code,

flagComp=getComponent('tab2Flag').getValue();
(flagComp == '1')? true : false ;

In total the source code of your XPage must be similar to the following,

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

   
    <xp:br></xp:br>
    <xp:inputText id="tab1Flag" defaultValue="1"></xp:inputText>
    <xp:inputText id="tab2Flag" defaultValue="0"></xp:inputText>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:button value="Toggle tab 1" id="button1">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete">
            <xp:this.action><![CDATA[#{javascript:var dispVal=getComponent('tab1Flag').getValue();
(dispVal=='1')? getComponent('tab1Flag').setValue('0') : getComponent('tab1Flag').setValue('1')}]]></xp:this.action>
        </xp:eventHandler></xp:button>
    <xp:button value="Toggle tab 2" id="button2">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete">
            <xp:this.action><![CDATA[#{javascript:var dispVal=getComponent('tab2Flag').getValue();
(dispVal=='1')? getComponent('tab2Flag').setValue('0') : getComponent('tab2Flag').setValue('1')}]]></xp:this.action>
        </xp:eventHandler></xp:button>
   
    <xp:br></xp:br><xp:tabbedPanel id="tabbedPanel1">
        <xp:tabPanel label="New Tab" id="tabPanel1">tab 1<xp:this.rendered><![CDATA[#{javascript:flagComp=getComponent('tab1Flag').getValue();
(flagComp == '1')? true : false ;}]]></xp:this.rendered></xp:tabPanel>
        <xp:tabPanel label="New Tab2" id="tabPanel2">tab 2<xp:this.rendered><![CDATA[#{javascript:flagComp=getComponent('tab2Flag').getValue();
(flagComp=='1')? true : false ;}]]></xp:this.rendered></xp:tabPanel>
    </xp:tabbedPanel>
    </xp:view>

Now save and preview your XPage. Now you can toggle the tabs visually. That is either hide them or show them.

The trick here is "Atleast one of the tabs must be left visible" . i.e. you can toggle tab2 when tab1 is visible alone and viceversa. If this condition is not satisfied you are going to get your XPage to bombard a run time error.

I dont like this behavior of tabbed panels in XPages, honestly. I think this is an issue with the XPages. I surely know that there are always ways to work around issues and get the desired solutions but, I feel this is not an acceptable behavior of tabbed panels - I mean why should it give you a run time error for a mistake that you are not responsible for... It can simply go hidden instead of giving me a run time error ...