Customizing components in IBM Lotus Quickr services for IBM WebSphere Portal 8.0

Working with composite applications to maximize your collaboration tools

Learn about the composite applications that are available for IBM Lotus Quickr services for IBM WebSphere Portal 8.0. See how to customize the components that use IBM Workplace Web Content Management services. Follow along with an example as we add functionality to the blog composite application.

Axel Saß (axel.sass@de.ibm.com), Certified IT Specialist, IBM

Axel Saß joined IBM in 2000. He is a certified IT Specialist for the Lotus Technical Sales Competitive Team in Germany. His responsibilities include support for the sales of IBM WebSphere Portal and IBM Lotus Quickr.



Jon Brunn (jbrunn@us.ibm.com), Software Architect, EMC

Jon Brunn is the architect of Lotus Quickr for Enterprise Content Management integration. Jon currently contributes to the Lotus Quickr product, especially in the areas of extension, customization, and enterprise integration. You can reach Jon at jbrunn@us.ibm.com.



19 March 2008

Also available in Chinese

In this article, we cover the composite applications that are available for IBM Lotus Quickr services for IBM WebSphere Portal 8.0, also called the J2EE version of Lotus Quickr. We show you how to customize the components that use IBM Workplace Web Content Management services. We explain the basic concepts and show you how to add functionality to the blog composite application through an example.

Lotus Quickr presentation of content: Basic concepts

Lotus Quickr services for WebSphere Portal uses the concept of composite applications to create places. Download a trial version of Lotus Quickr 8.0, a Web 2.0-based team collaboration offering. You can read more about the concept of composite applications in the developerWorks article, "Building composite applications and templates in WebSphere Portal V6."

In general with composite applications, several aspects of current IT development are implemented. Composite applications should do the following:

  • Reuse parts
  • Have those parts interact with each other
  • Be a complete package that has all necessary information to be deployed
  • Be able to reuse the entire application in the form of a template

Two different kinds of composite applications are packaged in Lotus Quickr. Wikis, blogs, and lists (announcements, contacts, and project tasks, for example) use IBM Workplace Web Content Management to display their content. The feed reader and the library composite applications do not use Workplace Web Content Management.

This article focuses on customizing composite applications that use Workplace Web Content Management. Let's take a closer look at the general concepts of Workplace Web Content Management.

Workplace Web Content Management concepts

From the Workplace Web Content Management system view, content is a collection of elements of data such as text, numbers, or images. You can interact with that content in two different ways:

  • Authoring templates. You use authoring templates to create or edit content. These templates define how the user interface looks for creating or editing of a specific piece of content.
  • Presentation templates. When the content is displayed, you use a presentation template.

Authoring templates are mapped to presentation templates. Given an authoring template and a site, an associated presentation template is used to display the content to the user. The presentation template can include references to Web content components. When referenced from a presentation template, the Web content components are reusable snippets that are included in the presentation as if they were in the presentation template. Web content component types include HTML, image, rich text, stylesheet, and more. When you reference a Web content component, the engine can either replace the reference with the content of the component (as in an HTML or rich-text component) or replace the reference with a URL to the content of the Web content component (as in an image or stylesheet component).

Figure 1 shows how the different Workplace Web Content Management artifacts interact with each other.

Figure 1. Workplace Web Content Management artifacts
Workplace Web Content Management artifacts

Workplace Web Content Management components

In the different presentation templates in Lotus Quickr, several Workplace Web Content Management elements are used. An element represents how information about a piece of content is presented to the user or in what format that information exists. Here are the elements used in the presentation templates of the Lotus Quickr composite applications:


  • Used to interact with content. Here you have different possible actions: NEW, EDIT, DELETE, APPROVE, REJECT.

  • Used to display HTML code.

  • Used to display a menu. In Workplace Web Content Management templates for Lotus Quickr, it is used to display a list of entries such as content items.

  • Used to integrate JSP code into a Workplace Web Content Management component. This component is, for example, used to display the correct status image in the Project Task.

  • Is the element type for entering text.

  • Is the element type for entering rich text.

  • Is the element type for entering a number.

  • Is the element type for entering a date and or a time.

  • Is the element type for displaying an image.

  • Is the element type to enter a selection.

Workplace Web Content Management remote actions

Workplace Web Content Management remote actions can be used to create links that trigger a certain action inside the underlying Workplace Web Content Management system. You can read more about remote actions in the WebSphere Portal V6 documentation.

A remote action is a URL. The actions are added to the URL by adding a parameter to the link to the Workplace Web Content Management application. For example:

