Integrating IBM Lotus Connections with Microsoft technologies

This article illustrates how IBM Lotus Connections and Microsoft SharePoint and Live Communications Server can be positioned side by side and demonstrates the ease of integration between IBM Lotus and Microsoft products.

Share:

Luis Benitez, Consulting IT Specialist, IBM

Luis Benitez is a Consulting IT Specialist with IBM TechWorks. Luis leads the Lotus Connections community within IBM and has been working on early adopter customer deployments of Lotus Connections since January 2007. Luis joined IBM TechWorks in early 2008, and prior to that he worked as a consultant for IBM Software Services for Lotus. You can reach Luis at Luis_Benitez@us.ibm.com.



29 January 2008 (First published 18 December 2007)

Also available in Russian

IBM Lotus Connections, the first Web 2.0-driven product delivered by Lotus, provides for great integration flexibility. Designed to be extended, embedded, and mashed up, Lotus Connections can be integrated with Microsoft products, such as Microsoft SharePoint and Microsoft Live Communications Server. This article is written for application developers with a good understanding of HTML development and some knowledge of J2EE and Microsoft .NET applications.

Positioning Lotus Connections as a complement to Microsoft technologies

Today's Web applications have become more and more powerful as they are integrated with other Web applications. Technologies continue to evolve almost daily, and it's difficult to predict what is coming next. Therefore, Web applications must be built on open standards and must work in a platform-agnostic world.

Lotus Connections has been developed specifically to leverage open standards such as Atom, RSS, J2EE, and others. In fact, one of its design goals is to make it very easy to integrate and enhance existing applications with social capabilities such as social bookmarking, Person tags, and activities.

Enterprises have deployed two popular applications for online collaboration internally at the business unit or at the department level: Microsoft SharePoint and Microsoft Live Communications Server. Live Communications Server is the backend for an instant messaging (IM) application.

SharePoint was created as a way for users to share content, and its access is controlled by a moderator or site owner. SharePoint, however, does not have a way for people to share bookmarks or to collaborate around specific activities – two capabilities provided by Lotus Connections from which SharePoint customers can benefit.

An example of how Lotus Connections complements SharePoint is the use of Communities. One of the biggest pain points for enterprises is enabling their employees to find intellectual capital repositories. Lotus Connections Communities can fill this gap by allowing a community owner to advertise the specific SharePoint site the community uses to store intellectual capital. Thus, when an employee searches Lotus Connections he may run into a particular community and easily link to its SharePoint site.

Similarly, employees can use Lotus Connections Dogear to bookmark specific pages within SharePoint. This enables employees to not only discover potential repositories, but also to give them direct access to the content they are looking for using Dogear's social capabilities such as comments and tagging.

Using Lotus Connections Communities and Dogear services to provide enhanced social networking capabilities to Microsoft SharePoint users requires no special code or integration. Both are standard capabilities of Lotus Connections.

Lotus Connections also includes a Person tag service, which provides a JavaScript pop-up window when a user hovers over somebody's name. You can add this service to your existing Web applications very easily. This service clearly distinguishes Lotus Connections from Microsoft SharePoint. When you add the Person tag service from Lotus Connections to your Microsoft SharePoint environment, users get immediate value by having a simple way to see more information about other users. In summary, Lotus Connections makes finding SharePoint sites a lot easier in the enterprise.


Integrating Lotus Connections with Microsoft SharePoint

This section describes the process for integrating Lotus Connections with Microsoft SharePoint, focusing specifically on adding the Lotus Connections Person tag.

Adding the Person tag to a Web application

This section contains a brief overview of what is required to integrate the Person tag into a typical Web page.

Lotus Connections Profiles includes a Semantic Tag service that can be used to quickly and easily add a Person tag similar to the one shown in figure 1 to any Web application.

Figure 1. Person tag for Gia Lyons
Person tag for Gia Lyons

To do this, the first step is to add the code in listing 1 to your HTML <HEAD> element.

Listing 1. Code to include the reusable components from Profiles
<script type="text/javascript" 
src="http://profiles.acme.com/ibm_semanticTagServlet/javascript/semanticTagService.js">
</script>
<link rel="stylesheet" 
href="http://profiles.acme.com/profiles/css/styles.css" type="text/css" />

This code loads the Lotus Connections service into your Web page. Next, place the code in listing 2 somewhere in the <BODY> element of your HTML file:

Listing 2. Code to enable the Person tag for a name
<div id="luiscard" class="vcard">
 <a href="http://profiles.acme.com/profiles/html/simpleSearch.do?searchFor=
 gia_lyons@us.ibm.com&searchBy=email" class="fn url person">Gia Lyons</a>
 <span class="email" style="display:none;">gia_lyons@us.ibm.com</span>
</div>

Make sure that the items in bold are changed to reflect your environment, and you are done. It's really that simple.

The Person tag service looks up the user information based on the email address and adds a link to the Web page. When a user hovers over this link, the Person tag pops up.

Adding the Person tag to Microsoft SharePoint

As you saw in the previous section, adding the Person tag to a typical Web application is straightforward. If you can modify the HTML markup around a user's name, you can add the Person tag.

Working with Microsoft SharePoint, however, is more complicated because about 95 percent of the HTML is generated by the server using DLL files. Therefore, it's impossible to tap into the HTML layout to insert the necessary code around a user's name.

This section explains how to integrate the Lotus Connections Profiles Person tag with Microsoft SharePoint. More specifically, it explains how to customize the people.aspx page to add the Person tag when you hover over a user's name. Figure 2 shows the original Web page.

Figure 2. Standard view for People and Groups in Microsoft SharePoint
Standard view for People and Groups in Microsoft SharePoint

Click to see larger image

Figure 2. Standard view for People and Groups in Microsoft SharePoint

Standard view for People and Groups in Microsoft SharePoint

To insert the Person tag functionality into a dynamically generated Web page, use JavaScript to modify the HTML after it has been generated by the different DLL files. The following steps explain how to modify a page in SharePoint to expose the Person tag:

  1. Log onto the SharePoint server.
  2. Go to C:\Program Files\Common Files\Microsoft Shared\
    web server extensions\12\TEMPLATE\LAYOUTS.
  3. Create a backup of people.aspx.
  4. Open people.aspx with your favorite text editor.
  5. Find the following line inside the file:

    <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead"
    runat="server">

  6. Inside that HTML element, find a <script> element. Just before that element, insert the code shown in listing 3.

    NOTE: Make sure that you specify the correct server name for the Lotus Connections Profiles feature instead of profiles.acme.com.
Listing 3. Code to include the reusable components from Profiles
<script type="text/javascript" 
src="http://profiles.acme.com/ibm_semanticTagServlet/javascript/
semanticTagService.js"></script>
<link rel="stylesheet" 
href="http://profiles.acme.com/profiles/css/styles.css" type="text/css" />

The code should now look something like the code in listing 4.

Listing 4. Code added to SharePoint header
<asp:Content ContentPlaceHolderId=”PlaceHolderAdditionalPageHead” runat=”server”>
 <SharePoint:HtcMenuClientFiles runat=”server”/>

<script type="text/javascript" src="http://profiles.acme.com/ibm_semanticTagServlet/
javascript/semanticTagService.js"></script>
<link rel="stylesheet" 
href="http://profiles.acme.com/profiles/css/styles.css" type="text/css" />

