<xe:navigator> applying incorrect styling using OneUI 2.1

Question

I am using a navigator control from the extension library. I want to use the default styling where only the selected item is highlighted and all the others are not highlighted and show the pointer cursor. For some reason it is applying the class "lotusSelected" to all the navigator nodes which are rendered as list items <li>.

I know that the "selected" property of tree nodes controls this. It does the same whether the property is set to true, false, or nothing. I am not trying to do anything fancy here, just use the default behavior. There is nothing in the custom css or theme to override this.

This happens on all browsers. Using Chrome tools I can see that removing the class causes the behavior I want. The navigation opens an XPage and changes a dynamic content control, this all works. This is used inside of the application layout control.

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

    <xe:navigator id="navigator1" expandable="false">
        <xe:this.treeNodes>
            <xe:pageTreeNode label="Add New ATM"
                page="/xpSupervisor.xsp" queryString="content=newATM">
            </xe:pageTreeNode>
            <xe:pageTreeNode label="Update ATM Information"
                page="/xpSupervisor.xsp" queryString="content=updateATM"
                selected="false">
            </xe:pageTreeNode>
            <xe:pageTreeNode label="One Time Settlement Amount Change"
                page="/xpSupervisor.xsp" queryString="content=changeSettlementAmt"
                selected="false">
            </xe:pageTreeNode>
        </xe:this.treeNodes>
    </xe:navigator></xp:view>

UPDATE: It seems to be some conflict between the pageTreeNode and the way I created the dynamic content control. It only messes up when on that one Xpage. Here is the code for that:

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


    <xe:dynamicContent id="dynamicContent1" useHash="true"
        defaultFacet="default">
        <xp:this.facets>
            <xc:ccSupervisorHelp xp:key="default"></xc:ccSupervisorHelp>
            <xc:ccNewATM xp:key="newATM"></xc:ccNewATM>
            <xc:ccUpdateATM xp:key="updateATM"></xc:ccUpdateATM>
            <xc:ccChangeSettlementAmt xp:key="changeSettlementAmt"></xc:ccChangeSettlementAmt>
        </xp:this.facets>
    </xe:dynamicContent>
</xp:view>

Answer 1

If I'am right, all nodes are selected because all nodes has the same page page="/xpSupervisor.xsp" as aim. So if the page xpSupervisor.xsp is open, the navigator renders the nodes as select.

Answer 2

The property selected is only a boolean value, indicating whether the pageTreeNode is selected or not.

You should take a look at the property selection. This property is used in conjunction with navigationPath in the applicationLayout control. The property selection can take regular expressions to determine the selection state.

Answer 3

Despite two good answers which go me closer, I could not get the menu to work using the pageTreeNode. The fix was to switch to using a basicLeafNode and use a submittedValue and open the correct page in the onItemClick event of the navigator. I also added code in the 'selected' property to calculate which menu item was selected.

I could not get the context.getSubmittedValue() method to work in the selected property. I overcame this by setting it to a sessionScope var in the event. (viewScope didn't work for some reason)

<xe:basicLeafNode label="Update ATM Information" submitValue="updateATM">
  <xe:this.selected><![CDATA[#{javascript:if(sessionScope.menuValue == "updateATM"){
    return true;
} else {
    return false;
}}]]></xe:this.selected></xe:basicLeafNode>

This is the code in the onItemClick that opens the correct link:

sessionScope.menuValue = context.getSubmittedValue();

if (sessionScope.menuValue == "newATM") {
    context.redirectToPage("xpSupervisor.xsp?content=newATM");
} else...

The bottom of page 244 of the Extension Library book confirms this problem without offering a fix. Even though I have the book, hopefully this searchable answer will help others avoid the hassle I went through.