Archive | SwitchFacet RSS for this section

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