<script type=”text/javascript”>
 var currentViewId = ‘<asp:Literal id=”LiteralCurrentViewId” runat=”server”/>’;
 function NavigateToView(viewId)
 {
   var url=window.location.href + “”;
   url = StURLSetVar2(url, “view”, viewId);
  1. Find the following line inside the file:

    <asp:PlaceHolder id="PanelCannotViewMembership" runat="server" Visible="false">

    Just before that line, insert the code shown in listing 5.

    NOTE: Make sure that you specify the correct server name for the Lotus Connections Profiles feature instead of profiles.acme.com.
Listing 5. Code to enable the Person tag in SharePoint
<script>
  // Figure out the ID of the table which contains the user names, and get the table
  var lconnUserTableId = ctx.listName + "-" + ctx.view;
  var lconnUserTable = document.getElementById( lconnUserTableId );

  // Get the checkbox that contains the user information
  var lconnInputs = document.getElementsByName('spUserSelectionCheckBox_1');
  var lconnInputsLength = lconnInputs.length;

  // for each user
   for (var lconnIterator=0; lconnIterator < lconnInputsLength; lconnIterator++)
   {
      // get the user details
      var lconnInput = lconnInputs[lconnIterator];
      var lconnUserEmail = lconnInput.getAttribute('email');
      var lconnUserName = lconnInput.getAttribute('title');

      // get the column's cell, it's the third one after the checkbox 
      var lconnInputParent = lconnInput.parentNode;  // the TD
      var lconnCell = lconnInputParent.nextSibling.nextSibling.nextSibling;

      // now that we have the column, parse the inner table
      var lconnCell2 = lconnCell.firstChild.firstChild.firstChild.firstChild.nextSibling;
			
      // set the new HTML as required
      var lconnNewHTML = "<div class='vcard'><a 
      href='http://profiles.acme.com/profiles/html/simpleSearch.do?searchFor=" + 
      lconnUserEmail + "&searchBy=email' class='fn url person'>" + 
      lconnUserName + "</a>";
      lconnNewHTML += "<span class='email' style='display:none;'>" + 
      lconnUserEmail + "</span></div>";

      lconnCell2.innerHTML = lconnNewHTML;
    }
</script>
  1. Save the file.
  2. Reload the page in SharePoint.

After you refresh your browser, you can hover over the different user names and get the Person tag pop-up window with information from Lotus Connections Profiles. Additionally, if you click somebody's name, you are taken to that person's Lotus Connection Profile page where you can see all of that user's information.


Integrating Lotus Connections with Microsoft Live Communications Server presence awareness

This section contains a brief overview of what is required to integrate the Microsoft Live Communications Server (LCS) presence awareness into a typical Web page.

Microsoft Office Communicator and Microsoft Messenger provide the Name Control, a DLL (ActiveX control) that ships with Microsoft Office 2003 and later. When called within Web pages, this control provides rich presence functionality that is easy to implement. For organizations using both Live Communications Server and Microsoft Office 2003 or later, the easiest way to provide presence functionality is to use the Name Control. In fact, the Name Control DLL is what Microsoft SharePoint Services use to display presence and to provide contextual collaboration options on SharePoint sites. Using this control in the Web sites and pages that you create is the point of this exercise.

To do this, the first step is to add the following line to your HTML <HEAD> element:

<script type="text/javascript"
src="/profiles/javascript/NameControl.js"></script>

Next, you need to have this code somewhere in your HTML file:

<img id="imgStatus ${email}_status"
src="/profiles/images/namecontrol_images/Unknown.gif"
onload="PresenceControl('user-email');"/>

And that is all you need to do.

The disadvantage of this approach is that it works only on Microsoft Internet Explorer and on those machines that have Microsoft Office Communicator installed. To work around this limitation, Microsoft provides an AJAX API that you can use to query presence awareness. For simplicity, this article focuses on the ActiveX solution.

Adding presence awareness to Lotus Connections Profiles

This section explains how to integrate Lotus Connections and LCS presence awareness. More specifically, it explains how to customize the Profile view of the user.

Figure 3. Profile view for Luis Benitez
Profile view for Luis Benitez

To add an LCS presence indicator to Lotus Connections, first download NameControl.js from the Microsoft site. Log on to the Profiles server.

Insert the JavaScript include into the HTML <HEAD> element by following these steps:

  1. Copy NameControls.js to

    <WAS_PROFILE_ROOT>\installedApps\<cellName>
    \Profiles.ear\peoplepages.war\javascript

  2. Go to

    <WAS_PROFILE_ROOT>\installedApps\<cellName>\Profiles.ear\
    peoplepages.war\WEB-INF\jsps\html

  3. Create a backup of tiles-def.xml.
  4. Open tiles-def.xml with your favorite text editor.
  5. Find the following line inside the file:

    <definition name="scene.profile_view" ex-tends="layout.profiles3Col">

  6. Inside that element, find:

    <putList name="jsIncludes">

  7. Inside the putList element, add the following line:

    <add value="/javascript/NameControl.js" />

  8. The entire <definition> element should now look like the code shown in listing 6.
Listing 6. Modified definition for scene.profile_view
<definition name="scene.profile_view" ex-tends="layout.profiles3Col">
 <put name="pageTitleKey” value="label.page.profiles" 	type="string" />
	<put name="sceneBanner" value="/WEB-INF/jsps/html/scenes/banner.jsp" />
	<put name="sceneHeader"	value="/WEB-INF/jsps/html/scenes/header.jsp" />
	<put name="leftCol"  value="/WEB-INF/jsps/html/scenes/profile/profileNav.jsp" />
 	<put name="rightCol" 
 	value="/WEB-INF/jsps/html/scenes/profile/reportingStructure.jsp" />
	<put name="scene" value="/WEB-INF/jsps/html/scenes/profile/businessCard.jsp" />
	<putList name="contextualHelpList">
		<add value="/WEB-INF/jsps/html/scenes/profile/profileTagsHelp.jsp" />
	</putList>
	<putList name="jsIncludes">
    <add value="/javascript/dojo/dojo.js" />
    <add value="/javascript/prototype/prototype.js" />
    <add value="/javascript/behaviour/behaviour.js" />
    <add value="/javascript/scriptaculous/scriptaculous.js?load=effects,builder" />
    <add value="#personTagSvcLocation#/javascript/semanticTagService.js?version=
    #version#&lang=#language#" />
    <add value="#sametimeLinksSvcLocation#/stlinks.js" />
    <add value="/javascript/personalize.js?version=#version#" />
    <add value="/javascript/awareness.js?version=#version#" />
    <add value="/javascript/common.js?version=#version#" />
    <add value="/javascript/popup.js?version=#version#" />
    <add value="/javascript/profiles_behaviours.js?version=#version#" />
    <add value="/javascript/profiles_help.js?version=#version#" />
    <add value="/javascript/profiles.js?version=#version#" />
<add value="/javascript/NameControl.js" />
	</putList>
</definition>
  1. Repeat steps 5-8, but now look for the following element:

    <definition name="scene.my_profile_view" ex-tends="layout.profiles3Col">

  2. Save tiles-def.xml.
  3. Restart the Profiles server.

Next, add an element to the businessCard.jsp, the page in which to render someone's presence by following these steps:

  1. Go to:

    <WAS_PROFILE_ROOT>\installedApps\<cellName>
    \Profiles.ear\peoplepages.war\WEB-INF\jsps\html\scenes\profile

  2. Save a copy of businessCard.jsp.
  3. Open businessCard.jsp with your favorite text editor.
  4. Find the following statement:

    </div> <!-- end bioLevel2 -->

  5. Just before that line, add the statements shown in listing 7. After you do so, the file should look like listing 8.

    Lotus Connections automatically substitutes the ${email} element is for the email address of the user for which the profile is being viewed.
Listing 7. Code to enable presence awareness around a name
<h3>
	<span id="imStatus ${email}_status">
	<img id="imgStatus ${email}_status" 
	src="/profiles/images/namecontrol_images/Unknown.gif" 
	onload="PresenceControl('${email}');"/>
	</span>
	</h3>
Listing 8. Presence awareness code added to Lotus Connections
<h3>
	<span id="imStatus ${email}_status">
	<img id="imgStatus ${email}_status" 
	src="/profiles/images/namecontrol_images/Unknown.gif" 
	onload="PresenceControl('${email}');"/>
	</span>
	</h3>
</div> <!--end bioLevel2 -->
  1. Save the file.

Now search for a user on Lotus Connections. As a preview, you see a screen similar to the one shown in figure 4.

Figure 4. Modified Profile view
Modified Profile view that shows presence awareness

Figure 5 shows the same Profile view, but with presence awareness.

Figure 5. Context menu displayed when right-clicking presence indicator
Context menu displayed when right-clicking on presence indicator

Conclusion

In this article, we demonstrated how Lotus Connections can complement a Microsoft SharePoint and Live Communications Server deployment. This article describes step by step how to add the Lotus Connections Person tag to SharePoint. Additionally, it outlines how to customize Lotus Connections and enable it for presence awareness using Microsoft Live Communications Server.

Resources

Learn

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=277755
ArticleTitle=Integrating IBM Lotus Connections with Microsoft technologies
publish-date=01292008