Work with page builder navigation

Learn how the Page builder navigation widgets work and how to configure them.


Page builder navigation

There are two levels of navigation shown in the Page builder theme. Both are instances of the same iWidget, but are parameterized to use different pages and CSS styles.

  1. Banner navigation

      location: list of links at the top of the page

      file: $PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/bannerNav.jsp

      level: 1

  2. Tabbed navigation

      location: row of tabs beneath the banner navigation

      file: $PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/tabNav.jsp

      level: 2


Navigation rendering

Each of the iWidgets is rooted at a navigation level, and displays the children of its root. The Banner navigation is rooted at level 0, or Content Root, and so displays the first level of pages. The Tabbed navigation is rooted at level 1, and shows the pages at level 2 that are under its root node.

The JSP files shown above print out the markup shown by the navigation iWidgets, along the iWidget definition. On page load, the iWidget is initialized and consumes the markup generated by the JSP. See Page Builder iWidgets for more information about iWidgets.

The markup is generated by the JSP, so the user does not need to wait until the iWidget initializes to see the navigation.


Navigation attributes

Some attributes of the navigation iWidgets can be configured.

strings
attachNode


class


tabListClass


tabClass


firstItemClass


selectedClass


varyLevelCondition


level


levels


openDelay


popupDelay


closeDelay


showInlineEditor


dndOperable


Configure the navigation

The navigation attributes are passed into the iWidgets by putting them in the "iw-ItemSet" markup of the definition.

<div class="iw-iWidget iw-Standalone" id="navigationContainer">
    <a class="iw-Definition" href="/someurl/widget-catalog/ControlledNavWidget.xml"></a>
    <span class="iw-ItemSet" style="display:none" title="attributes">
        <a class="iw-Item" href="#level">1</a>
        <a class="iw-Item" href="#tabListClass">lotusTabs</a>
    </span>
</div>

The previous code shows tabbed navigation rooted at level 1. You can edit the iw-Items or add new ones in the JSP.


Navigation configuration examples

Make Banner navigation edits in PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/bannerNav.jsp

Make Tabbed navigation edits in PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/tabNav.jsp
Remove the New Page link


Disable drag and drop


Change the level of navigation


Remove the child page drop-down menus

If adding or removing levels of navigation and navigation priming is enabled there is one additional configuration. In the config.jsp there is a navigation priming container with the ID "selectionPathPrimer". There is a loop within this container that out-of-box starts with a value of 1. If you remove the banner navigation, you should start this loop at 0.


Navigation iWidget details

Both navigation elements are instances of the ControlledNavWidget iWidget. The widget listens and responds to events to refresh its markup or switch to a new page.

When a page link is clicked in server-side mode, there is a full page refresh, therefore the iWidgets are destroyed and re-created. In client-side mode, there is no page refresh, so the navigation widgets simply refresh their markup to indicate the page switch.

The ControlledNavWidget uses a singleton instance of the NavigationController JavaScript class. This class provides a tree model of the navigation by using the Enabler run time APIs. See Enabler_API_Quick_Reference for more information about Enabler APIs.

The NavigationController also provides the current selection path. A selection path is a list of pages from the root, down the navigation tree to the currently selected page. If adding or removing an instance of the navigation widget, also add or remove the container ID from the navigation priming attribute. To do this open theme.html and find the JavaScript object named "com.ibm.pb.themes.commonInit" set in an onload handler. Remove the nav widget container ID from the attribute named "navPrimingContainers". Out-of-box it looks like the following:

navPrimingContainers:  ["selectionPathPrimer","topNavLinks","navTabsRoot"]


Parent

Work with Page Builder
Page builder menus
Page builder iWidgets


Related tasks


Create top level page tabs
Move page tabs
Create child pages
Move child pages
Add content
Change page style
Change page layout
Hide content
Share pages
Use a different Dojo version
Page builder drag-and-drop
Hints and tips for page builder

Enabler API Quick Reference

  added more information about levels parameter Changed content type


+

Search Tips   |   Advanced Search