Working with components in IBM Lotus Quickr, part 1: Creating a news component

This article provides end-to-end steps that explain how to create a new component (news list) in IBM® Lotus® Quickr™ Services for WebSphere® Portal 8.1. This news component supports basic features for a news item: title, summary, body, and type (normal and important news).

Amit Pareek, System Software Engineer, IBM

Amit Pareek is a System Software Engineer with the Services team of IBM India software labs. He specializes in J2EE and Content Management solutions and has been working on IBM Lotus Quickr customizations. He interacts with the Lotus Quickr development teams and works with the architects to customize the product. You can reach Amit at ampareek@in.ibm.com.



Yogesh Karekar, IT Specialist, IBM

Yogesh Karekar is an IT Specialist with IBM India software labs. He has extensive experience in working on multiple portal and content management products. He is currently working for the Lab Services division within the software lab. He specializes in IBM Websphere Portal, IBM Lotus Web Content Management, and IBM Lotus Quickr and participates in various customer-facing engagements. You can reach Yogesh at ykarekar@in.ibm.com.



29 June 2009 (First published 10 February 2009)

Also available in Chinese Russian

Editor's note: Know a lot about this topic? Want to share your expertise? Participate in the IBM Lotus software wiki program today.

Introduction

You should have a good understanding of Lotus Quickr Services for WebSphere Portal 8.1 (subsequently called Lotus Quickr in this article), IBM Lotus Web Content Management, and Java™ programming using JavaServer Pages (JSP) to follow this article.

Lotus Quickr provides a set of list components that are used to display sets of structured content such as project tasks, announcements, and contacts. Users can use any of these predefined list components to store information relating to a team or project in a teamplace.

This article shows you how to create a new type of list component, news list, in Lotus Quickr. This news component supports the typical features of a news item: title, summary, body, and type (normal and important news).

This article covers the details of the steps that you follow to create the news component.

The news component in this article has been implemented using the Lotus Web Content Management application in Lotus Quickr.


Overview

Figure 1 shows a high-level view of the architecture of the news component.

Figure 1. Architecture of the news component
Architecture of the news component

The news component has the following characteristics:

  • The news component is a Lotus Web Content Management component.
  • All the content created by the news component is stored in the News site area under the respective teamplace library.
  • It uses an authoring template called List – News to create content.
  • A menu component called List – News Menu is used to fetch content of type News from the appropriate site area.
  • A JSP component called List – News Icon is used to display the type of news (important or normal). Using the Lotus Web Content Management API, this JSP displays the appropriate icon based on the type of news.
  • An image component called List – News Image is used to display the news image (icon) on the presentation template.
  • The news component uses two presentation templates, List – Main News, shown in figure 2, and List - News Item, shown in figure 3.
    • List – Main News is used to render the menu component List – News Menu.
    • List - News Item is used to display the details of the individual news item.
  • The front-end portlet is configured to use the newly created Lotus Web Content Management artifacts.
  • After you create the Lotus Web Content Management artifacts and configure them with the portlet, the newly created news component is added to customize the section.
Figure 2. List - Main News presentation template
List - Main News presentation template

By clicking any news item, users can see the details of the news item.

Figure 3. List- News item presentation template
List- News item presentation template

Users can add and delete news items by using the link provided on the right side of the window. See figure 4.

Figure 4. Links for adding and deleting news items
Links for adding and deleting news items

Create the news component

The following sections describe the detailed steps for creating the news component. Follow these steps:

  1. Log into Lotus Quickr as an administrator as a member of group wpsadmins.
  2. Click the Site Administration link in the left pane.
  3. Click the Manage Content tab at the top of this page to display the Web Content Authoring portlet.

NOTE: Create a new library for storing all new artifacts created for any Lotus Quickr customization. The Shared Resources library is part of the artifacts that ship with Lotus Quickr, and this library is subject to change due to fixes or patches.


Create a site for the news component

