ShowTable of Contents
Using menu components, you can search for data in the IBM® Web Content ManagerTM
(WCM) system. With the out-of-the-box functionality, however, you are only able to display the queried data in a horizontal or vertical manner, which can be a limitation. This article discusses the process of customizing menu components and how the same process can be used for other Library components of WCM.
There have been a number of instances in which the developers need to show the search data retrieved by the menu component in a grid format (2x2, 3x3, etc.), so in this exercise we retrieve the search data from WCM and display the data in a 2x2 grid format.
What is a menu?
A menu is a search mechanism that searches for published content matching its search criteria. The search criteria are profiles composed of site areas, templates, categories, and keywords. Content that has a profile that matches the criteria are listed as links in the menu.
Setting up the environment
Let's begin by setting up our environment.
Create a menu component
To do this, create a new menu component and define the design for each menu search result (see figure 1). Note that, here "~#" is used as a separator, but you can use your own.
Figure 1. New new menu component
Create a JSP component
Create a new JavaTM
Server Pages (JSP) component and a corresponding JSP page, as shown in figure 2. All the actual action takes place in the JSP page; the JSP component uses the WCM APIs and calls the menu component.
Figure 2. JSP component
Create a Portal page
To do this:
Figure 3. Web Content Viewer
- Create a Portal page and add a Web Content Viewer portlet to this page.
- Add the JSP component created in the section above to this portlet.
- Point the portlet to a default Content (see figure 3).
Our goal is to show the search data retrieved via the menu component in the 2x2 grid format. To achieve this, we need to write a JSP page. Figure 4 shows four content items in a 2x2 grid format, in which the content items have been retrieved via the menu component, and the layout has been defined in the JSP.
Figure 4. Menu results
Understanding the JSP code
1. First we must import the WCM APIs into our JSP files as shown in listing 1.
Listing 1. Code to import WCM APIs
<%@ page import="com.ibm.workplace.wcm.api.*"%>
<%@ page import="com.ibm.workplace.wcm.api.exceptions.*"%>
<%@ page import="java.util.*,javax.servlet.jsp.JspWriter,java.io.*"%>
2. Get the workspace and find the menu component, where the name of our menu component is menu1 (see listing 2).
Listing 2. Code to find the menu component
Workspace myworkspace = WCM_API.getRepository().getSystemWorkspace();
DocumentIdIterator componentIdIterator = myworkspace.findComponentByName("menu1");
3. Pass the WCM library path and the Site Area path to the rendering context as shown in listing 3.
Listing 3. Code to pass the paths to rendering context
String libraryPath ="/Web Content";
String sitePath = "/SiteArea";
RenderingContext context = myworkspace.createRenderingContext(pageContext.getRequest(),pageContext.getResponse(), new java.util.HashMap(), "http://mitultp.ibm.com:10039/wps/wcm", "/connect");
context.setRenderedContent(libraryPath + sitePath);
4. Next we must iterate through the menu component and separate out each content item from the menu result. We use the separator "~#" that we created as part of the environment setup above. Then we process the tokens separately and design it in the html layout, per our requirement, which in our case, would be a 2x2 grid layout (see listing 4).
Listing 4. Code to design in the html layout
docId = (DocumentId)componentIdIterator.next();
component = (LibraryComponent) myworkspace.getById(docId);
String renderedContent = myworkspace.render(context, component);
StringTokenizer st = new StringTokenizer(renderedContent, "~#");
//Process the tokens
String token = st.nextToken();
5. To show the next set of items we can call this JSP again on click of a "More" link or button. We can also use a similar kind of JSP and pass it the current count of the Menu results. Based on the parameter passed, the new JSP will get the next set of results.
6. For processing the "More" button, we can use Ajax calls so that the page is not refreshed, and the results are shown in the same page area. On click of the More button the new set of results will display as shown in figure 5.
Figure 5. Menu Results showing next set of query data
We can further enhance this functionality by specifying the grid layout structure (2x2 or 3x3, for example) as part of the Authoring template. At run time, we can read the value of the grid structure and pass it to our JSP code. The JSP code would need to handle the data dynamically based on the inputs provided in the Authoring template.
This article has shown how to customize WCM menu components using WCM APIs. You can use the code snippets in the above code listings to customize the navigator component also. And you can use the sample JSP attached to this article to examine the code and customize it according to your own needs.
developerWorks IBM Web Content Manager product page:
developerWorks IBM WebSphere Portal product page:
IBM Web Content Manager forum:
About the author
is an IT Specialist with IBM Software Labs, India. He is part of the Lotus Lab Services team and specializes in WebSphere Portal, Web Content Manager, and IBM Forms. You can reach him at firstname.lastname@example.org