http://quickr.greenautos.com:10038/lotus/myquickr?wcmAuthoringAction=action

You can use different kinds of actions:

  • Delete
  • Edit
  • Read
  • Openmainview
  • New
  • Workflow-related actions:
    • Decline
    • Approve

Generally, you do not need to use Workplace Web Content Management remote actions to create your own content. You can accomplish all you need by using the Authoring Tools component.


Customize Workplace Web Content Management-dependent Lotus Quickr composite applications

In the text that follows, we discuss the composite applications for Wiki, Blog, and List more fully. These three applications depend on Workplace Web Content Management to display their content to the user. For each of the composite applications, the presentation templates, the authoring templates, and the Workplace Web Content Management components and styles used in the templates are presented.

Wikis composite application

The Wiki composite application allows users to create and edit content. Each of the created entries can be linked to others.

Figure 2 shows the Wiki area of the presentation template.

Figure 2. Wiki area of the presentation template
Wiki area of the presentation template

These areas are used in the Wiki composite application:

  • Wiki Icon - Icon
  • Wiki - Area New Page Action - Authoring Component - Used Actions: Create
  • Wiki - Page list Tools - Authoring Component - Used Actions: Delete
  • Wiki - Recently added Pages - Menu - Six Last Entries
  • Wiki - Recently modified Pages - Menu - Six Last modified entries
  • Wiki area - About Box - HTML - About Box plus Atom Feed:
    • Common Site area About Info
    • Common Site area About box Links

This element is used in the Wiki area of the presentation template:

  • all_wiki_pages - Wiki – Pages

Figure 3 shows a Wiki page.

Figure 3. Wiki page
Wiki page

Figure 4 shows the details of the About box and the Task box.

Figure 4. The About box and the Task box
The About box and the Task box

These areas are used in the Wiki page:

  • Wiki Icon - Icon
  • Table of Contents - HTML
  • Table of Contents Trigger - HTML
  • Wiki - Edit Page - Authoring Component - Used Actions: Edit
  • Wiki page - Task Box - HTML
    • Wiki - New and Delete Page Link - Authoring Component - Used Actions:
      • NEW. New_button
      • EDIT. Wiki – Version and History Actions
      • DELETE
    • wiki_list - Wiki Pages
  • Wiki Page - About Box
    • Common Site Area - About Information
    • Wiki - References to Box
    • Feed Bookmark
    • Common Content - About box Links

This element is used in the Wiki page:

  • comment_section - Document Posts show Component

Available authoring templates for the Wiki composite application include these elements:

  • Wiki - Area
    • body - Rich Text
  • Wiki - Page
    • body - Rich Text

Blog composite application

The Blog composite application allows the user to create a list of information snippets. All of those entries are displayed in a consecutive way.

Figure 5 shows the Blog area of the presentation template.

Figure 5. Blog area of the presentation template
Blog section of the presentation template

These components are used in the Blog - Entry template:

  • Blog Icon - Icon
  • Blog entry - Task Box
    • Blog - Edit Entry - Authoring Component - Used Actions
    • Blog - New Delete Entry - Authoring Component - Used Actions:
      • NEW
      • DELETE
  • Blog - Recent Entries
  • Blog entry - About Box
    • Common Content About Info
    • Feed Integration
    • Common Content About box Links

This element is used in the Blog page:

  • comment_section - Document Posts show Component

Figure 6 shows the components used in the Blog page.

Figure 6. Elements used in the Blog page
Elements used in the Blog page

These components are used in the Blog - Main page:

  • Blog Icon - Icon
  • Blog - Entry View - Menu - Renders the last 10 entries
    • Document Posts - Count
  • Blog - New Post - Authoring Component - Used Actions: NEW
  • Blog - Manage Blog Action - Authoring Component- Used Actions:
    • DELETE:
      • Blog - Manage - Presentation Template
      • Edit Portlet Settings - JSP
        /teamspace/jsp/html/edit_portlet_settings.jsp
  • Blog – Recent Entries - Menu - Display recently added entries
  • Blog view – About Box
    • Common Site Area – About Info
    • Feed Integration
    • Common Site area – About Box Links

Figure 7 shows the components used in the Blog – Manage page.

Figure 7. Elements used in the Blog – Manage page
Elements used in the Blog – Manage page

These components are used in the Blog - Manage page:

  • Blog Icon - Icon
  • Blog - Manage Posts View - Menu (This menu lists all blog posts available to be managed.)
  • Blog - New Post - Authoring Component - Used Actions: NEW
  • Blog view - About box
    • Common Site Area - About Info
    • Feed Integration
    • Common Site area - About Box Links

