Page builder menus

Learn how menus work in the Page Builder theme.


Page builder menus

The Page Builder theme uses several drop-down menus. The menu items are populated by using JavaScript Object Notation (JSON) files, located in WebDAV.


JSON file contents

Each of the JSON files contains an array of objects. Each object contains these parameters:
title


bundlePackage
bundleName
bundleKey


ordinal


id


visibilityFn


actionFn


metadata


itemClass


iconClass


isSeparator


enable


Menu item visibility and action function parameters

Four parameters are passed by the menu framework into the visibility and action functions:


How to add a new item to a menu

  1. Open the menu JSON file.

  2. Scroll to the bottom of the file to find the end of the JSON array.

  3. Add a new action item by insert this code into the JSON array:

      {
          title: "My Menu Item",
          bundlePackage: "com.ibm.bundles",
          bundleName: "Theme",
          bundleKey: "menu_item",
          ordinal: 10,
          enabled: true,
          visibilityFn: function(ID, resourceType, metadata, obj){ return true; },
          actionFn: function(ID, resourceType, metadata, obj){ alert("Click!"); },
          id: "PageActions:myItem"
      }

  4. Clear browser cache, reload the page and open the menu to see the new entry.


Other menu item examples

Add a separator:

{
    title: "My Separator",
    bundlePackage: "com.ibm.bundles",
    bundleName: "Theme",
    bundleKey: "separator",
    isSeparator: true,
    ordinal: 20,
    visibilityFn: function(ID, resourceType, metadata, obj){ return true; },
    id: "PageActions:mySeparator"
}

Add a heading:

{
 
    title: "My Header",
 
    bundlePackage: "com.ibm.bundles",
 
    bundleName: "Theme",
 
    bundleKey: "header",
 
    itemClass: "menuSectionHeader",
 
    ordinal: 30,
 
    enabled: true,
 
    visibilityFn: function(ID, resourceType, metadata, obj){ return true; },
 
    id: "PageActions:myHeader"
 
}

Add an item with an icon:

{
 
    title: "My Icon Item",
 
    bundlePackage: "com.ibm.bundles",
 
    bundleName: "Theme",
 
    bundleKey: "icon",
 
    iconClass: "dijitEditorIcon dijitEditorIconCut",
 
    ordinal: 40,
 
    enabled: true,
 
    visibilityFn: function(ID, resourceType, metadata, obj){ return true; },
 
    actionFn: function(ID, resourceType, metadata, obj){ alert("I have an icon."); },
 
    id: "PageActions:myIcon"
 
}

Add a disabled item:

{
 
    title: "My Disabled Item",
 
    bundlePackage: "com.ibm.bundles",
 
    bundleName: "Theme",
 
    bundleKey: "disabled",
 
    ordinal: 50,
 
    enabled: false,
 
    visibilityFn: function(ID, resourceType, metadata, obj){ return true; },
 
    id: "PageActions:myDisabled"
 
}

Use the metadata object:

{
 
    title: "My Metadata Item",
 
    bundlePackage: "com.ibm.bundles",
 
    bundleName: "Theme",
 
    bundleKey: "metadata",
 
    ordinal: 60,
 
    enabled: true,
 
    visibilityFn: function(ID, resourceType, metadata, obj){ return metadata.show; },
 
    actionFn: function(ID, resourceType, metadata, obj){ alert(metadata.message); },
 
    metadata: {
 
        show: true,
 
        message: "The metadata menu item was clicked."
 
    }
 
    id: "PageActions:myMetadata"
 
}


Initializing the menus

The Page builder menus are initialized in dav:fs-type1/themes/PageBuilder2/js/init.js. For example, initializing the Actions menu:

var pageActionsMenu = new com.ibm.pb.contextMenu.JsonContextMenuLoader({url:dojo.moduleUrl("com.ibm.themes.PageBuilder2.menuDefinitions","pageActions.json")});
com.ibm.mashups.builder.model.Factory.getContextMenuModel().registerContextMenu("pageActions", pageActionsMenu);

First, a new menu is created by passing in a url to the JSON. Then the menu is registered with the menu framework.


Programmatic menu contributions

You might have noticed that not all of the menu items have an entry in the JSON files. This is because the Page builder theme adds some of the items programmatically. For example, the tagging and rating options from the Actions menu are added like the following:

var pageActionsContribution = new com.ibm.cp.TRContextMenuLoader(true);
 
com.ibm.mashups.builder.model.Factory.getContextMenuModel().addContribution("pageActions", pageActionsContribution, 60);

First a new menu is created for tagging and rating; it must have a getItems function that returns an Enabler deferred object to retrieve the array of menu items like those seen in the flat JSON files. Then the contribution is added to the pageActions menu.

See Enabler API Quick Reference for more information about Enabler.


Out-of-box menu functions

The default menu functions that control visibility and the action of the items are located in the "com.ibm.pb.contextMenu.sharedActions" object within the theme.js javascript layer. The layer is located here:

<PortalServer_Root /theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/v1.4.3/com/ibm/themes/PageBuilder2/


Parent

Work with Page Builder
Work with page builder navigation
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

  Changed content type Minor change


+

Search Tips   |   Advanced Search