+

Search Tips   |   Advanced Search

Server-side framework


A plug-in receives HTTP requests for specific menus from a client and responds with the menu feed in JSON format. The response is marked as content type application/JSON.

The request URL for the menu feed provider is under the /wps/contenthandler or /wps/mycontenthandler URLs, depending on whether the request is coming from a currently-logged-in user context. The request URL might carry portal URL navigational state, but does require a specific query string to access the menu feed provider. The specific query string to get to the default JSON feed provider is:

?uri=menu:<specific menu name>&navID=<navigation node OID or custom unique name>
[&windowID=<portlet window control ID on the page> ]
where:

WebSphere Portal provides three ready-to-use menu definition files with the Portal 8.0 Optimized Theme:

These files exist in WebDAV, under a menuDefinitions directory within the root for the theme root. The root is set in theme metadata under the metadata entry name com.ibm.portal.theme.template.ref. Other files is that directory are JSON syntax but are not used by the JSON menu framework


JSON menu definition file syntax

For more details about JSON itself, see the JSON home page.

The JSON syntax of a menu definition file consists of an array of JSON objects, where the array is indicated by outer enclosing opening and closing brackets [ ]. Each JSON object is enclosed in braces ({ }) and separated by commas:

[
   // optional one-line comment 
   {
     JSON object 1 (first menu item)
   },    
/*
     optional multi-line comment
   */
   {
     JSON object 2 (second menu item)
   },    ...
]

We can add comments in this file using a portal-specific extension to JSON syntax.

The final object in the array does not have a comma between its curly brace and the ending array closing bracket.

The order of the objects in the array within the menu definition file determines the order of appearance of the items in the menu on the client.

Each object within the array is an individual self-contained menu item definition, or a reference to a theme optimization module that can provide additional in-line JSON menu definition file markup. This contributed JSON is included in-line as though it was in the menu file itself.

Each object consists of multiple comma-separated JSON members, each of which has a name and a value that are separated by a colon. The member name is always a string in quotation marks. The values can be strings, Booleans, nested objects, or arrays, depending on the member name. Some member names can have only certain values, as defined in the following table.

Each menu item definition must have a type entry, which defined that particular menu entry item.

Important: All entry names are case-sensitive.

The folowing menu item names and values are acceptable values for the type entry.


Valid members in a JSON menu definition file

Member name Value and example syntax Comments
type "Header", "Separator", "DynamicMenuitem", "StaticMenuitem", "ModuleRef", Submenu" Determines the type of menu item created by this menu definition file object
id String For a DynamicMenuitem or a ModuleRef, the id member is required. For a Submenu, either id or moduleId is required.

    DynamicMenuitem

    The id is the name of the plug-is that is accessed by the menu feed provider to get the actionUrl (which is the OperationURI of the operation), the localized title and description, and the isActive method of the operation, which indicates whether the action is active and also accessible by the current user. The actionUrl is sent to the server in a separate request if the user clicks on this menuitem in the rendered menu.

    ModuleRef

    The id is the name of the plug-is that is accessed to retrieve additional menu file definition markup.

    Submenu

    The id is present, it is the name of the menu that is requested by the client in an HTTP menu request to create the submenu list of items.

titles Array of objects, each of which has these members:

a "lang" defines the language for that title entry, and a "value" contains the string for that language for the title.

"titles" : [ {"lang":"en", "value":"Title in English"}, {"lang":"de", "value":"Title auf Deutsch"}, ... ]

Used only for header, StaticMenuitem, and Submenu entries. The list of languages provided covers only the necessary languages that the users of a portal might need. A DynamicMenuitem retrieves the title from the corresponding plug-in. The plug-in is required to implement the Localized interface, and provide localized strings for appropriate languages. A Separator has no text associated with it. A ModuleRef is replaced by other markup.
descriptions Same as titles. "descriptions" : [ {"lang":"en", "value":"Title in English"}, {"lang":"de", "value":"Title auf Deutsch"}, ... ] Optional for all types. If present, this member is interpreted by the default client code as hover help text over the menu item.
itemClass String Optional for all types. This member is the style class name that should be applied to the menu item. If present, this should be a class name that is present in the style sheet associated with the theme for the menu.
enabled Boolean true or false Optional for all types. Defaults to true. This member indicates whether the menu item should be clickable on the client side. True equates to active, false equates to not active.
enableFn String Optional for all types. If present, this member is the name of a JavaScript function to execute on the client to determine if this menu item is active. The complete menu feed JSON object for this menu item is passed as an argument to the function.