The first step in creating a new Lotus Quickr component is to create the site and site-area framework that is used to associate the authoring template and the presentation templates. The steps that follow describe the creation of the site for the news component.

  1. Click the Web Content tab and select New - Site.
  2. Enter "news" in the Name field and "News" in the Display title field.
  3. Click Save.
  4. On the Web Content page, select the Site Areas - By Site view. It displays the newly created News site and other site areas.

Create the new site area for the News site

Follow these steps to create the site area for storing the default content for the news component.

  1. Click the Web Content tab and select New - Site Area.
  2. Select site News, under which you need to create the new site area.
  3. Click OK.
  4. Enter "items" in the Name field and "Items" in the Display title field.
  5. Click Save.

Create the authoring template for the news component

This section describes the creation of the authoring template for the news component. This authoring template acts as a blueprint for all the news items created in the system.

  1. On the Web Content page, select the library called Shared Resources and select the Authoring Templates view. It displays a list of existing authoring templates.
  2. Select the authoring template named List - Announcement from the list and open it in Edit mode by clicking the Edit action at the top of the list.
  3. In the Edit mode, select the Save - Save as action at the top.
  4. Change the value of the Name field to "list_news" and the value of the Display title field to "List - News."
  5. Click OK to create the new authoring template.
  6. Select the following options in the Actions to Hide section, which displays in the Edit mode of the authoring template:
    • Save
    • Save as
    • Save and read
    • Save and version
    • Preview
    • Apply authoring template
  7. Change the options in the Toolbar visibility options section as follows:
    • Select the Hide top toolbar option.
    • Select the Reverse the toolbar button order option.
  8. In the Versioning Strategy section, select Do not offer a manual version option, and do not version automatically.
  9. Add the following Access settings to the authoring template. This selection adds all inherited access to this authoring template. See figure 5.
    • Check Inheritance for role User
    • Check Inheritance for role Contributor
    • Check Inheritance for role Editor
    • Check Inheritance for role Manager
    Figure 5. Access settings for new authoring template
    Access settings for new authoring template
  10. Click Save.

Configure the default content settings for the authoring template

Follow these steps to configure default content settings for the authoring template:

  1. Click the Default Content Setting link at the top of List-News page, below the action buttons.
  2. Click Manage Elements.
  3. Add the elements shown in table 1 to the News authoring template.
Table 1. List of managed elements
Element typeName Display title
Rich TextSecond cell in first rowSummary
Rich TextBodyNews Body
Option SelectionType News Type

NOTE: Do not change the names of these elements.

Figure 6 shows the Element Manager window, which is displayed when you click the Manage Elements action at the top of the List - News page. This window lets administrators manage (that is, add, modify, or delete) the elements of the authoring template.

Figure 6. Element Manager form for the authoring template List - News
Element Manager form for the authoring template List - News
  1. Click OK.
  2. Return to the Default Content Settings view by clicking the corresponding action at the top of the List-News page.
  3. In the Identification section, click the Properties icon properties icon, next to the Name field, and select the following options as shown in figure 7:
    • Hide field.
    • Generate name. The field is not editable when visible.

    The Name field is generated automatically because Lotus Web Content Management requires all content under a particular site area to have a unique name. Because you cannot rely on users to enter a unique name every time, use this option so that Lotus Web Content Management can use the uuid of the content as its name. That way, the name is guaranteed to be unique.

    Figure 7. Properties of the Name field
    Properties of the Name field
  4. Click Done.
  5. In the Identification section, click the Properties icon properties icon, next to the Display title field, and select the Identify this as a required field option.
  6. Enter "News Title" in the Field label field.
  7. Click Done.
  8. In the Identification section, click the Properties icon properties icon, next to the Description field, and select the following options:
    • Hide field.
    • Generate the description. The field is not editable when visible.
  9. Click Done.
  10. In each of the following fields under Identification, select the Hide field option and then click OK.
    • Type
    • Library
    • Authors
    • Owners
  11. Click Done.
  12. Click the Expand icon expand icon next to the Profile section to open the section.
  13. In the Profile section, select the Hide field option.
  14. Click the Expand icon expand icon next to Content Properties section to open the section.
  15. In the Content Properties section, select the Hide field option.

