How do you keep Title Bar tabs active in the Application Layout Control?

StackOverflow https://stackoverflow.com/questions/10182630

  •  01-06-2021
  •  | 
  •  

Question

I have an application that makes use of the Application Layout Control. The UI has two tabs defined in the Title Bar section. The UI also contains a Navigator control in the sidebar that allows users to select links to open other pages. What I am having troubles with is keeping the current tab set as the active tab when users click on links in the current navigator.

Was it helpful?

Solution

The "configuration" property of the Application Layout Control is a complex type, which in turn supports all the properties that define the layout itself. One of those properties is "navigationPath". If Netflix used this control on their site, the value of that property when viewing the movie information page for Ghostbusters might look something like:

/home/genres/comedies/541018

So this property can be thought of as a way of describing the page's current location in the "site map" using *nix filepath syntax.

Each titleBarTab is also a complex type; one of its properties is "selection". This property is intended to be given a value that matches part or all of the current navigationPath for the overall layout. So, continuing the Netflix example, you might define your tabs like this:

<xe:this.titleBarTabs>
    <xe:pageTreeNode
        page="/genre.xsp"
        label="Action"
        queryString="genre=action"
        selection="/home/genres/action/*" />
    <xe:pageTreeNode
        page="/genre.xsp"
        label="Comedy"
        queryString="genre=comedies"
        selection="/home/genres/comedies/*" />
    <xe:pageTreeNode
        page="/genre.xsp"
        label="Drama"
        queryString="genre=dramas"
        selection="/home/genres/dramas/*" />
</xe:this.titleBarTabs>

On the page for Ghostbusters, then, because navigationPath property for the layout matches the pattern defined for the selection property of the pageTreeNode with a label of "Comedy", that tab will appear selected, but the others will not.

Also perhaps worthy of note is that the layout configuration also includes a property called "defaultNavigationPath". The value of this property will be compared against the selection property of each titleBarTab if the navigationPath property has no value. So you typically want to set this to a path that would cause the first tab to appear selected.

OTHER TIPS

Bruce, if I am reading this right, I ran into a similar problem a while back. Does this help at all? Setting a sessionScope variable for a TitleBar tab

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top