Hiding tabs in Tabbed Panels - XPages

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 ...

Simple Dialog Box In XPage

Creating Simple Dialog Box In XPage

The following is a procedure that will help you to create a simple Dojo Dialog Box in XPage

1. Create an XPage
2. Create a Panel and put some text inside it
3. In the All properties tab of the XPage, Mark the parameters, dojoTheme and dojoParseOnLoad as true (refer to the following figure)

4.Move to the source code panel and add the following code snippet

<xp:this.resources>
        <xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
    </xp:this.resources>

5. Now add a button and in the onclick event of the button (client side)
put the following client side javascript

dijit.byId("myDialogContainer").show()

Now preview your XPage on the client or on the browser and click the button.
You will be able to see a nice dojo popup

The source code of the Xpage that I developed for this particular task is as follows,

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

    <xp:this.resources>
        <xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
    </xp:this.resources>
       
    <xp:button value="Dialog Popup" id="button2">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[dijit.byId("myDialogContainer").show()]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>
   
    <div id="myDialogContainer" dojoType="dijit.Dialog"
        style="display:none">
        <xp:panel>Test Popup</xp:panel>
    </div>
       
</xp:view>

Log Construction in lotus script

Dim ActivityLogRTItem As NotesRichTextItem
Set LogDoc=curDB.CreateDocument
LogDoc.Form="LogForm"   
LogDoc.Server=curdb.Server
LogDoc.StartTime=Now
Set ActivityLogRTItem = New NotesRichTextItem( LogDoc, "Rtxtlogactivity" )
Call ActivityLogRTItem.AppendText( Now+ ": "&"Agent Started")
Call ActivityLogRTItem.AddNewLine( 1)
Call LogDoc.Save(True,False)

Redim Construction in Lotus script

Dim m As Integer
m=1
ReDim manager(1)
If (Aclentry.Level = ACLLEVEL_MANAGER) Then
    manager(m-1)=Aclentry.Name
    m=m+1
    ReDim Preserve manager(m)
    msgbox manager
    persondoc.txt_manager=manager
EndIf