Notes/Domino XPages Development Forum - Tabbed Panels and CSS styling: lotusSelected

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal

~Hal Dwoboosilygon

Aug 22, 2012, 3:46 AM

6 Posts

Tabbed Panels and CSS styling: lotusSelected

Category: Styles and Themes
Platform: All
Release: 8.5.3
Role: Developer
Tags: lotusSelected,Tabbed Panel
Replies: 1

I'm learning Xpages and have gone through the tutorials so I'm now trying my own application but drawing heavily from the tutorial application. I'm stuck on how to use the tabbed panels. Below is an excerpt from my code.

When I click on a tab (either the Home or System Set up tab) the tab colour changes as the lotusSelected style is applied. For each of these, the page which is opened is the page that I am on - documents.xsp.

However, when I change the href to a different page and then click on the tab the style is not applied. The style is only applied when I remain on the same page. Why not?

The Code

<xp:tabbedPanel id="lotusLinks" styleClass="lotusInlinelist lotusLinks">

<xp:tabPanel label="Home" id="tabHome" href="documents.xsp"

selectedTabStyleClass="lotusSelected"

startTabStyleClass="lotusFirst">

</xp:tabPanel>

<xp:tabPanel label="Websites" id="tabWebsites"

selectedTabStyleClass="lotusSelected" href="websites.xsp">

</xp:tabPanel>

<xp:tabPanel label="System Set Up" id="tabSystemSetUp"

selectedTabStyleClass="lotusSelected">

</xp:tabPanel>

</xp:tabbedPanel>

~Hal Dwoboosilygon

Aug 22, 2012, 7:45 AM

6 Posts

Re: Tabbed Panels and CSS styling: lotusSelected

I've stumbled upon this as a solution:

<xp:tabbedPanel id="lotusLinks" styleClass="lotusInlinelist lotusLinks">

<xp:this.selectedTab><![CDATA[#{javascript:param.tab;}]]></xp:this.selectedTab>

<xp:tabPanel label="Home" id="tabHome" href="documents.xsp?tab=tabHome"

selectedTabStyleClass="lotusSelected"

startTabStyleClass="lotusFirst">

</xp:tabPanel>

<xp:tabPanel label="Websites" id="tabWebsites" href="websites.xsp?tab=tabWebsites"

selectedTabStyleClass="lotusSelected">

</xp:tabPanel>

<xp:tabPanel label="System Set Up" id="tabSystemSetUp" href="systemsetup.xsp?tab=tabSystem"

selectedTabStyleClass="lotusSelected">

</xp:tabPanel>

</xp:tabbedPanel>

I have set the default open tab as a computed value:

param.tab;

Question: Is this the best solution or am I missing something fundamental about the tabbed panel control?

Many thanks