Skip to main content

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

The first time you sign into developerWorks, a profile is created for you. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

  • Close [x]

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.

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

All information submitted is secure.

  • Close [x]

Adding social bookmarking tags to Lotus QuickPlace

Satwik Seshasai, QuickPlace development team, IBM
Satwik Seshasai joined the Lotus QuickPlace development team in September 2002, just in time to see version 3.0 ship to customers. He has worked on features in various parts of the product and has enjoyed learning how companies use the product through venues, such as Lotusphere and site visits. Outside of work, he spends his time canoeing, volunteering in local activities, and convincing his wife to watch more sports with him -- especially when teams from Philadelphia are playing!

Summary:  Implement social bookmarking tags in Lotus QuickPlace and let users classify their own content for easy retrieval of information. This article shows you a simple solution to enable users to add and to share tags with each other.

Date:  30 May 2006
Level:  Intermediate

Activity:  3337 views
Comments:  

Social bookmarking, or tagging, is fast becoming a common way to share relevant content with other users. Sites, such as IBM's research project DogEar and del.icio.us, offer a place for users to store their bookmarks to share with other users the sites that they find relevant, and sites, such as Amazon.com and Gmail, have embedded tagging so that users can tag content.

Tags commonly serve two distinct purposes: to act as a mechanism of socialization for users and to categorize content. For the first purpose, tags are usually kept in a central place along with the bookmarked URLs. Users accessing this central site can see information, such as which users have used which tags, and subscribe to certain lists of tagged content. This article focuses on the second use of tagging as a means for adding relevant metadata to content to enable more efficient navigation and retrieval of information.

The tags described in this article are descriptive keywords that users add to their QuickPlace content as metadata. These tags indicate which documents are most relevant to a specific topic. Although it is possible to use a central system that keeps tags in a separate database because they are applied to URLs of any Internet site, another option is to add the tags as metadata to the QuickPlace documents. This option is useful when such a central system is not yet deployed within a company's intranet; the tags are stored in a way that allows them to be easily accessed programmatically to be transferred if a system, such as DogEar, is used within the enterprise.

This article describes a simple tagging implementation for your Lotus QuickPlace deployment that lets you tag documents in a particular Place. This implementation is flexible enough to use with almost any Lotus Notes/Domino application. This article assumes that you have Lotus QuickPlace or Lotus Notes and Domino application development experience and have knowledge of JavaScript.

Usage scenario

In Lotus QuickPlace, tagging is most useful when a Place has so much content that the traditional folder-based navigation is not sufficient to manage and to navigate the content. It is also useful when a team is large enough that it needs a means for the team members to tell each other which pieces of content are most relevant to the team's operations.

Tagging allows the team members to bookmark documents with specific topics and to share those bookmarks or tags with other Place members as shown in figure 1.


Figure 1. A sample QuickPlace document with tags shown under the author information
A sample QuickPlace document with tags shown under the author information

When editing a document, users see an input field that lets them add one or more tags to a document, separated by semicolons. This article's implementation was designed to provide the simplest means for incorporating tags without focusing on the user experience, which can vary based on the Place owner's desires. It is possible for an HTML developer to extend this implementation to not impose the tagging field on the user unless it is desired. For example, an Add Tag button can display a <div> section in the Page view HTML for the Place’s theme, and clicking this button displays the input form.

Tags for a page are shown along with the Title, Author, and regular Page Content fields. Each tag links to a list of documents that contain that same tag.

A special Tags view allows users to see all tags in the Place with documents under each tag. This is another way to find relevant and categorized content within the Place. As the tag usage increases, users of the Place find more and more reason to visit the tags page as the first place to find relevant content. Tagging makes locating categorized information much easier.

Users can navigate by clicking tags to jump from document to document when looking for content along a particular topic area. Here's an example: In a sales team’s Lotus QuickPlace, while viewing a document tagged Acme, a user clicks the Acme tag and sees a list of all documents that relate to the Acme company. The user clicks the Acme 4Q05 Sales Report, reviews it, then (because this document is tagged Acme and salesreport) clicks the salesreport tag. The user can review all sales reports and compare reports to the one shown for Acme -- a much more dynamic navigation than traditional folder-based navigation.