Configure the elements and the default access of the authoring template

Follow these steps to configure the elements and default access of the authoring template:

  1. Click the Expand icon expand icon next to the Content section shown in figure 8 to open the section.
  2. In the Content section, click the Properties icon properties icon, which is next to Summary field. Change the value of Field height to 150, and then click Done.
    Figure 8. Content section listing authoring template elements
    Content section listing authoring template elements
  3. In the Content section, click the Properties icon properties icon, next to the News Body field.
  4. Change the value of Field height to 350. Select the option Identify this as a required field.
  5. Click Done to persist the changes.
  6. In the Content section, click the Properties icon properties icon, next to the News Type field.
  7. Enter the following text in the Type the choices window:
    @nls:custom_news.nls.CustomNews@News.Normal@
    @nls:custom_news.nls.CustomNews@News.Important@

    NOTE: The text with the at sign (@) symbol is used for translation. Refer to the developerWorks® article, "Customizing components in IBM Lotus Quickr services for IBM WebSphere Portal 8.0," to learn more about globalization in Lotus Quickr.

  8. Select the Radio Button option in the User interface section.
  9. Click Done.
  10. Click the Expand icon expand icon next to the Access section to open the section.
  11. In the Access section, select the Hide field option, and then click OK.
  12. Click Save.

Create a menu component to display a list of the news items

This menu component is used to display a list of the news component to the user on the component’s main page. Follow these steps to create the menu component:

  1. Click the Web Content tab and select New - Component - Menu to open a blank form to create a new menu component.
  2. Enter "list_news_menu" in the Name field and "List – News Menu" in the Display title field.
  3. In the Menu Element Query section, select the following options:
    • Authoring Templates
    • Site Areas
  4. Select List – News as the authoring template.
  5. Click Further options for the site areas.
  6. In the Site Areas section, select the following options:
    • Include ancestors
    • Include descendents
    • Current content options
  7. In the Menu design properties section shown in figure 9, make the following changes:
    • Change the selection for the Specify results display order field to Descending.
    • Select Creation Date as the option in all three fields under "sort results first by."
    • Change the value of the Maximum pages to include field to 10000.
    • Change the value of the Pages to read ahead by field to 200.
    Figure 9. Menu component design properties
    Menu component design properties
  8. Enter the HTML code shown in listing 1 in the Header field:
Listing 1. Design for each menu search result
<Component name="shared resources/generic_table_header"/>

<table class="portlet-table" cellspacing="4" cellpadding="0">
  1. Enter the HTML code shown in listing 2 in the Design for each menu search result field.
Listing 2. Design for each menu search result
<tr>
<td width="25px">
<Component name="shared resources/list_news_icon" compute="always"/>
</td>
<td style="width:100%;white-space: normal;">
<span class="content-title">
<a href='<Placeholder tag="href"/>' class="teamspaceList"><
Placeholder tag="title"/></a>  
<br/>
<Element context="autoFill" type="content" key="body"/>
</span>
</td>
</tr>
  1. Enter the HTML code in listing 3 in the Footer field.
Listing 3. Design for each menu search result
<Component name="shared resources/generic_table_footer"/>
  1. Enter the HTML code shown in listing 4 in the No result design field.
Listing 4. No result design
<Component name="shared resources/generic_table_header"/>
<table class="portlet-table" cellspacing="0" cellpadding="0">
<tr class="row-blank" >
<td>
@nls@list.empty@
</td>
</tr>
<Component name="shared resources/generic_table_footer"/>
  1. Modify the Access section as shown in figure 10. This modification adds all inherited access to this component.
    • Select Inheritance for role User
    • Select Inheritance for role Contributor
    • Select Inheritance for role Editor
    • Select Inheritance for role Manager
    Figure 10. Access settings for menu component
    Access settings for menu component
  2. Click Save.

Create a JSP component named List - News Icon