Available authoring templates for the Blog composite application include these elements:

  • Blog - Entry
    • blog - Rich Text

List composite application

The List composite application is a base template. In Lotus Quickr, it has been used for these composite applications: Project Tasks, Announcements, and Contacts. For the main content of each list, a basic presentation template is used. This presentation template is then configured by using a template map to instantiate the template elements with its list-dependent values.

For example, when you look at figures 8, 9, and 10, you see that the component List – Main Icon has a different look depending on the implementation (Announcements, Contacts, or Project Tasks).

Figure 8 shows the implementation of an Announcements implementation using the List composite application.

Figure 8. The Announcement area
The Announcement area

Figure 9 shows the Contact implementation using the List composite application.

Figure 9. Contact area
Figure 9. Contact area

Figure 10 shows the Project Tasks implementation using the List composite application.

Figure 10. The Project Tasks area
The Project Tasks area

These components are used in the List - Main page:

  • List - Main Icon - Icon
  • List - Home Action Links - Authoring Component- Used Actions:
    • NEW. New_button - Create new list item
    • DELETE. List - Edit Portlet Settings - JSP
      /teamspace/jsp/html/list_edit_portlet_settings.jsp

These elements are used in the List – Main page:

  • New_button - Name of the new button for Announcement, Contact, and Project Task
  • Menu - Name of the component used to show the list of entries

Figure 11 shows an Announcement item.

Figure 11. Announcement item
Announcement item

These components are used in the List – Announcement item:

  • List - Main Icon - Icon
  • List - Item Action Links - Authoring Component - Used Actions:
    • NEW. New_button
    • EDIT
    • DELETE

These elements are used in the List – Announcement item:

  • New_button - Name of the new button for Announcement, Contact, and Project Task
  • Comment_section - Document Posts – Show

Figure 12 shows a Contact item.

Figure 12. Contact item
Contact item

These components are used in the List – Contact item:

  • List - Main Icon - Icon
  • List - Item Action Links - Authoring Component - Used Actions:
    • NEW. New_button
    • EDIT
    • DELETE

These elements are used in the List - Contact item:

  • New_button - Name of the new button for Announcement, Contact, and Project Task
  • Phone_number
  • Mobile_number
  • Work_number
  • Fax_number
  • Address
  • Company
  • Email_address
  • URL
  • Notes

Figure 13 shows a Project Task item.

Figure 13. Project Task item
Project Task item

These components are used in the List - Announcement item:

  • List - Project Task Priority Title Image - JSP
    • /teamspace/jsp/html/list_project_task_priority_titleicon.jsp
  • List - Update Task Status - JSP
    • /teamspace/jsp/html/list_update_task_status.jsp
      Used to update the current status of the task
  • List - Item Action Links - Authoring Component - Used Actions:
    • NEW. New_button
    • EDIT
    • DELETE
  • List - Project Task Status Image - JSP
    • /teamspace/jsp/html/list_project_task_status_image.jsp
      Change completion status

These elements are used in the List - Announcement Item:

  • New_button - Name of the new button for Announcement, Contact, and Project Task
  • Description - Rich Text
  • Assigned_to - User Selection
  • Priority - Option Selection
  • Start_date
  • Due_date
  • Comment_section

The names of the authoring templates with their elements are as follows:

  • List - Announcement
    • body - Rich Text
    • type - Option Selection
  • List – Contact
    • phone_number - Text
    • mobile_number - Text
    • work_number - Text
    • fax_number - Text
    • address - Text
    • company - Text
    • email_address - Text
    • url - Text
    • notes - Rich Text
  • List - Project Task
    • description - Rich Text
    • assigned_to - User Selection
    • priority - Option Selection
    • percentage_complete - Number
    • start_date - Date and Time
    • due_date - Date and Time

Cascading style sheets

Different options are used to change the appearance of a Lotus Quickr Teamroom. All of the methods described in the developerWorks Lotus article, "Customizing themes in IBM Lotus Quickr services for IBM WebSphere Portal V8.0," apply also for the composite applications in Lotus Quickr. But as some of the composite applications use Workplace Web Content Management as their basis, some variations apply. The following text describes those variants.

Changing styles in the general portal stylesheets

The majority of styles used in the composite applications are defined in this file:

\#wp_profile#\installedApps\porta\wps.ear\wps.war\
themes\html\#Theme Directory#\styles_ibmportlet.jspf

In the figures, you see two screen captures where the basic styles are shown. Figure 14 shows the styles used in the Wiki page.

Figure 14. Styles used in Wiki page
Styles used in Wiki page