As Places grow larger, it becomes more difficult to find relevant information. Because Places are developed for the context of a team, it’s very useful to rely on the input of individuals who are publishing or editing content to classify content. In contrast, search engines rely on software algorithms to classify content, but basic search engines cannot always understand the content that they classify. If the social aspect of tagging is not considered, it may make sense to use software for regular content (for example, project status updates) that can be tagged automatically.

The goal of this customization is to provide a simple code sample for implementing tags as a means for making QuickPlace content more readily accessible to those who need it.

Adding tags to Lotus QuickPlace

The following steps describe how you can add tags to your Places. In this article, we modify the MeetingRoom.ntf template so that Places can view tags and we modify the theme of the Place to include the tagging capabilities in the user interface. The benefit of this method is that because you modify the template file and the theme, any Place that wants to have the tagging capabilities can choose to do so; however, no Place manager is forced to adopt these changes. If, however, your goal is to deploy tags across your entire QuickPlace environment, then the code described in the "Modifying the theme" section can instead be added to the database design element so that it becomes a permanent part of the QuickPlace infrastructure across all Places.

You can download samples of the application templates described in this article.

Database design element: Place template

You begin by adding a new view, Tags, to Main.nsf of a specific Place if only certain Places want the database change, or you can add the tags to the MeetingRoom.ntf template or other PlaceTypes if broader use is required. The purpose of the Tags view is to create a location where all tags that have been used in a given Place can be viewed along with all documents that correspond to each tag. This view also makes it possible to create URLs that link to a page that shows a list of all documents that are associated with one specific tag. This URL is used when tags are shown in the UI to allow users to click the tags and to link to a list of related documents. The user scenario described earlier in which a user can navigate along a set of related documents through tags is facilitated by this view.

NOTE: The database changes do not impose any changes to the Place without the associated changes described later in this article to the Place's theme. The suggested implementation is to make the database changes to MeetingRoom.ntf and to other PlaceType templates, and then to allow Places to decide whether or not they want to implement this solution solely on the basis of theme changes.

If a large set of Places wants to implement tags, it is also possible to perform the theme changes at the PlaceType level or to edit the default theme files in the QuickPlace server's Resources.nsf.

To begin, open the Views section of the template in Lotus Domino Designer. The simplest way to create this view is to copy the System\Index view from the MeetingRoom.ntf template and to make two modifications to convert the view to the Tags view. Copy and paste the Index view into your database. Double-click the new view to make the required modifications.

First, change the name and alias to Tags. Next, right-click the leftmost column header and choose Insert New Column from the menu. Name the new column h_Tags, and specify the h_Tags field as the column value. In the Column Properties box, specify the h_Tags column Type as Categorized to allow users to sort documents by tags and to allow you to use the &RestrictToCategory URL command to see documents that contain a specific tag. If you need additional assistance to make these changes in Lotus Domino Designer, consult the Domino Designer help.

Optionally, in the Title column, you can select the "Show values in this column as links" option on the Advanced tab of the Column Properties box. Selecting the option allows for slightly easier use of the Web version of the Tags view.

There are a few items to note with regard to this view. First, because h_Tags is a TextList field, if a document has multiple tags, it appears in multiple categories. The view as shown in the browser displays the same document multiple times in the listing. Second, the &RestrictToCategory URL command allows you to use a URL like the following:

http://servername/QuickPlace/place/Main.nsf/Tags?OpenView&RestrictToCategory=healthcare

In this URL, the browser displays a list of only those documents that have the healthcare tag. Another interesting means of accessing this content is through the XML interfaces native to Lotus Domino. By using the ReadViewEntries command in the following way, it is possible to get an XML listing of all documents that have a particular tag:

http://servername/QuickPlace/place/Main.nsf/Tags?ReadViewEntries&RestrictToCategory=healthcare

You can use this XML listing as input into any other application that searches, displays, processes, or aggregates documents with a given tag or as input into an Ajax-based request from a QuickPlace theme.

Database design element: page edit subform

The second required change is to the subform that manages the editing of a page in Lotus QuickPlace and that is found in the HaikuCommonForms.ntf template in the QuickPlace\AreaTypes directory of the Domino Directory. In Lotus Domino Designer, open HaikuCommonForms.ntf and go to the Shared Code\Subforms section. Select the subform h_StdPageEdit. In Lotus QuickPlace 7, the subforms used to generate the QuickPlace Web client were unobfuscated to allow QuickPlace developers to view and modify the QuickPlace client. This sample shows the power of the unobfuscation.

Within the h_StdPageEdit subform, add the following code within the <NotesDictionary> tag:

<NOTESFIELD NAME={h_Tags} TYPE={TextList}>

This adds an h_Tags field to every page when it is edited. Just after the </NotesDirectionary> tag, add the following code:

Enter descriptive tags (separated by semicolon): <input name=h_Tags type=text value='@{h_Tags}'>

This provides a means for page editors to add tags to the page. The actual format and text of this input area is left to your discretion as long as somewhere on the page there is an HTML input field that submits text to the h_Tags variable.


Modifying the theme

After you add the data elements, the final step is to modify the theme of the Places that need to implement tags. Use an HTML or text editor for these modifications because they involve additions to the Page.htm file within the theme of a Place. After you make the modifications, you can provide the code used to modify the theme to Place managers, so they can add the modification to their own Places as desired.

NOTE: If you want to add tagging to all Places in the QuickPlace environment, then instead of modifying the theme as described in this section, take the HTML code shown in this section and paste it at the very top of the h_StdPageRead subform of HaikuCommonForms.ntf. This change applies to all Places and just those Places that have the modified theme.

Add the tags to the page read scene so that a user can see which tags are associated with a page when viewing it. Remember that you also want each tag to link to a view that shows other documents with that same tag.

The h_Tags field stores the list of tags for a given document. It is a TextList because a given document can have multiple tags.

To prepare for these modifications, go to the Customize section of the Place where you intend to add the tagging capability. Click the Custom Themes link to modify the theme for the page. If the Place already uses a custom theme, choose that theme. Otherwise, click the New Theme button at the top of the page to create a new custom theme. For more information on creating and modifying QuickPlace themes, consult the QuickPlace online help by clicking the Help link from any QuickPlace page.

Within the theme modification page, select the Generate option for the Page.htm file, click Next, and return to the theme modification page and save a copy of the file.

Access and open the Page.htm file using your preferred HTML or text editor. Add an area to the page read scene that displays the values within the h_Tags TextList field. You can do this anywhere on the page you want to show the tags -- most likely either immediately below the title and date information or at the very bottom of the page read scene.

For each tag, add an HTML anchor tag that links to the URL that shows all documents within that tag as the example shown before. Use a simple JavaScript method to read each member of the h_Tags TextList and surround it with the appropriate anchor tag and automatically generated URL. The complete code that needs to be added is as follows. In our sample implementation, we added this code after the <QuickPlaceSkinComponent name=authorAndModified> tag.

<tr><!-- Tags -->
<td colspan="2" class="h-page-text">
	<script language="JavaScript"> 
var TagsList='@{h_Tags}';
var TagsArray=new Array();
TagsArray=TagsList.split(', ');
var l = TagsArray.length;
if (l>0)
		{
		document.write('<b>Tags:</b>');
		for (i=0; i<l; i++)
{
			document.write('<a href=\"../../Tags/?OpenView&RestrictToCategory=' 
			+ TagsArray[i] + '\">' + TagsArray[i] + '</a> ')
		}
		}
</script>
<br><br>
</td>
</tr>


After making the change to the Page.htm file, upload the file to the theme modification page and click Next to apply the changes to the theme. Make sure that the Place uses the theme that you have just modified. If you created a new theme for this customization, go to the Customize page to change the theme of the Place to the new theme that you just created.

After you update the theme, open any page in the Place and click Edit. You should see the input field for tags that was created earlier. The page edit form should look similar to figure 2.


Figure 2. Editing a page shown with an input field to add tags to a QuickPlace page
Editing a page shown with an input field to add tags to a QuickPlace page

Enter a couple of sample tags, separated by semicolons. When you publish the page, the h_Tags field is updated; and the tags are shown on the page with links for each tag to a list of documents using that tag. The tags should look similar to figure 1 shown earlier in the article.

Clicking a particular tag shows a list of documents with that tag as shown in figure 3.


Figure 3. A list of documents containing the tag healthcare generated by the &RestrictToCategory URL command
A list of documents containing the tag healthcare generated by the &amp;RestrictToCategory URL command

Finally, you have the option of incorporating the Tags view into the Table of Contents of the page. To do so, add a link to the URL described earlier, which shows a page with all documents categorized by tag. You can do this in two ways. The first is to add the string to the Table of Contents skin component. Because the only thing unique about the URL is the Place name, this can easily by done in the theme HTML files by using the h_PlaceName JavaScript variable available in the Place. The second way is to create a link page in the Place and to link the URL to the folder view of h_TagsView created earlier.


Future potential

You can move the tags created in this article to any other tagging system with future customizations. Because the Tags view is stored centrally in the database, you can write custom code to produce a list of tags and URLs from a given Place for input into a central tagging system.

With regard to the user interface, you can expand the implementation to incorporate tags in a variety of different ways as is being done by public tagging systems. The only QuickPlace-specific information involved is that a given page has a tags field that is JavaScript accessible on the page. Type-ahead for tags in the input field is also possible, using the Tags view to determine which tags are already in the Place.

Although tagging is primarily done by users to represent content that they find relevant, you could also use PlaceBots to automatically tag content based on content in certain fields in custom forms. This allows the tags to be used as a navigational mechanism in the Place even if the relevance of the tags is not as high because a user did not manually tag the content. However this method of usage for tags removes the value added by social bookmarking methodologies, which place value on knowing which users commonly use which tags.

Tags could also be shared across multiple Places to move closer to the implementations of public systems. The implementation described in this article maintains the tags as metadata of the original content, so visibility of the tags is only available to those who have access to each piece of content.


Conclusion

This article showed you how to implement an exciting new way of interacting with content in Lotus QuickPlace. As tagging becomes a more popular facet of the Web 2.0 set of capabilities that is influencing popular Web sites, your QuickPlace content is ready to go alongside any other content application. This was accomplished with a very simple implementation of Notes/Domino capabilities -- categorized views and Notes fields. Theoretically, it should also be useful in other non-QuickPlace applications running on Lotus Domino. While other tagging sites accomplish tagging by building a central repository of URLs and tags, the implementation described here does not preclude this means of operation because the tags in Lotus QuickPlace are exportable.



Download

DescriptionNameSizeDownload method
Sample QuickPlace templatesquickplace-tagging.ZIP1783 KB HTTP

Information about download methods


Resources

Learn

Discuss

About the author

Satwik Seshasai joined the Lotus QuickPlace development team in September 2002, just in time to see version 3.0 ship to customers. He has worked on features in various parts of the product and has enjoyed learning how companies use the product through venues, such as Lotusphere and site visits. Outside of work, he spends his time canoeing, volunteering in local activities, and convincing his wife to watch more sports with him -- especially when teams from Philadelphia are playing!

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.


Report abuse help

Report abuse

Report abuse submission failed. Please try again later.


developerWorks: Sign in


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. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

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.

(Must be between 3 – 31 characters.)

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

 


Rate this article

Comments

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Lotus
ArticleID=111977
ArticleTitle=Adding social bookmarking tags to Lotus QuickPlace
publish-date=05302006
author1-email=
author1-email-cc=

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.

For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Special offers