The List – News Icon JSP component is used to display an icon showing the type of the news item. The JSP reads the type attribute and displays the appropriate icon. Follow these steps to create the JSP component:

  1. Click the Web Content tab, and select New - Component - JSP.
  2. Enter "list_news_icon" in the Name field and "List – News Icon" in the Display title field.
  3. Enter /teamspace/jsp/html/list_news_icon.jsp as the JSP path in the Path field.

    NOTE: Create and save the JSP file list_news_icon.jsp in the <.quickr_server_root>/PortalServer/installedApps /WCM_Teamspace_Portlet_<id>.ear/<id>.war/teamspace/jsp/html directory. The sample code in the JSP file is shown in listing 5.

Listing 5. Code for list_news_icon.jsp
<%@ page buffer="none" %>
<%@ page session="true" contentType="text/html" import="java.util.*,
          javax.naming.*,
          com.ibm.workplace.wcm.api.exceptions.*,
          com.ibm.workplace.wcm.api.*,
          javax.naming.Reference,
         org.apache.jetspeed.portlet.PortletURI"
%><%@
taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI"
%><portletAPI:init/><%@
taglib uri="/WEB-INF/tld/portal.tld" prefix="wps"
%><wps:constants/><%@
taglib uri="/WEB-INF/tld/wcm.tld" prefix="wcm"
%><wcm:initworkspace user="<%= 
(java.security.Principal)portletRequest.getUser() %>"
/><%!
	static final String IMAGE_NORMAL_SRC = "normal.gif";
	static final String IMAGE_IMPORTANT_SRC = "important.gif";

	static final String IMAGE_NORMAL_LABEL = 
	"@nls:custom_news.nls.CustomNews@News.Normal@";
	static final String IMAGE_IMPORTANT_LABEL = 
	"@nls:custom_news.nls.CustomNews@News.Important@";

	static final String NEWS_TYPE_NAME = "type";	
%><%
// If rendering as part of a JSP Cmpnt, get the rendering context for the cmpn, 
this context is menu aware
RenderingContext renderingContext = (RenderingContext)request.
getAttribute( Workspace.WCM_RENDERINGCONTEXT_KEY );

// If we still don't have a rendering contxt then we will produce nothing.
if ( renderingContext != null )
{ 
   // Ensure we only attempt to access items with User access
   wcmWorkspace.useLiveAccess(true);

	Content content = null;
	DocumentId docId = renderingContext.getCurrentResultId();

   if ( docId != null && docId.isOfType( DocumentTypes.Content ) )
   {
		content = (Content)wcmWorkspace.getById( docId );
   }
   if ( content == null )
   {
      content = renderingContext.getContent();
   }

	OptionSelectionComponent option = (OptionSelectionComponent)content.
	getComponent( NEWS_TYPE_NAME );
	if (option != null )
	{
	   // We will default to ta regular icon/selection.
	   boolean specialSelected  = false;
	   String[] selections = option.getSelections();

	   if ( selections != null && selections.length > 0 )
	   {
	      // Should only be a single slection, but well check them all
	      for ( int i=0; i<selections.length; i++ )
	      { System.out.println("selections[i] : "+selections[i]);
	         if ( selections[i].equalsIgnoreCase(IMAGE_IMPORTANT_LABEL) || 
	         selections[i].equalsIgnoreCase("important") )
            {
					specialSelected = true;
            }
	      }
	   }

      String altText = specialSelected ? IMAGE_IMPORTANT_LABEL : IMAGE_NORMAL_LABEL;
      String imgSrc = specialSelected ? IMAGE_IMPORTANT_SRC : IMAGE_NORMAL_SRC;

%><img src="<portletAPI:encodeURI path=''/>images/teamspace/<
%= imgSrc %>" alt="<%= altText %>" title="<%= altText %>" /><%
	}
}
%>
  1. Modify the Access section to give inherited access to the Editor and Manager roles as shown in figure 11. This modification adds all inherited access to this component.
    • Select Inheritance for role User
    • Select Inheritance for role Contributor
    • Select Inheritance for role Editor
    • Select Inheritance for role Manager
    Figure 11. Access settings for JSP component
    Access settings for JSP component
  2. Click Save.

