Websphere portal theme menu framework

WebSphere Portal Theme Menu Framework
Michele Buccarello
8/27/2014
This document describe how to use the menu framework in WebSphere Portal Theme.

Websphere Portal Menu Framework
Author:Michele Buccarello Page 1
Table of Contents
Abstract ....................................................................................................................................................... 2
Menu Framework ........................................................................................................................................ 2
Client Side ................................................................................................................................................ 2
Server Side ............................................................................................................................................... 3
Provide the menu via custom module .......................................................................................................... 3
Configure the module in your Portal Theme................................................................................................. 6
Test the menu feed ...................................................................................................................................... 8

Abstract
In WebSphere Portal Theme there is an enterprise way to write extend or overwrite menu like the action menu
In knowledge center (link below) there is a good description about it
http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/mp/dev- theme/themeopt_cust_menu.dita?lang=en
Based on this example
http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/mp/dev- theme/themeopt_cust_resrcpermiss.dita?lang=en
we want extend this menu without editing the pageAction.json (like in the IBM example) .
Menu Framework
WebSphere Portal Menu Framework is divided in client side and server side:
- Client Side is used to render the menu in link with standard portal css
- Serve Side is used to make the json feed in format ?uri=menu:customMenu
Client Side
All details about client side framework can be found here:
http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/mp/dev- theme/themeopt_cust_clientframe.dita

In this article we use the sample rendering way:
<span role="button" aria-haspopup="true" class="wpthemeMenuFocus" onclick="if (typeof wptheme != 'undefined') wptheme.contextMenu.init({ 'node': this, menuId: 'pageAction', jsonQuery: {'navID':ibmCfg.portalConfig.currentPageOID}, params: {'alignment':'right'}});"
My Menu

Highlighted in yellow you could see the menuid name created with the server side framework.
Server Side
All details about client side framework can be found here:
http://www-01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/mp/dev- theme/themeopt_cust_serverframe.dita
In this article we don’t generate dynamically the feed but we provide JSON file in the format described in the knowledge center link.
Provide the menu via custom module
In this step we create an ear with a custom plugin.xml, this plugin describe how the menu is recognized and provided by the Portal Theme.

1) Create a Dynamic Web Project
2) Create in the webcontent two files: - decorations.xml - plugin.xml
Inside the plugin.xml put the content below
<?xml version="1.0" encoding="UTF-8"?>
<plugin id="staticMenuModule" name="8.5 staticMenuModule" provider-name="IBM" version="1.0.0">
<extension point="com.ibm.portal.resourceaggregator.module" id="staticMenuModule" >
<module id="staticMenuModule">
<contribution type="menu">
<sub-contribution type="json" ref-id="pageAction">
<uri value="res:{war:context- root}/menu/json/menuItem.json" />
</sub-contribution>
</contribution>
<contribution type="dyn-cs">
<sub-contribution type="markup" ref-id="menuActionMarkUp">
<uri value="res:{war:context-root}/menu/jsp/menuAction.jsp"/>
</sub-contribution>
</contribution>
</module>
</extension>
</plugin>

3) Create the folder menu under the WebContent folder and then create two folders named jsp and json, in the jsp folder create the file menuAction.jsp in the json folder create the file menuItem.json, at this point you should see something like this:
In the menuItem.json put this content:
[
{
"type":"DynamicMenuitem",
"id":"ibm.portal.operations.assignPagePermissions",
"titles": [
{
"value":"Assign Page Permissions Modified",
"lang":"en"
}
]
}
]
In the menuAction.jsp put this content:
<span role="button" aria-haspopup="true" class="wpthemeMenuFocus"
onclick="if (typeof wptheme != 'undefined') wptheme.contextMenu.init({ 'node': this, menuId: 'pageAction', jsonQuery: {'navID':ibmCfg.portalConfig.currentPageOID}, params: {'alignment':'right'}});">

My Menu

Configure the module in your Portal Theme
At this point you have been created module named staticMenuModule with two contribution:
- <sub-contribution type="json" ref-id="pageAction"> this subcotribution is a menu type and have as a reference the pageAction menu feed
- <sub-contribution type="markup" ref-id="menuActionMarkUp"> this subcontribution is the dynamiccontentspot that contain the client side framework html piece
To see the module active and functional
1) Add the module in the current theme profiles, in my case this profile is the profile_deferred.json
2) Add the dynamiccontentspot in the theme_xx.html, for testing purpose just customize the theme_en.html

3) Invalidate the portal theme cache and check successful loading of the module throw the Theme Analizer Portlet. Click on the link UTILITIES  CONTROL CENTER Click in the link under the sections “Invalidate Cache”
In the SystemOut.log you should see something like this

4) Check in every portal pages if the dynamic content spot is visibile
At this point the menu Actions and the custom menu “My Menu” have the same items and are extend with the custom link to the Resource Permission portlet
Test the menu feed
To ensure the right menu generation as described in the server side framework link it is important check the feed via the poc uri uri=menu:

In my case I got the page oid and compose this url http://localhost:10039/wps/mycontenthandler?uri=menu:pageAction&navID=Z6_4AD223S0K0VR30ASD3J5LF2005
In your browser now you are able to see the menuAction json feed with your custom json provided with the custom theme module

Websphere portal theme menu framework

More Related Content

What's hot (20)

Similar to Websphere portal theme menu framework (20)

Recently uploaded (20)

Websphere portal theme menu framework