Guest Author: Jason MacKenzie
Intelligence Among Us

I was searching for a way to implement tag cloud functionality for a very specific use case that my client requires.  We are in the middle of a large migration of forms from Lotus Notes to InfoPath and part of the job is going to be increasing the “findability” of the new forms. 

My objective is to make the searching of forms so simple that a new employee should be able to find what they are looking for the first time, every time.  I’m a big fan of tagging and tag clouds as one mechanism for categorizing content and wanted to see what would be involved with accomplishing this using jQuery.

The solution works as follows: 

1. Query a SharePoint list, building a list of tags  
2. Use jQuery to create a tag cloud from the list
3. When the user clicks a tag query the list finds all items that contain that tag
4. Pop a jQuery dialog box with all the forms matching the tag (this gets around having to navigate to another page to see the tag search results).

One caveat: this solution will only work on one list.  It will not roll up tags from multiple lists across sites or site collections.

I have the following tools to help me accomplish this:

1. SPServices : http://spservices.codeplex.com/ 
2. DynaCloud jQuery plugin  http://johannburkard.de/blog/programming/javascript/dynacloud-a-dynamic-javascript-tag-keyword-cloud-with-jquery.html
3. U2U CAML Builder: http://www.u2u.be/res/tools/camlquerybuilder.aspx

We have packaged up our InfoPath forms and deployed them as features.  In order to help the users locate the forms we have created a content type called eForm Locator.  The purpose of this content type is to store information about the forms including the owner, department, the URL of the form and any associated tags.  This will allow us to display the information in a variety of ways and allow the users to navigate directly to a new form instance.

The first thing we need to do is create a new page to host our magnificent creation.  Place a Content Editor Web Part on the screen and put in your jQuery references.  You have built your Scripting Resource Center – right??  http://www.endusersharepoint.com/2010/01/05/build-a-sharepoint-scripting-resource-center/

<script type="text/javascript" src="http://URL/sprc/Resources%20%20jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://URL/sprc/Resources%20%20jQuery/jquery-ui-1.7.1.min.js"></script>
<script src="http://URL/sprc/Resources%20%20jQuery/jQuery%20SP%20Services/jquery.SPServices-0.5.4.min.js" type="text/javascript"></script>
<script src="http://URL/sprc/Resources%20%20jQuery/jQuery%20DynaCloud/jquery.dynacloud-5.js"></script>
<link rel="stylesheet" href="http://URL/sprc/Resources%20%20jQuery/jquery-ui-themes-1.7.1/excite-bike/jquery-ui.css" type="text/css">

The next step is to add another CEWP to the page and prepare to get our hands dirty!

All the code will be listed at the bottom of the article so for now we’ll just break it into manageable chunks.

Firstly – we need to query the eForm Locator list in order to build our list of tags.  This is where we use Marc’s SPServices library.  Just for the record Marc – when we finally meet I will be kissing you.  Be forewarned.  For those of you that have not used this you are missing out.

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "eFormLocator",
    CAMLViewFields: "<ViewFields><FieldRef Name='Tags' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName=z:row]").each(function() {

         $('#CloudContent').append($(this).attr("ows_Tags").replace(/;/g, " "));

         $('#CloudContent').append(" ");

      });

    }
  });

As we loop through the results we are appending the results of the tags field (replacing the “;” separators with spaces) to a DIV element with an ID of CloudContent.

We then simply call the DynaCloud plugin and let it do its magic.   Check the link above for more complete documentation on this plugin.

$.dynaCloud.sort = true;
   $("div.dynacloud").dynaCloud();
   $('#CloudContent').hide();

At this point our cloud is lazily floating on our page looking lovely.  But it doesn’t actually do anything yet.  The original intention of the DynaCloud plug in was to create a tag cloud out of a section of text on a web page and then highlight it when the tag is clicked.  Since that does us no good we’ll need to make a change to the plugin.

As seen above, instead of highlighting the text, we want to pop open a dialog with the search results.  So we’re going to call a function called queryTagList that is on our page.  This function is not as complicated as it looks so we’ll run through it step by step.

1. Clear our DIV that will be used to populate the jQuery dialog
2. Query the eForm locator list using SPServices.  We want to filter the results by the tag that was clicked and order them by the title of the Form.  Thank you U2U CAML Query Builder!
3. We then use the results to build some HTML that will populate the contents of the dialog box and call the jQuery to pop it open.  When one of the links is clicked it will open the eForm in a new page and then close the dialog.

