XPages Tip: Using a SwitchFacet Control to Change Menus in a OneUI Application Layout Control

The OneUI Application Layout control has a built-in facet for left-side navigation. It is common to create a single navigation menu in that facet. However, rather than create one giant menu with lots of hide formulas, I prefer to create separate menu custom controls for each section of the application and use a Switch Facet control to determine which menu to display, based on the selected tab in the application.

Within the xe:switchFacet tag, there are two key tags. The xp:this.facets tag defines the options to display in the switch facet control. In this example, each option is a separate custom control. The xp:key property just gives the facet a name. The xp:this.selectedFacet tag contains the logic to compute the facet to display, based on the facet names defined in the xp:key properties of each facet.

Notes that sessionScope.AppTab is the scope variable where I store the name of the selected tab in the application layout. Update that line for wherever you store that property. I believe you can also programmatically change the selected facet if you so choose.

<xe:switchFacet id="switchFacet1" defaultFacet="menu1">
  <xp:this.facets>
    <xc:ccMenu1 xp:key="menu1" />
    <xc:ccMenu2 xp:key="menu2" />
    <xc:ccMenu3 xp:key="menu3" />
    <xc:ccMenu4 xp:key="menu4" />
    <xc:ccMenu5 xp:key="menu5" />
  </xp:this.facets>

  <xe:this.selectedFacet><![CDATA[#{javascript:
    var tab = sessionScope.AppTab;
    var menu;
    if (!tab) menu = 'Tab1';
    switch (tab) {
      case 'Tab1':
        menu = 'menu1';
        break;
      case 'Tab2':
        menu = 'menu2';
        break;		
      case 'Tab3':
        menu = 'menu3'
        break;
      case 'Tab4':
        menu = 'menu4'
        break;
      case 'Tab5':
        menu = 'menu5';
        break;
      default:
        menu = 'menu1';
        break;
      }
    return menu;}]]>
  </xe:this.selectedFacet>
</xe:switchFacet>
Advertisements

3 responses to “XPages Tip: Using a SwitchFacet Control to Change Menus in a OneUI Application Layout Control”

  1. DavidLeedy (@DavidLeedy) says :

    But isn’t the “selected tab” a separate .xsp? I’m assuming so. I’m also assuming that you’re dropping your nav onto your single main layout custom control.

    Wouldn’t an alternative be to just not put the nav bar on your main layout custom control, but add the correct nav to the correct page?

    Just wondering.

  2. Brad Balassaitis says :

    Selected Tab is not a separate xsp per se. It’s just a variable I’m using to track the selected application tab in the OneUI application layout control. However, when I switch the app tab, I do load the default page for that area of the application.

    You are correct that I’m using the switchfacet on a single app layout control.

    You could definitely put the correct navigator on each page. in my opinion, it’s a little simpler to manage it in one place at the app layout control.

  3. christy says :

    Do you have an example anywhere? I am looking at possibly using Application Layout for something and I want to have about 5 main tabs, with two tiers of choices after that. I was thinking that first level would be in the Application Links, next level on Title Bar, and last in the left Navigation column. the Data in Title bar and Navigation column would be dependent on the Application Link tab that is chosen. I am looking for the best practice way to do this. I think dynamic content or switch facet might be the way to go, but I can’t find much that is helpful at this point.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: