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

Introduction

Lotus Quickr services for WebSphere® Portal 8.1 (henceforth called Lotus Quickr in this article) provides a list composite application that is used to display sets of structured content such as project tasks, announcements, and contacts. Users can utilize 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 personalized view of the announcement component in Lotus Quickr. Users are shown a personalized view of the announcement items based on the type (regular announcement or special announcement) of field. Users are shown regular announcements across all the teamplaces to which they belong. The personalized view in this article has been implemented using the Lotus Web Content Management application in Lotus Quickr.

Back to top

Create a personalized view of the announcement component

You should have good understanding of Lotus Quickr services for WebSphere Portal 8.1, IBM Lotus Web Content Management, JavaScript, and DHTML programming to follow this article.

Follow these detailed steps to create a personalized view of announcement component:

1. Log in to Lotus Quickr as an administrator (member of the 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; it is subject to change due to fixes or patches.

Back to top

Create a menu component for the personalized announcement

The first step in creating this personalized list (view) is to filter the Lotus Quickr content to fetch all announcement items. This menu component is used to do the same. The presentation section of this menu component is used to create a table using DHTML. This table is manipulated to filter announcement items based on the type element of the announcement component. Finally, JavaScript is used to manipulate the table and provide a paginated view.

1. In the Shared Resources library, select New - Component - Menu.
2. Enter personalize_list_announcement_menu in the Name field and Personalize List - Announcement Menu in the Display title field.
3. In the Menu Element Query section, select the Authoring Templates option.
4. Select List – Announcement as the authoring template.
5. In the Authoring Templates section, shown in figure 1, click Further options.
   
   • Select the User-specified rendering portlet configuration option.
   • Select the Replace selected authoring template with included authoring templates option.
   
   
   Figure 1. Menu Element Query section of the menu component
   
   
   
6. In the Menu design properties section, shown in figure 2, make the following changes:
   
   • Change the value of the first two drop-down boxes for the field Sort results first by to Publish Date.
   • Change the value of third drop-down box for the field Sort results first by to Last Modified Date.
   • Change the value of the field Results per pages to 100000.
   
   
   Figure 2. Menu design properties section of the menu component
   
   
   
7. Enter the HTML code shown in listing 1 to format the menu search results. Go to the header, and add the HTML code in the Heading section.

<style>
.content-title a{
   //font-size: 145%;
   font-size: 1.1667em;
   font-weight: bold;
   margin:0 0 0 0;
	color: #0063DC;
	text-decoration:none;
}

.heading b{
   color: #AB56F;
   text-decoration:none;
}
</style>
<style type="text/css">    
            .normal-page {
                color: black;
                font-weight: normal;
                text-decoration: underline;    
                cursor: pointer;    
            }
            .selected-page {
                color: black;
                font-weight: bold;
                font-size: 25;
            }
        </style>
<script type="text/javascript" 
src="/result/Pagination/jscript/pagination.js"></script>
<table  class="portlet-table"  cellspacing="4" cellpadding="0">
<tr><td width="70%" align="center"  >
<span class="heading">

</span></td>

<td  class="header-right" style="white-space: 
nowrap;border-left:=0px solid #ECECEC"  width=30%>

</td></tr>


</table>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<table id="results" border="0">
<tbody> 
<tr><th width='25px' align='left'>&nbsp;</th><th 
width='100%'  align='left'  
align='left'>&nbsp;</span></th></tr>

8. Enter the HTML code shown in listing 2 in the Design for each menu search result section.

<script>
var type = '<Element context="autoFill" type="content" key="type"/>';
var condition = '@nls@regular.title@';
var imageSrc = '/lotus/wcm/images/teamspace/normal.gif';
if(type=='@nls@special.title@' ) {
	imageSrc = '/lotus/wcm/images/teamspace/important.gif';
}
var displayText = "<tr><td width='25px'><img src='"+imageSrc+"' 
alt='"+type+"' title='"+type+"' /></td><td width='100%'  
align='left'><span class='content-title'><a href='<URLCmpnt 
context="autoFill" type="content" mode="storable"/>'   class='teamspaceList'  >
<Placeholder tag="title"/></a>
<br/></span></td></tr>";
if(type==condition ) 
{
document.write(displayText);
}
</script>

9. Enter the HTML code shown in listing 3 in the Footer section. This code in the Footer does the pagination for the filtered result.

</tbody>
</table>
<div id="pageNavPosition"></div>
</form>
 <script type="text/javascript">
        var pager = new Pagination(3, 'results'); 
        pager.initialize(); 
        pager.showNav('pager', 'pageNavPosition'); 
        pager.showSet(1);
</script>

10. Add the Access settings shown in figure 3 to the presentation template. This task 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 3. Access settings section of the menu component
    
    
    
11. Click Save to save the menu component.

Back to top

Add a portlet on the page

After you create the menu component, you need to use a Lotus Web Content Management content viewer portlet to expose this menu component to the user. Follow these steps to add a portlet:

1. In the Lotus Quickr page navigation, go to the Site Administration page.
2. Click the Advanced Administration tab at the top of this page.
3. Select Portal User Interface - Manage Pages.
4. In the Search field of the Manage Pages page enter "application root" and click Search as shown in figure 4.
   
   
   
   Figure 4. Manage Pages in Advance Administration page
   
   
   
5. In the search results, click the Application Root node to go its sublevel. See figure 5.
   
   
   
   Figure 5. Inside the Application Root node
   
   
   
6. The list that displays as shown in figure 6 is the list of teamplaces in your Lotus Quickr setup. Click the teamplace where you want to create this personalized view.
   
   
   
   Figure 6. List of teamplaces inside Application Root node
   
   
   
7. In the teamplace that you selected in the previous step, click New Page to create a new page and name it personalized Announcement.
8. Select the Inherit Parent Theme option in the Theme field.
9. Click the Edit Page Layout icon, shown in figure 7, to open the personalized Announcement page in Edit mode.
   
   
   
   Figure 7. Edit Page Layout icon
   
   
   
10. Click Add portlets button to add the Web Content Viewer portlet on the personalized Announcement page. See figure 8.
    
    
    
    Figure 8. Edit Page Layout view
    
    
    
11. Click Done to save the changes.
12. Go to the teamplace in which you added the portlet.
13. Click the personalize Announcement page.
14. Click the Click for options tab.
15. Click the Edit shared settings link.
16. In the Content section, do the following:
    
    • Select Component in the Content Type field.
    • Select the component /Shared Resources/Personalized List – Announcement Menu in the Component field.
    • Select the site /Shared Resources/Announcement for the Content field.
17. Enter Personalize Announcement in the Portlet Display Title field. See figure 9.
    
    
    
    Figure 9. Web Content Viewer portlet settings
    
    
    
18. Click OK to save the changes.

After you complete these steps, the portlet displays all the normal announcement items across the teamplace to which the user belongs.

NOTE: This approach queries data across multiple teamplaces and therefore could affect performance of the system. Display this view only when the user clicks a link, rather than displaying it directly on the first page in the teamplace.

Back to top

Deploy the pagination EAR file to WebSphere Application Server

The JavaScript file mentioned earlier needs to be added to the WebSphere Application Server to be made available to the Lotus Quickr server. Because all other EAR files that ship with Lotus Quickr are liable to change when the systems are patched or fixes are applied, you should create your own EAR application for deploying the JavaScript.

Follow these steps:

1. Log in to WebSphere Application Server administrator console.
2. Select Application - Enterprise Applications.
3. The page Preparing for the application installation displays. The user can install the newly created EAR file in this page. Click Next to continue.
4. A new window displays. In this window, do the following as shown in figure 10:
   
   • Select the Generate Default Bindings option.
   • Select the Override existing bindings option.
   • Select the Use default virtual host name for Web modules option.
   • Click Next to continue.
   
   
   Figure 10. Preparing for the application installation
   
   
   
5. The window shown in figure 11 displays. Do the following:
   
   • Don’t make any changes; keep the default settings.
   • Click Next to continue.
   
   
   Figure 11. Select installation options
   
   
   
6. The window for Step 2, Map modules to servers, displays as shown in figure 12. Do the following:
   
   • Select the second option, Websphere cell=<node_name>=,server=Websphere_Portal, in the Clusters and Servers section.
   • Click the check box under the Select column.
   • Click Apply.
   • Click Next to continue.
   
   
   Figure 12. Map modules to servers screen
   
   
   
7. The window for Step 3, Map virtual hosts for Web modules, displays as shown in figure 13. Keep the default values and click Next to continue.
   
   
   
   Figure 13. Map virtual hosts for Web modules page
   
   
   
8. The window for Step 4, Map security roles to users/groups, displays as shown in figure 14. Do the following:
   
   • Select the All authenticated? checkbox for All Role.
   • Click Next to continue.
   
   
   Figure 14. Map security roles to users/groups page
   
   
   
9. The summary page of the installation wizard displays as shown in figure 15.
   
   
   
   Figure 15. Summary page
   
   
   
10. Click Finish.
11. The installation summary page shown in figure 16 displays.
    
    
    
    Figure 16. Summary of installation page
    
    
    
12. Click Save to Master Configuration.
13. Click the Save button. This action takes you back to the Enterprise Application view.
14. Start the application that you installed in the previous step.

Back to top

The result

Figure 17 is the screen capture of the Personalize view of the Announcement for a user across the teamplace.

Back to top

Conclusion

This article discussed how to create a personalized view for the announcement component in IBM Lotus Quickr services for WebSphere Portal 8.1. You used the Lotus Web Content Management menu component to fetch a list of announcement items for the logged-in user. You then filtered these items based on the value of the type attribute using JavaScript and DHTML. You also used JavaScript to support pagination for this personalized view.

Back to top

Download

Information about download methods

Resources

• Participate in the discussion forum.
  
  
• Read the developerWorks® article, " End-to-End Web Content in WebSphere Portal using Web Content Management 6.0."
  
  
• Read the developerWorks article, " Working with components in IBM Lotus Quickr, part 1: Creating a news component."
  
  
• Read the developerWorks article, "Working with components in IBM Lotus Quickr 8.1, part 3: Exposing components as a custom Atom feed."
  
  
• Read the Lotus Quickr documentation, "IBM Lotus Quickr Developer's Guide."
  
  
• Refer to the Lotus Quickr product documentation.
  
  
• Refer to the Lotus Quickr product page.
  
  

About the authors

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Introduction
• Create a personalized view of the announcement component
• Create a menu component for the personalized announcement
• Add a portlet on the page
• Deploy the pagination EAR file to WebSphere Application Server
• The result
• Conclusion
• Download
• Resources
• About the authors
• Comments

Next steps from IBM

• Try: Lotus Quickr
• Demo: Lotus Quickr
• Briefing: Smarter collaboration with IBM Lotus solutions
• Buy: Lotus Quickr

My developerWorks community

Dig deeper into Lotus on developerWorks

Calling all developers

Download no charge Lotus Domino Designer

Special offers