Create an image component named List - News Image

This image component is used to display the news image (icon) at the top of the news list component. Follow these steps to create the image component:

  1. Click the Web Content tab, and select New - Component - Image.
  2. Enter "list_news_image" in the Name field and "List – News Image" in the Display title field.
  3. Upload the image news_list_32x32.gif to the Image field in the Image Element section of the List News Image tab.

    NOTE: Use an appropriate image to represent your news component. For best results, use an image that is 32x32 pixels in dimensions.

  4. Modify the Access section as shown in figure 12. This modification adds all inherited access to this component.
    • Select Inheritance for role User
    • Select Inheritance for role Contributor
    • Select Inheritance for role Editor
    • Select Inheritance for role Manager
    Figure 12. Access settings of Image component
    Access settings of Image component
  5. Click Save.

Create the presentation template to display the list of news items

The presentation template is used to display the menu component that renders the list of the news items. The menu component is mapped to the site; from there it is referenced in this presentation template.

  1. Click the Web Content tab, and select New - Presentation Template.
  2. Enter "list_main_news" in the Name field and "List – Main News" in the Display title field.
  3. Enter the HTML shown in listing 6 in the Presentation Template field.
Listing 6. Presentation template for displaying list of news items
<table cellpadding="0" cellspacing="0" dir="@nls@dir@" 
class="ibm-portlet-section-body">
   <tr>
      <td class="ibm-portlet-section-left">
         <div class="ibm-portlet-section-header-small 
         ibm-portlet-section-header">
            <table cellpadding="0" cellspacing="0">
                <tr>  
                   <td class="header-icon"><Component 
                   name="shared resources/list_news_image"/></td> 
                   <td class="header-left"><h1>
<Element context="current" type="site" key="new_button"/></h1><div 
class="information"><IDCmpnt context="current" type="sitearea" 
field="description"/></div>
                  </td>
<td class="header-right" style="white-space: nowrap"  ><Component 
name="shared resources/list_home_tool"/></td>
</tr>
</table>
          </div>
         <div class="content-container">
            <Element context="current" type="site" key="menu"/>
         </div>
       </td>
   </tr>
</table>
<table>
</table>
  1. Add the Access settings shown in figure 13 to the presentation template. This modification adds all inherited access to this presentation template.
    • Select Inheritance for role User
    • Select Inheritance for role Contributor
    • Select Inheritance for role Editor
    • Select Inheritance for role Manager
    Figure 13. Access settings for Presentation template displaying list of news items
    Access settings for Presentation template displaying list of news items
  2. Click Save.

Create the List – News Item presentation template

This presentation template is used to present every news item and its details when a user clicks an item from the news list. Follow these steps:

  1. Click the Web Content tab, and select New - Presentation Template.
  2. Enter "list_news_item" in the Name field and "List - News Item" in the Display title field.
  3. Enter the HTML code shown in listing 7 in the Presentation Template field.
Listing 7. Presentation template for displaying details of the individual news item
<table cellpadding="0" cellspacing="0" dir="ltr" class="ibm-portlet-section-body">
   <tr>
      <td class="ibm-portlet-section-left">
         <div class="ibm-portlet-section-header-small ibm-portlet-section-header">
            <table cellpadding="0" cellspacing="0">
                <tr>    
                              
                   <td class="header-icon"><Component name=
                   "shared resources/list_news_image"/></td>

<td class="header-left"><h1><IDCmpnt context="current" 
type="content" field="title"/>
                     </h1><div class="information"><a class="nav-link" 
                     href="<URLCmpnt context="current" type="site" 
                     mode="storable"/>">< Back to <IDCmpnt 
                     context="current" type="sitearea" field="title"/></a>
                     &nbsp;<span class="commentHeaderTimestamp">|
                     </span>&nbsp;
                     <a href="/lotus/myquickr/latestnews" title="" target="">
                     @nls:custom_news.nls.CustomNews@
                     News.BacktoNews@</a></div>                                      
                   </td>
