Selected vs Selection in Xpages application layout control

Question

This is SO confusing. I have an Xpage application built with the application layout control. I have 2 Title Bars which each have a navigation element in them with two views each.

I want the selected Title Bar and view to be highlighted. I understand that somehow this involves the Navigation Path and the use of the selected and/or selection properties,, but I do not understand how they work or interact.

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2013-10-25T19:33:56

Can these answers help you? How do you use the Selected property of the navigator?

You need to set the navigationPath property on each XPage and this must match the selection property (using regex) on the navigation control.

Updated with answer to the comment below

Here's an example XPage for the Home tab and the navigation control for Home:

<xc:layout navigationPath="/Home/XPage1">
    <xp:this.facets>
        <xc:layout_menu_home xp:key="facetLeft"></xc:layout_menu_home>
        <xc:content_xpage1 xp:key="facetMiddle"></xc:content_xpage1>
    </xp:this.facets>
</xc:layout>

The layout custom control uses the xe:applicationLayout to control the layout. In this case it has a custom property called navigationPath which is used in the example XPage above. The corresponding navigationPath property of the xe:applicationLayout must be set to this custom property:

<xe:applicationLayout id="applicationLayout">
    ...
    <xe:this.configuration>
        <xe:oneuiApplication 
            navigationPath="${javascript:compositeData.navigationPath}">

Here's part of xe:applicationLayout for handling the two tabs in your layout custom control:

<xe:this.titleBarTabs>
    <xe:pageTreeNode page="/xpage1.xsp" label="Home" selection="/Home/.*"></xe:pageTreeNode>
    <xe:pageTreeNode page="/xpage3.xsp" label="Tips" selection="/Tips/.*"></xe:pageTreeNode>
</xe:this.titleBarTabs>

Here's an example navigation control for Home:

<xe:navigator id="navigator1" >
    <xe:this.treeNodes>
        <xe:pageTreeNode page="/xpage1.xsp" label="XPage 1" selection="/Home/XPage1"></xe:pageTreeNode>
        <xe:pageTreeNode page="/xpage2.xsp" label="XPage 2" selection="/Home/XPage2"></xe:pageTreeNode>
    </xe:this.treeNodes>
</xe:navigator>

Selected vs Selection in Xpages application layout control

1 Answers