Aaron's SharePoint Blog

A common irritation in business these days is the deluge of acronyms.  The meanings for most are easily found with a quick google search, but many are company-specific.  It has been requested of me for a long time to create an acronym dictionary, but unfortunately it's one of those low-priority requests that never gets any attention.  Until, that is, I realized that this could easily be solved with a SharePoint List and AJAX in a CEWP.

Storing the acronyms in a SharePoint list was always in the back of my mind, but making it easy for users to find them is the hard part with out-of-the-box SharePoint functionality.  So I created some HTML/JS code that queries the "lists" web service and displays matches dynamically as the user types.

What it is

Custom List
Create a custom list with the following columns:

• Acronym – Signle line of text – Required
• Meaning – Single line of text – Required
• Definition – Multiple lines of text – Not required
• Company Specific – Yes/No
• Citation – Multiple lines of text – Required
• Begins With – Calculated (grabs the first letter in the acronym; used in the default view to group by first letter)

The list will need the following views:

• All Items (default view) (All columns grouped by "Begins With")
• Web Service View 1 (Displays only Acronym, Meaning, Company Specific)
• Web Service View 2 (Displays Acronym, Meaning, Definition, Company Specific, Citation; item limit set to 1)

HTML Page
An HTML page contains a text box that when typed into, displays matches by querying the web service (Web Service View 1).  Then, within the results, a user can click the Meaning of the acronym to display a window containing the definition and citation.

Implement it

1. Unzip the file attached to this post.
2. If you are using SharePoint Portal 2003, it may make sense to create a dedicated area for this solution so you can control who has permission to manage the content in the list.
3. Go to http://[YOUR_SITE]/_catalogs/lt/Forms/AllItems.aspx and upload the list template (Acronym Dictionary.stp) into the List Templates Gallery.
4. Create the list from the new template.
5. Edit the following JavaScript variables in AcronymViewer.htm (in the attached ZIP)
   1. 1
   2. 2
6. Add AcronymViewer.html to a Document Library within the area.
7. Paste the URL of the HTML page into the Content Link box in a CEWP.

When I first started playing with Portal Server a couple of years ago, my experience was only with WSS.  One thing that bugged me about Portal was the fact that there was no "easy" way to display links of all the lists in an area to the users without creating another list just for links.  This is because the standard user permissions we had set up didn't allow them to see the "Manage Content" link.

An easy way I've found to create links to an area is by using HTML/JavaScript in a CEWP and querying the SharePoint Web Service.

Paste the following code into a Content Editor Web Part (in SharePoint Portal 2003) and it will show you all of the lists in the area (the DWP is also attached to this post).

<span id=ListList>&nbsp;</span>

<script language=javascript>

//Lists in area
//Uses SharePoint Web Service API to retrive list of lists in current area
//Author: Aaron Haydo, ashaydo@gmail.com
//Date creaed: 6-JUL-2007

getListList();

function getListList() {

  var txt = document.getElementById("ListList");

  //Build SharePoint Web Service URL based on current location
  var wsURL;
  wsURL = window.location.protocol+"//";
  wsURL += window.location.host;
  var path = window.location.pathname.split("/");
  path.pop();
  var x;
  for (x in path) {
    wsURL += path[x] + "/";
  }
  wsURL += "_vti_bin/lists.asmx";

  //SOAP Action and XML
  var wsSoapAction = "http://schemas.microsoft.com/sharepoint/soap/GetListCollection";
  var wsXML = '<?xml version="1.0" encoding="utf-8"?>';
  wsXML += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
  wsXML += 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
  wsXML += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
  wsXML += '<soap:Body>';
  wsXML += '<GetListCollection xmlns="http://schemas.microsoft.com/sharepoint/soap/" />';
  wsXML += '</soap:Body>';
  wsXML += '</soap:Envelope>';

  //Create XML Document and get HTTP response using XMLHTTP object
  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  var httpResponse = getServiceResults(wsURL, wsSoapAction, wsXML);

  //If getServiceResults returns a 404, then it's probably because the
  //page is being launched from a document library instead of a web part
  if (parseInt(httpResponse) == 404) {
    txt.innerHTML = "<p>This code can only be executed from a web part.</p>";
    return;
  }
  else {
    xmlDoc.loadXML(httpResponse);
  }

  //Get results into collection
  listitems = xmlDoc.getElementsByTagName("List");

  //Loop through results and build table rows
  var output = "";
  for (var x = 0; x < listitems.length; x++) {
    output += "<tr title='";
    output += listitems(x).getAttributeNode("Description").text.replace(/'/g,"`");
    output += "'>";
    output += "<td class='ms-vb-icon' valign='top'>";
    output += "<a href='" + listitems(x).getAttributeNode("DefaultViewUrl").text + "'>";
    output += "<img src='";
    output += listitems(x).getAttributeNode("ImageUrl").text;
    output += "' border=0 hspace=5 alt='Icon'>";
    output += "</a>";
    output += "</td>";
    output += "<td class='ms-vb2' valign='top'>";
    output += "<a href='" + listitems(x).getAttributeNode("DefaultViewUrl").text + "'>";
    output += listitems(x).getAttributeNode("Title").text;
    output += "</a>";
    output += " (" + listitems(x).getAttributeNode("ItemCount").text + ")";
    output += "</td>";
    output += "</tr>";
  }

  //Display table
  var table = "";
  table = "<table border='0' width='100%' cellpadding='2' ";
  table += "cellspacing='0' class='ms-summarystandardbody' rules='rows'>" ;
  table += output;
  table += "</table>";
  txt.innerHTML = table;
}

function getServiceResults(url, soap, xml) {
  //Send XML packet to web service and return HTTP response text
  try {
    if (xml.length > 0) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlHttp.open("POST", url, false);
      xmlHttp.setRequestHeader("SOAPAction", soap);
      xmlHttp.setRequestHeader("Content-Type", "text/xml");
      xmlHttp.send(xml);
      if (parseInt(xmlHttp.status) == 404) {
        return 404;
      }
      else {
        return xmlHttp.responseText;
      }
    }
  }
  catch(e) {
    alert(e.message);
  }
}
</script>

Here is what the Web Part looks like:

As my first blog post, I'll discuss at a high level three things that I feel are the most powerful tools available to SharePoint admins who have some (client-side) development skills.  The Content Editor Web Part, XML Web Services and JavaScript.  Subsequent posts will describe real-life examples of how this has helped in the SharePoint implementation that I manage.

Content Editor Web Part (CEWP)
The most flexible and powerful web part that comes with every SharePoint implementation is the CEWP.  To give credit where credit is due for this opinion, the person/blog that opened my eyes to the power of the Content Editor Web Part is Todd Bleeker's 12 Hive where there are several examples of how it can be used.  After spending a few minutes reading these posts, I took the next several weeks worth of "free time" and created some very useful web parts without having to compile any code.

XML Web Services
Everyone knows the power of publishing and consuming data via XML over HTTP whether it be XML RPC or full-blown web service.  We also know that significant power lies within the SharePoint web service API.  The problem that I've always had with the SPWSAPI however, was the lack of useful documentation from Microsoft regarding how to actually interact with it.  Being inspired by Todd's CEWP stuff, I subsequently took the time to dig a little deeper into the SharePoint web services and have been able to create some pretty useful stuff.

JavaScript
JavaScript is what makes the CEWP and Web Services useful together.  Posting back with the XMLHTTP object via JavaScript allows you to talk to anything (not just XML) over HTTP, parse it and then present it to the user.

 -Aaron