The result from this function call overrides the "enabled" setting.

actionUrl String For a StaticMenuitem, either the actionUrl or the actionFn must be present. If actionUrl is present, it might be an absolute URL or a relative URL, or a query string that is appended to the current request URL or tag value. Not required for a DynamicMenuitem. Not useful for any other type.

Invoking the actionFn takes precedence over an actionUrl if both are present.

actionHttpMethod String, with normal HTTP values "GET", "POST", "PUT", "DELETE" and so on. Defaults to "GET". Optional for all object types. If present on a DynamicMenuitem, this will override any action provided by the Operation Framework plug-in.
actionFn String For a StaticMenuitem, either the actionUrl or the actionFn must be present. If actionFn is present, this member should be the name of a JavaScript function to execute on the client when the menu item is clicked. The complete menu feed JSON object for this menu item is passed as an argument to the function. Invoking the actionFn will take precedence over an actionUrl if both are present.
visibilityFn String Optional for all types, but not useful for Separator or ModuleRef. For a DynamicMenuitem or StaticMenuitem, if visibilityFn is present, this member should be the name of a JavaScript function to execute on the client to determine whether this menu item is active. The complete menu feed JSON object for this menu item is passed as an argument to the function.
metadata Embedded object, where the only value types are Strings. Ex: "metadata": { "name1" : "value1", "name2" : "${substitution-variable}", ... } Optional for all types. If present, this member must be a simple embedded object with only String values. No deeper object nesting or arrays are allowed as values. If substitution variables are present, in the form ${variableName}, then these values are substituted from query parameters on the received menu request. Multiple query parameters can be in a string, but only one pass is made through the string.
moduleId String Optional for a Submenu, but only applicable for a Submenu. If present instead of an id in a Submenu entry, this member should be the name of a module like the id of a ModuleRethat is accessed by the client in a separate direct request if the Submenu item is expanded by the user. The format of the menu item built by this is {"type":"Submenu", "id" : "moduleRef:", ... }. The client code makes a request to the server using this is that is a variation of the normal menu request: ?uri=menu:moduleRef:". The feed provider code handles this request by invoking the named module as though there were a menu feed definition file containinged a ModuleRef wito that id.
moduleArgs String, in the format of an HTTP request query parameter set, but without a leading ampersand (the menu feed provider prepends an ampersand). If there are multiple query parameters, insert an ampersand between each parameter after the first. Example:
foo=bar&foo2=bar2&... 
Optional for a Submenu, but only applicable for a Submenu. If present with a moduleId, then the URI built by the menu feed provider for the Submenu entry in the feed looks like {"type" : "Submenu", "id" : "moduleRef:moduleId_value&moduleArgs_value", ... }. If present with an id in the Submenu, the URI looks like the previous example but without the moduleRef: prefix for the id and arguments.
markupId Arbitrary string, used to create an id in the html tag that defines the menu item. Optional. Useful only for DynamicMenuItem and StaticMenuItem menu entries. Variable substitution is supported for this item, so the ${windowID} can be used to make unique instances of an id for each portlet when rendered.


Writing a menu definition file for a modularized theme

We can write a new menu definition file for a new theme using the server-side feed provider and client-side JavaScript. If the ready-use 8.0 theme is copied and altered into a new customized theme, the same JSON menu files can be used, or can be altered as necessary. If any new client-side functions are referenced from menu items then these new JavaScript features need to be created and referenced.

The JSON menu feed provider looks for the JSON menu definition files in a menuDefinitions directory in the theme root in WebDav.

Use the existing menu definitions files as samples, and use tools such as jsonlint to prevalidate the JSON syntax.

The JSON syntax is restrictive for menu definition files except that comments are allowed.

When debugging, use the trace string com.ibm.wps.jsonmenu.*=all on the server.


Parent: Menu framework
Related:

JSON home page