Figure 15 shows the right section, the menu section of a Wiki – page to display the commonly used styles.

Figure 15. Styles used in the right section of Wiki page
Styles used in the right section of Wiki page

Next, we walk you through an example of how to change the style of the primary actions.

Changing of the style of the primary actions

In the Lotus Quickr basic theme, the primary actions look like the screen shown in figure 16.

Figure 16. Original Create user interface
Original Create user interface

To change the appearance of those actions to a different style from the one shown in the previous figure, do the following:

  1. Create two new images. One image acts as background, and one image acts as a twisty. As an example, you can use the ones supplied by the basic theme. You can find the background image at:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/
    themes/html/QPG/images/portlet/buttonBG.gif
  2. You can find the twisty image at:
    was_profile_root/installedApps/cellname/wps.ear/
    wps.war/images/icons/pb-menu.gif

    The twisty image, though, is not theme dependent. That means that you can only have one version per server. In this case, you should use a general color that looks good in all themes used by your server.

  3. Open this file:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/themes/html/
    custom_theme/styles_ibmportlet.jspf

    Search for the following definition:
    .ibm-portlet-sidebar .primary-action-section BUTTON {
  4. Exchange that definition with the style definition shown in listing 1.
    Listing 1. Style definition
    .ibm-portlet-sidebar .primary-action-section BUTTON {
       background: #E6F0FC url(./images/your-example.gif) left center repeat-x;
       color: #295500;
       border: 1px solid #295500;
       padding: 0.2em 0.5em;
       cursor: pointer;
    }
  5. Make sure that your definition looks like the one shown in listing 2.
    Listing 2. Revised definition
    .ibm-portlet-section-header-small .ibm-portlet-primary-actions BUTTON,
    .ibm-portlet-sidebar .ibm-portlet-primary-actions BUTTON,
    .ibm-portlet-sidebar .primary-action-section BUTTON {
      background: #E6F0FC url(./images/buttonBG-green.gif) left center repeat-x;
      color: #29550;
      border: 1px solid #295500;
      padding: 0.2em 0.5em;
      cursor: pointer;
      }
  6. Save the file.
  7. Add the file with the new background GIF image to the images directory in the theme. First, navigate to:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/
    themes/html/customized_theme/images

    Then, copy the new image to that directory.

  8. Exchange the pb-menu.gif with the new version of that image. First, navigate to:
    was_profile_root/installedApps/cellname/wps.ear/wps.war/images/icons

    Then, replace the old pb-menu.gif image with the new pb-menu.gif image.

  9. After you reload and recompile the theme, the button should have the new look. For example it could look like the one shown in figure 17.
    Figure 17. Revised Create user interface
    Revised Create user interface

There are two exceptions to the normal behavior to change a style.

Changing the Announcement title

The Announcement style (content-title) as shown in figure 18 is not accessible through the stylesheet JSPS.

Figure 18. Styles used in an announcement
Styles used in an announcement

Because the style of the title of an Announcement item, a Contact item, or a Project Task item in the List - Main Page is defined inside the Teamspace portlet,you need to add your change directly to the specific Workplace Web Content Management component. Figure 19 shows the Announcement title before you change it.

Figure 19. Announcement title before change
Announcement title before change

Go to the Lotus Quickr home page. Choose Site Administration - Manage Content. In the Components tree, click Edit for each of the following:

  • List - Announcements Menu
  • List - Contacts Menu
  • List - Project Task Menu

For each, go to Chapter Design for each menu search result, and add style="color: #enter_your_value_here" after class="teamspaceList" as shown in figure 20.

Figure 20. Highlighted text to add to Workplace Web Content Management component
Highlighted text to add to Workplace Web Content Management component

The result should look like figure 21.

Figure 21. Announcement title after change
Announcement title after change

Changing the pagination value of a list

Whenever a list is displayed (in the Library application or in Announcements, for example), the user can determine how many links to display, as shown in figure 22.

Figure 22. Pagination value display
Pagination value display

To change the color of the links at the bottom, you need to change wpsLink, which is located in the styles_theme.jspf file. Because the value of this class is derived from the currently used color scheme, you must change the values for bodyAnchor* in:

\#wp_profile#\installedApps\porta\wps.ear\wps.war\themes\html\
#Theme Directory#\colors\default.properties

At the beginning of the file, find the highlighted area as shown in figure 23.

Figure 23. Change this wpslink text
Change this wpslink text

Exchange the values with those for your new color. In our example, the color is #295500 as shown in figure 24.

Figure 24. New text for wpslink
New text for wpslink

Save the default.properties file and touch the styles.jsp to recompile it. To touch a file means to change the last edit time to the current time, so the server knows that it has to recompile that file.

The result of your changes should look like the image shown in figure 25.

Figure 25. Numbering after change
Numbering after change

Other information related to Workplace Web Content Management

In the following sections, you find descriptions of standard tasks or enhancements you might want to add to the pages you create.

JSPs used in Workplace Web Content Management components

JavaServer Pages (JSPs) are always used when you need a special functionality to display specific content. You can find the JSPs used in Workplace Web Content Management components in:

\#PortalRoot#\installedApps\WCM_Teamspace_Portlet_######.ear\
######.war\teamspace\jsp\html

Be sure to replace ###### with your specific deployment code.

In case you need to add code to a specific JSP file, we recommend that you create a new JSP file by copying the old one and placing it in a different subdirectory. For example, place it in:

\#PortalRoot#\installedApps\WCM_Teamspace_Portlet_######.ear\
######.war\teamspace\jsp\html\customized

Next, create a new JSP component and reference that component inside the presentation template. You should then copy that subdirectory to an area outside the portlet as a backup.

Additionally, you should add a comment that reminds you of the change that you made, for example, inside the Presentation template or the JSP component. You must add a comment because when a fix pack is applied, you cannot be certain that the customized files will not be deleted. For example, you could add a comment like this one:

"The List - Project Task Priority Image component uses the list_
project_task_priority_icon.jsp. This JSP renders the priority image of the project."

Adding a Back link

To add a button to point back to the main screen of the application, add the code shown in listing 3.

Listing 3. Adding a Back button
<a class="nav-link" href="<URLCmpnt context="current" type="site" 
mode="storable"/>" title="< Back to <IDCmpnt context="current" 
type="sitearea" field="title"/>">< Back to <IDCmpnt context="current" 
type="sitearea" field="title"/></a>

This Back button is always used when a return from a details page to the main section is needed. For example, it is used in the Blog – Manage or Blog – Entry pages.

Enabling people awareness inside Workplace Web Content Management content

With people awareness enabled to the name of a user, an awareness icon is added. This icon is green when users are online and gray when they are not. To enable Peopleawareness for names, add the following attribute to the IDCmpnt tag:

<IDCmpnt context="current" type="content" field="authors" awareness="true"
start="<li><label for=’contentAuthor’>Author:</label> <span
id=’contentAuthor’>" end="</li>"/>

This feature is used in the Wiki – Area page.

National Language Support

This section describes how National Language Support (NLS) is implemented in Workplace Web Content Management and in Lotus Quickr components using Workplace Web Content Management. The string @nls@ represents an NLS-aware string for Workplace Web Content Management. When rendering through the rendering portlet, Workplace Web Content Management replaces that key string with values from a Workplace Web Content Management properties file. These keys are not replaced with their values when viewing the Web content artifacts through the Workplace Web Content Management administrative or authoring portlets. This view allows a site designer to see which keys are being used and to substitute new keys.

To add National Language Support in a Workplace Web Content Management component, do the following:

  1. Create the properties file and its NLS variants:
    myNLS.properties
    myNLSproperties_en.properties

    In the file add this:

    mystring=My string
    my2string=My 2. string
  2. The resource files must be on the classpath for the Workplace Web Content Management teamspace portlet. For example, place those files in #Portalroot#\wcm\shared\app.
  3. Add a reference to the NLS string in the Workplace Web Content Management component:
    @nls:myNLS@mystring@ through the authoring portlets

In case you need to change a string or add something to a resource bundle, restart the server for the new material to take effect.


Adding an Atom feed to the current content

To add an ATOM feed link to access the current content, add the following code shown in listing 4 to the specific component where you want the link to display.

Listing 4. Adding an Atom feed
<link rel="alternate" type="application/rss+xml" title="Subscribe to this" 
href="<URLCmpnt context="current" type="content" mode="atom"/>">
<ul class="link-list"><li><a class="menu-link" href="<URLCmpnt 
context="current" type="content" mode="atom"/>" title="Subscribe to this" 
target="" border="0"><Component name="shared resources/feed-icon"/><span>
Subscribe to this</span></a></li>

This link can be found in the About box components. For example the Blog entry – About box contains the feed link.


Customizing a Workplace Web Content Management composite application by adding a new page

Before you add a new page you should ask yourself these questions:

  • Do you need to present new content?
  • Do you need to create a new content item?

If you decide to create a new page, follow these steps:

  1. Define the elements that make up your content. Then create an authoring template where you can enter the content. Learn more about creating an authoring template. With this authoring template, a content object can be created.
  2. Next, add a presentation template to display this information.
  3. After you initially created the presentation template in which you want to display the content, decide which Workplace Web Content Management component that you want to use inside the template. You have three options: JSP, Menu, and HTML. If you have static content, use the HTML component. If you want to display a list of content items, use the Menu component. If you need the most flexibility, use the JSP component.
  4. Enable integration to the already existing site structure by adding a button or a link to another page that points to the new page.

What follows is an example of how to add a page to the Blog composite application. This new page displays the log entries of the current user, and it should be accessed from the Blog main page. To accomplish this example, use a personalization component that selects the specific Blog entries. It has National Language Support features.

Add the resource bundles for National Language Support by doing the following:

  1. Create a file called myblogs.properties in the folder #PortalserverRoot#\wcm\shared\app.
  2. Add a name/value pair for each text string to be nationalized. For the My Blogs enhancement, add the following to the file:
    myblogs.title=My Blog Entries
    myblogs.goto.page=Goto My Blog Entries
  3. Copy the file for all languages that should be supported by adding the language-dependent file name. For English, copy myblogs.properties to myblogs_en.properties. For German, copy myblogs.properties to myblogs_de.properties, and translate all the entries in the file.

The personalization rules currently do not support choosing a site area of the type current sitearea. A request parameter is used to filter out the necessary content items. To add the current site area to the request object, a JSP is called that adds the necessary information. Follow these steps:

  1. Create a directory called customized inside:
    #PortalserverRoot#\installedApps\WCM_Teamspace_Portlet_
    xxxxxxxxx.ear\xxxxxxxx.war\teamspace\jsp\html\customized
  2. Create a file called currentSite.jsp in the folder:
    #PortalserverRoot#\installedApps\WCM_Teamspace_Portlet_
    xxxxxxx.ear\xxxxxxx.war\teamspace\jsp\html\customized

    Because installations vary, you might need to exchange xxxxxxx for the deployment ID of your Lotus Quickr server. Search for the WCM_Teamspace_Portlet. This file should contain the code shown in listing 5.

Listing 5. Code of current Site.jsp
<%@ page import="com.ibm.portal.um.*,
com.ibm.workplace.wcm.api.*,
com.ibm.workplace.wcm.api.exceptions.*" %>

<%--  Initialize the WCM workspace with the current users context--%>
<wcm:initworkspace user="<%= 
(java.security.Principal)request.getUserPrincipal() %>" >
</wcm:initworkspace>
<%
try
{
   RenderingContext renderingContext = 
   (RenderingContext)request.getAttribute("wcmRenderingContext");
  
   if (renderingContext != null)
   {
   /* Retrieve the Object ID of the current site */
	   String docLibID = renderingContext.getSite().getOwnerLibrary().getId();
	   /* Add the Object ID to the request */
	   request.setAttribute("library", "uuid:"+docLibID);
	   
   }
	   else
		System.err.println("The renderingContext could not be initialized. 
		Therefore the Object ID o fthe current site could not be evaluated.");
}
catch (Exception e)
{
   e.printStackTrace();
}
%>

Next, add a JSP component to the shared library in Workplace Web Content Management by doing the following:

  1. Click Site Administration.
  2. Click Manage Content.
  3. Select New - Component - JSP.
  4. In the Name field, enter blog_current_site. In the Display title field, enter Blog - Current Site JSP.
  5. Enter the path to the JSP in the Path field as /teamspace/jsp/html/customized/currentSite.jsp.
  6. Click Save, and then click Close.

Next, add the personalization rule component by following these steps:

  1. Select the Web Content tab.
  2. Select New - Component - Personalization.
  3. In the Name field, enter blog_myblogs_perso_comp; in the Display title field, enter "Blog - MyBlogs Personalization component."
  4. Scroll to the Personalization Element section. Click New as shown in figure 26.
    Figure 26. Adding a new Personalization element
    Adding a new Personalization element
  5. Enter a description for the rule: Select the entries the current has created in the current blog.
  6. In the Select field, click content* and then select Web Content from the list that displays.
  7. Select value in the Site Area condition, and then select Request and Manage Properties in the options that display.
  8. Select Add Dynamic Property.
  9. In the "Enter a name for the dynamic" field, enter the name library. Leave the default type as Text, and enter library as the name in the rule as shown in figure 27. Click Save.
    Figure 27. Values to enter in the Dynamic Property
    Values to enter in the Dynamic Property
  10. Click Done.
  11. In the Site Area condition, select value and then select Request and library in the options that display.
  12. Select attribute, and then select Author from the list that displays.
  13. Click the >’ after value*, and then select Portal Users and Distinguished Name from the options that display.
  14. Select add Condition, and then select Authoring Template from the list that displays.
  15. Select value*, and then then select Select WCM Template from the list that displays.
  16. Select Blog - Entry, and then click OK as shown in figure 28.
    Figure 28. Choose Blog Entry as the filter parameter
    Choose Blog Entry as the filter parameter
  17. Click Save.
  18. In the Results per page field, enter 5.

After creating the new page, you need to create how it is displayed. You need to complete the section's header, design, footer, and separator. Because a list of Blog entries already exists, you can copy this material. Follow these steps:

  1. Click the Web Content tab without closing the personalization component.
  2. Select Components, and then select Blog - Entry View.
  3. Copy the content of the Blog - Entry View Header section to the Personalization Component Header section as shown in figure 29.
    Figure 29. Text to copy to the Header section
    Text to copy to the Header section
  4. Do the same for the design, footer, and separator sections.
  5. Expand Access, and select Grant User Access.
  6. Select Search.
  7. Select the "[all authenticated portal users]" option, and then click OK.
  8. Expand the Save button, and then select the Save and close option.
  9. Click the X to close the Blog - Entry View tab as shown in figure 30.
    Figure 30. Close the Blog - Entry View
    Close the Blog - Entry View

Now you need to create or edit the components responsible for displaying the action option in the Blog - Main and the Blog - My Blogs page.

Edit the Blog - Main page actions so that users can click on a link to transfer to the My Blogs page. Follow these steps:

  1. If you are not already working in the Web Content area, select the Web Content tab.
  2. Select Components.
  3. Select the Blog - Manage Blog Action option.
  4. Click Edit.
  5. The Blog – Manage Blog Action component is an Authoring Tool component whose functionality depends on the user's rights. Here the Edit access right is used; only a user with Edit access can have Blog entries for which they are the author. Scroll to Edit action design and enter the code shown in listing 6.
    Listing 6. Code to add a new button to the action list
    <div class="action-section">
    <div><a href="<Element context="current" type="site" 
    key="myblogs_page" format="url" start=" " end=" "/>" 
    title="@nls:myblogs@myblogs.goto.page@" 
    target="">@nls:myblogs@myblogs.goto.page@</a></div>
    </div>
  6. Click Save, but do not close the file.

Next, you create the My Blogs Page actions:

  1. In the Blog - Manage Blog Action component, expand the Save option and select Save as.
  2. In the New name field, enter blog_myblog_action. In the New display title field, enter Blog - My Blog Action. Click OK.
  3. Delete the content of the Read action design as shown in figure 31.
    Figure 31. Empty Read Action Design
    Empty Read Action Design
  4. In the Delete action design section, delete the highlighted content as shown in figure 32.
    Figure 32. New content for Delete action design
    New content for Delete action design
  5. Select Save and close.

Next, you need to add the page where the content of My Blog entries is to be displayed. Create the content, an authoring template, and a presentation template. Because you don’t actually add content, the authoring template is needed only so that you can create a content object. This authoring template should therefore be the most basic template that you can find. Lotus Quickr includes an authoring template Welcome that can be used as a base for your My Blog Entries authoring template.

Your first step is to create an authoring template for this page:

  1. If you are not already working in the Web Content area, select the Web Content tab.
  2. Select the Authoring Templates option.
  3. Click > to access the second page of templates.
  4. Use the Welcome authoring template as the base for the authoring template for My Blog Entries. It is a placeholder piece of content that you create to trigger a presentation; the authoring template itself does not have much purpose other than to allow you to define a type of page and put that page into the content hierarchy. Select the Welcome option.
  5. Click Edit.
  6. Expand the Save option, and select Save as.
  7. In the New name field, enter myblogs_page_authoring. In the New display title field, enter Blog - Myblogs Authoring. Click OK.
  8. Expand the Save option, and select Save and close.

Your next step is to create the presentation template. Unlike the authoring template, you need to add the display of the blog entries; a dummy presentation template is not sufficient. Fortunately, the Blog - Main page displays content very similar to the content for the My Blog entries page. You can use the Blog – Main page as a basis for the new presentation template. Follow these steps:

  1. Select Presentation Templates.
  2. Select the Blog - Main option.
  3. Click Edit.
  4. Expand the Save option, and select Save as.
  5. In the New name field, enter blog_myblogs; in the New displaytitle field, enter Blog - My blogs. Click OK.

Change the appearance of the My Blogs presentation template by following these steps:

  1. Select Presentation Template.
  2. Add the blog_current_site JSP component to the page. See figure 33. Add the following line to the beginning of the file:
    <Component name=”shared resources/blog_current_site”/>
    Figure 33. Adding the blog_current_site JSP component
    Adding the blog_current_site JSP component
  3. Change the title of the page from
    <IDCmpnt context="current" type="sitearea" field="title"/>
    to
    @nls:myblogs@myblogs.title@

    You can do this by editing the highlighted text as shown in figure 34 and changing this code to the highlighted text in figure 35.

    Figure 34. Title of the page before change
    Title of the page before change
    Figure 35. Title of the page after change
    Title of the page after change
  4. Next, add a Back button to the Blog - Main page. To do this step, remove this code:
    <div class="information"><IDCmpnt content="current"
    type="sitearea" field="description"/></div>

    as shown in figure 36.
    Figure 36. Code to remove
    Code to remove

    Enter the code shown in listing 7 in its place.

    Listing 7. Code to add for back button
    <a class="nav-link" href="<URLCmpnt context="current" 
    type="site" mode="storable"/>" title="< Back to <IDCmpnt context="current" 
    type="sitearea" field="title"/>">< Back to <IDCmpnt context="current" 
    type="sitearea" field="title"/></a>
  5. In this code:
    <element context="current" type="site" key="blog_entry_view"/>

    replace blog_entry_view with blog_myblogs_perso.

  6. In this code:
    <component id="083d458043079501a13fe7e002b091
    cc:NC9zaGFyZWQgcmV2b3VyY2VzL2Jsb2dfbWFuYWsIX2FjdGIvbg**"
    name="shared resources/blog_manage_action"/>

    replace blog_manage_action with blog_myblogs_action.

  7. Expand the Save option, and select Save and close.

Your next step is to create a dummy content. With this dummy content, you can use the presentation template to display the My Blog entries. Follow these steps:

  1. Choose New - Content.
  2. Select the Blog - Myblogs Authoring option, and then click OK.
  3. In the Name field, enter myblogs_page. In the Display title field, enter Blog - My Blogs Page.
  4. Expand the Save option, and select Save and close.
  5. Expand Blog, and then select Team Blog.
  6. Click OK.

You need to edit the site area document to add the template mapping and other elements. The template mapping is used to define a relationship between content, authoring templates, and presentation templates. Follow these steps:

  1. Expand Site Areas. Select By Site, and then select Blog on the right side of the menu.
  2. Click Edit.
  3. Click the Edit Template Mapping button.
  4. Click the Add button.
  5. Select the Blog - Myblogs Authoring and Blog - My Blogs options. Click OK.

You can use one of two options to add specific components to a page. With the first option, you can add that component directly using the Component tag; this detail means that the component is statically referenced.

You should choose the second option, though. In this case, you define a placeholder or an element in the page, and you reference that placeholder through the presentation template and define its value in the Site Area document. In this example, it is possible to have different personalization components available when creating a new blog.

Follow these steps to add a component:

  1. Click the Manage Elements button.
  2. Leave the selection in the Element type box as Component Reference.
  3. In the Name field, enter blog_myblogs_perso; in the Display title field, enter My Blogs Personalization Component. Click the Add button.
  4. Change the selection in the Element type list to Link.
  5. The page that displays the My Blog Entries should not be referenced statically. In the Name field, enter myblogs_page; in the Display title field, enter My Blogs page. Click the Add button.
  6. Click OK.
  7. Click the Select Component button in the My Blogs Personalization Component.
  8. Select the Personalization component from the list that displays.
  9. Select Blog - Myblogs Personalization Component, and then click OK.
  10. Click the Browse Content button in the My Blogs page section.
  11. Expand By Site Area. Expand Blog and click Team Blog. Select Blog - My Blogs page on the right side. Click OK.
  12. Expand the Save option, and select Save and close.

To test your changes, be sure you do the following:

  • Restart the server if you have made changes to the resource bundle.
  • In the Home view of Lotus Quickr, click the Create a Place link.

Next, choose the Teamblog as Template. Enter name of your place, and then click the Create button.

You can now test your changes.


Conclusion

In this article, you saw how to customize the Blog Component in Lotus Quickr. You created a new content object and its authoring and presentation templates. You created the interaction between the existing pages and the new one, and you used a personalization rule to display content. You also saw how to add NLS strings to a customized page or customized page actions.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into IBM collaboration and social software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus
ArticleID=295656
ArticleTitle=Customizing components in IBM Lotus Quickr services for IBM WebSphere Portal 8.0
publish-date=03192008