function queryTagList(textToQuery)
{

  $('#dialog').html("");

  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "eFormLocator",
    CAMLQuery: "<Query> \
   <Where> \
      <Contains> \
         <FieldRef Name=\"Tags\" /> \
         <Value Type=\"Text\">" + textToQuery + "</Value> \
      </Contains> \
   </Where> \
   <OrderBy> \
      <FieldRef Name=\"Title\" Ascending=\"True\" /> \
   </OrderBy> \
</Query>",
    CAMLViewFields: "<ViewFields><FieldRef Name='Tags' /><FieldRef Name='eForm_x0020_URL' /><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName=z:row]").each(function()    {

      if ($(this).attr("ows_Tags").indexOf(textToQuery) > -1)
      {
         //We want the dialog to close when someone opens a form
         var mouseup = "$('#dialog').dialog('close');";

         var url = "<div><a onmouseup=" + mouseup  + "  target='_blank' href='" + $(this).attr("ows_eForm_x0020_URL").substring(0, $(this).attr("ows_eForm_x0020_URL").indexOf(",")) + "'>" + $(this).attr("ows_Title") + "</a></div>"

         $('#dialog').append(url)
         $('#dialog').dialog('option','show', 'blind');
         $('#dialog').dialog('option', 'width', 900);
         $('#dialog').dialog('option', 'height', 400);
         $('#dialog').dialog('open');

      }

In this article we have used a variety of tools and jQuery plugins to build a single-list tag cloud populated with SharePoint data completely on the client.  Thanks to all the developers that created these plugins that made this task so much easier.

Full Code

<script language="javascript" type="text/javascript">

var strTags = "";

$(document).ready(function() {

jQuery("#dialog").dialog({
      bgiframe: true, autoOpen: false,  modal: true, show: 'slide'
    });

  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "eFormLocator",
    CAMLViewFields: "<ViewFields><FieldRef Name='Tags' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName=z:row]").each(function() {

         $('#CloudContent').append($(this).attr("ows_Tags").replace(/;/g, " "));

         $('#CloudContent').append(" ");

      });

    }
  });

   $.dynaCloud.sort = true;
   $("div.dynacloud").dynaCloud();

   $('#CloudContent').hide();
});

function queryTagList(textToQuery)
{

  $('#dialog').html("");

  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "eFormLocator",
    CAMLQuery: "<Query> \
   <Where> \
      <Contains> \
         <FieldRef Name=\"Tags\" /> \
         <Value Type=\"Text\">" + textToQuery + "</Value> \
      </Contains> \
   </Where> \
   <OrderBy> \
      <FieldRef Name=\"Title\" Ascending=\"True\" /> \
   </OrderBy> \
</Query>",
    CAMLViewFields: "<ViewFields><FieldRef Name='Tags' /><FieldRef Name='eForm_x0020_URL' /><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName=z:row]").each(function()    {

      if ($(this).attr("ows_Tags").indexOf(textToQuery) > -1)
      {
         //We want the dialog to close when someone opens a form
         var mouseup = "$('#dialog').dialog('close');";

         var url = "<div><a onmouseup=" + mouseup  + "  target='_blank' href='" + $(this).attr("ows_eForm_x0020_URL").substring(0, $(this).attr("ows_eForm_x0020_URL").indexOf(",")) + "'>" + $(this).attr("ows_Title") + "</a></div>"

         $('#dialog').append(url)
         $('#dialog').dialog('option','show', 'blind');
         $('#dialog').dialog('option', 'width', 900);
         $('#dialog').dialog('option', 'height', 400);
         $('#dialog').dialog('open');

      }

      });

    }
  });

}
</script>

<div id="CloudContent" class="dynacloud"></div>
<div id=dynacloud></div>
<div id=dialog Title="eForm Tag Search Results"></div>

Guest Author: Jason MacKenzie
Intelligence Among Us

Jason has been an IT professional for 12 years and has worked in a variety of roles from software development to managing business solutions for a large international automotive supplier. He has developed mission critical software solutions for the manufacturing industry and has experience in the government and educational fields as well.

Jason is a social networking enthusiast and is currently working as an independent SharePoint architect. Jason helps organizations with strategy and implementation guidance related to  architecture, governance, processes as well as hand-holding and facilitating a good group cry every now and again. Jason’s goal is to actively participate in the community and share what he has learned in order to help people and business leverage their investment in this critical platform.