&nbsp;&nbsp;&nbsp; 
<td  class="header-right"  style="white-space: nowrap;border-left:1px 
solid #ECECEC"><Component name="shared resources/list_item_action_links"/>
                   </td>
                                  </tr>
             </table>
          </div>
<div class="content-container">
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td><b>@nls:custom_news.nls.CustomNews@
News.NewsSummary@</b></tr>
   <tr>
<td>
<Element context="current" type="content" key="Summary"/>
</td>
 </tr>
</table>
<tr><td><b>@nls:custom_news.nls.CustomNews@
News.NewsBody@</b></tr>
   <tr>
      <td>
<Element context="current" type="content" key="body"/>
       </td>
   </tr>
</table>
<br><br>
<table >
<tr><td><b>@nls:custom_news.nls.CustomNews@
News.Author@</b></td><td width="20%" align="left">
<IDCmpnt context="current" type="content" field="authors" awareness="true"/>
</td>&nbsp;&nbsp;
<td width="20%"><b>@nls:custom_news.nls.CustomNews@
News.PublishDate@</b></td>
 <td align="left" valign="bottom" ><WorkflowCmpnt context="current" 
 type="content" field="publishdate"/>
 </td>
   </tr>
</table>
</div>
<tr>
<div class="content-comments">
<Element context="current" type="site" key="comment_section"/>
</div>
</tr>
</table>
  1. Add the Access settings shown in figure 14 to the presentation template. This modification adds all inherited access to this presentation template.
    • Select Inheritance for role User
    • Select Inheritance for role Contributor
    • Select Inheritance for role Editor
    • Select Inheritance for role Manager
    Figure 14. Access settings of the presentation template displaying details of the individual news item
    Access settings of the presentation template displaying details of the individual news item
  2. Click Save.

Create a default content item

This item is of type List-Default, and it is used to store metadata for the news component.

Follow these steps:

  1. On the Web Content page, select library Shared Resources and then select the Content - By Site Area view. It displays a list of the existing sites.
  2. Browse to Announcement - Items, select the content item named Announcements, and click the More Actions - Copy action at the top of the list.
  3. In the following view, select the sitearea News - Items as the target site area that was created earlier in this article.
  4. On the Web Content page, select the library Shared Resources, and then select the Content - By Site Area view. It displays a list of the existing sites.
  5. Browse to News - Items, select the content item named Announcements from the list, and open it in Edit mode by clicking the Edit action at the top of the list.
  6. Change the Name field value to "news" and the value of the Display title field to "News."
  7. Click Save.

Edit the News site and add template mappings and a menu component

This step provides the mappings of authoring templates and presentation templates that need to be defined on the site. A custom element is also defined on the site to map the List – News Menu, menu component. Follow these steps to edit the site:

  1. Click the Web Content tab, and select the Site Area - By Site view.
  2. Open site News in Edit mode by clicking the Edit action at the top of the list.
  3. Click Manage Element.
  4. On the Element Manager page, add the elements listed in table 2 in the site News.
Table 2. Element Manager form for site News
Element type NameDisplay title
Component Referencecomment_sectionComment Section Reference
Component ReferenceMenuList View
Textnew_buttonnew_button

NOTE: Do not change the names of these elements.

  1. In the Site Properties section, select the content item /shared resources/news/items/news, which was created in the earlier section as default content.
  2. In the Site Properties section, click Edit Template Mapping Add the mappings of authoring template and presentation template as listed in table 3.
Table 3. Template mappings on site News
Authoring template Presentation template
List – News List – News Item
List – Default List – Main News
  1. In the Elements sections of the screen that displays, do the following:
    • Select the List – News Menu menu component as the value of the List View element.
    • Select the Document Posts - Show HTML component as the value of Comment Section Reference element.
    • Enter this text in the new_button section:
      @nls:custom_news.nls.CustomNews@News.newAction@
  2. Add the Access settings shown in figure 15 to the presentation template. This modification adds all inherited access to this site.
    • Select Inheritance for role User
    • Select Inheritance for role Contributor
    • Select Inheritance for role Editor
    • Select Inheritance for role Manager
    Figure 15. Access settings for the site
    Access settings for the site
  3. Click Save.

