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.
- Actions menu
- Displayed in the banner of the theme. Contains actions available for the current page.
- JSON location: dav:fs-type1/themes/PageBuilder2/menuDefinitions/pageActions.json
- User menu
- Displayed in the banner of the theme. Contains links to "Edit My Profile" and "Impersonate", if user has permission to view those items.
- JSON location: dav:fs-type1/themes/PageBuilder2/menuDefinitions/userActions.json
- Layout Control menu
- Displayed in the titlebar of the skin. Contains actions available for the portlet or widget.
- JSON location: dav:fs-type1/themes/PageBuilder2/menuDefinitions/widgetActions.json
JSON file contents
Each of the JSON files contains an array of objects. Each object contains these parameters:
title
A string name for the menu item.
bundlePackage
bundleName
bundleKey
These 3 strings are used in conjunction to retrieve a translated string from Dojo's localization framework. Example:
title=dojo.i18n.getLocalization(bundlePackage, bundleName) [bundleKey];
ordinal
This attribute sets the position of the menu item relative to other item ordinals. The value must be an integer.
id
A string which is a unique identifier for the menu item.
visibilityFn
A reference to a JavaScript function that returns true if the menu item should display, and false if it should be hidden.
actionFn
A reference to a JavaScript function that is run when a user clicks the menu item.
metadata
A JavaScript object that is passed as a parameter into both the visibility and action function
itemClass
A string that is set as a CSS class on the menu item.
iconClass
A string that is set as a CSS class to the left of the menu item text. Used to set a background image used as an icon for the item.
isSeparator
Set to true if the menu item is used to separate other items. For example, this searator might be presented in the UI as extra space or a visible line.
enable
Set to false if the menu item should be disabled.
Menu item visibility and action function parameters
Four parameters are passed by the menu framework into the visibility and action functions:
- ID: identifier of the page, portlet or widget with which the menu is associated
- resourceType: string declared class of the page, portlet or widget, eg: "com.ibm.mashups.enabler.navigation.NavigationNode" for a page
- metadata: the metadata object from the menu item in the JSON file
- obj: optional object passed in by the menu framework to give more information.
How to add a new item to a menu
- Open the menu JSON file.
- Scroll to the bottom of the file to find the end of the JSON array.
- 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"
}
- 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
Related
Work with page builder navigation
Page builder iWidgets
Previous
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
Related reference
Page builder drag-and-drop
Hints and tips for page builder
Related information
Enabler API Quick Reference
|
|
|
|
|
|
});
|