Creating a Glossary with Alphabet Links in Sitefinity

06/12/2012

By Nancy Rackleff

Responses

Prev // Next

Sitefinity provides an interface for creating individual list items, such as terms and their definitions.

I decided to use this to create a list of terms to put on a glossary page. I found that I could sort the list alphabetically and display it on a page easy enough, but my page also had the requirement of having "A,B,C,D..." links across the top of the list that would take you to the first term in the list starting with the letter clicked. Sitefinity did not provide a way to do this in its configuration so I decided to throw in a little jQuery to get the job done. Here's how:

Create a list of terms and definitions using Sitefinity's built-in list content module. Sort the list alphabetically. Create a page and use the "List" user control to add the list to your page as an expandable list. Use the advanced control settings to set the CssClass to "glossary-list".
While you are still in the user control setup, edit the "titles and full content" template, changing the content of the h3 tag as shown below, to insert a 'name' attribute to each term with the value set to the term with all the spaces removed. This step is necessary if you want it to work in IE7 and below, because jQuery could not update the 'name' attribute prior to IE8. Since you are only adding the name, you can still use this list template for other lists without changing the look. Save the control settings.
```
<h3 class="sflistItemTitle">
  <asp:LinkButton runat="server" name='<%# Eval("Title").ToString().Replace(" ", "") %>' ID="listItemToggleLnk" class="sflistItemToggleLnk" Text='<%# Eval("Title") %>' OnClientClick="return false;" />
</h3>
```
Now, back on the page, insert a generic content block above the list and use it to place an empty div that will hold the alphabet links once the page loads.
```
<div id="alphabet-links" class="clearfix"></div>
```

Make sure your page has jQuery. I did this in a script manager in the masterpage because I want it on all pages of my site. Register the assembly at the top of the page and add the script manager where you want to include jQuery.

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sfui" %>
<asp:ScriptManager></asp:ScriptManager>
<sfui:ResourceLinks ID="resourcesLinks" runat="server">
<sfui:ResourceFile JavaScriptLibrary="JQuery" />
</sfui:ResourceLinks>

Add the following code in a javascript file that is added to your page after your jQuery. I also did this in the masterpage, since my script.js contains all sorts of JavaScript that I need to run on every page of the site.
Content of the script:

$(document).ready(function () {
   // glossary jumplinks
  var lastLetterUsed = "";
  currentLetter = "";
  $(".glossary-list .sflistItemTitle a").each(function (i) {
    currentLetter = $(this).text().substr(0, 1).toUpperCase();
    currentName = $(this).attr('name');
    //if this is a new letter
    if (currentLetter != lastLetterUsed) {
      //add the link in the alphabet list using name attribut from the glossary list item
      $("#alphabet-links").append("<a href='#" + currentName + "'>" + currentLetter + "</a> ");
      lastLetterUsed = currentLetter;
    }
  });
});

Adding the script to the page:

<sf:JavaScriptEmbedControl runat="server" ID="jsLink5" ScriptEmbedPosition="InPlace" Url="~/Scripts/script.js"></sf:JavaScriptEmbedControl>

The jquery loops through all of the terms in the list and checks the first letter of each. If it is a letter it has not yet encountered, it creates a jumplink to that term and stores the letter in the 'lastLetterUsed' variable for comparison with the next letter.

glossary example

This is just one way to create a glossary in Sitefinity. What other helpful hints are out there for working with Sitefinity lists? Have you found a different method? If you have an idea you'd like to share, or a question or comment about this method, let me know in the comments.