Create a copy of the teamspace portlet application as a news portlet

After you create all the Lotus Web Content Management artifacts, you must use a portlet to expose the news component to users.

Follow these steps:

  1. In the Lotus Quickr page navigation, go to the Site Administration - Advanced Administrator page.
  2. In the Portlet Management - Portlets section, search for the Announcement portlet.
  3. Create a copy of the Announcement portlet by clicking the Copy portlet icon copy icon.
  4. Enter the portlet application name as "News List Application" and the portlet name as "News."
  5. Click the Configure portlet icon configure icon and change the parameters listed in table 4.
Table 4. Portlet parameters to be modified
Parameter name Parameter value
templateSiteshared resources/news
titleKey@nls:custom_news.nls.CustomNews@News.Title@
desciptionKey @nls:custom_news.nls.CustomNews@News.NewsSiteDescription@
AUTHORINGTEMPLATE_OVERRIDE<ID of the authoring template List News> see instructions below for retrieving the ID
WCM_CONTENT_CONTEXT /news/items/news
componentTypenews_list
  1. Get the ID of the authoring template; see the code in listing 8:
    • In the Lotus Web Content Management authoring portlet, open the authoring template List – News in edit mode. View the page source of this Web page in your browser.
    • Search for the HEX_IDENTITY_REFERENCE value field.
    • Use the ID in the value attribute (which in this case is e5e826804a3ff2ccb18abd6be9464753).
Listing 8. Getting the ID of the authoring template
<input type="hidden" value="e5e826804a3ff2ccb18abd6be9464753" 
name="PC_7_UBKEDVC21GEKB02P28TC6D14D1_HEX_IDENTITY_REFERENCE" 
id="HEX_IDENTITY_REFERENCE" class="te1" />
  1. Click OK.
  2. On the Advanced Administration page, select the Portal Settings - Custom Unique Names - Portlets section.
  3. Change the unique name for the News portlet to "wps.p.web.news."
  4. Click OK.

Add the news component on the Lotus Quickr Customize link

This section describes the steps you take to add a link to the news component in the customize section. This link enables privileged users to add the news component to any teamplace.

Follow these steps:

  1. Go to the directory <quickr_server_root>/ wp_profile/installedApps/<node>/wps.ear/wps.war/themes/html/QPG.
  2. Open the pageHeaderContent.jsp file and find the <div> tag with id= "customizePage2":
    <div id="customizePage2" style="display: none;">
  3. Add the HTML shown in listing 9 to this <div> tag.
Listing 9. HTML fragment to make the News component available on the Customize teamplace section of the theme
<ul>
<li>
<a href="#" onClick="javascript:showTeamSpaceAddComponentForm("<
%=MarkupUtil.htmlAttributeEscape(MarkupUtil.jsEscape("News"))%>", 
"<%=MarkupUtil.htmlAttributeEscape(MarkupUtil.jsEscape("News"))%>
", "<%= applicationID %>", "wps.p.web.news", true, 
nodesOnLevel, true, 'news')" class="picture">News</a>
</li>
</ul>
  1. Add the properties JAR file (news_properties.jar) to the directory <quickr_server_root>/PortalServer/wcm/shared/app.

    NOTE: You can find the news_properties.jar file in the Downloads section of this article.

  2. Restart the Lotus Quickr server.
  3. The new news component can now be added to a teamplace like any other component, such as Announcements or Project Tasks, by using the Customize section.

Conclusion

This article discussed how to create a new component (news component) in the portal version of Lotus Quickr 8.1. You used Lotus Web Content Management tools to create the artifacts for the news component. You then configured these Lotus Web Content Management artifacts to make the news component available in your Lotus Quickr teamplaces. You also used traanslated strings to internationalize your news component.


Download

DescriptionNameSize
Code samplenews_properties.jar2.14KB

Resources

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=368706
ArticleTitle=Working with components in IBM Lotus Quickr, part 1: Creating a news component
publish-date=06292009