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">
    <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" />

    var tab = sessionScope.AppTab;
    var menu;
    if (!tab) menu = 'Tab1';
    switch (tab) {
      case 'Tab1':
        menu = 'menu1';
      case 'Tab2':
        menu = 'menu2';
      case 'Tab3':
        menu = 'menu3'
      case 'Tab4':
        menu = 'menu4'
      case 'Tab5':
        menu = 'menu5';
        menu = 'menu1';
    return menu;}]]>