Glossary with Related Terms in SharePoint 2013

These steps will allow you to build a glossary of terms page that reads from a custom list and is grouped by the alphabet. Allows for linking to other terms in the list as RELATED TERMS and also allows for linking the term to any url.

Requirements

  • This script requires the jQuery JavaScript library.  Ensure this library is attached and available on the master page or page layout where your glossary will appear.

Download

Installation

  1. Create a content type – Glossary with Item as parent
  2. Create an app – Custom List – Name it Glossary and attach Glossary content type (NOTE: you must go into Advanced Settings from list settings and turn on the ability to manage content types on list – also don’t forget to ‘Change new button order and default content type’ and make Item NOT visible and make Glossary – 1)
    list-content-type
  3. Create your site columns (in this instance we create the columns after the content type and list are created so that we can create a lookup column that reads from the same list)
    • Glossary Related Terms (Lookup (information already on this site) – allow multiple values, Get Information From: Glossary, in this column: Title)
    • Glossary Term Definition (Full HTML content with formatting and constraints for publishing)
    • Glossary Term Letter (Choice (menu to choose from) – each letter of the alphabet)
    • Glossary Term URL (Single Line of Text)
  4. add these columns to the Glossary content type
  5. add Glossary terms to list – NOTE:TITLE field is the Term
  6. Copy the contents of glossary-min-script.js (recommended) into an attached JavaScript file
  7. Copy the contents of glossary-header.txt into Header.xsl in /Style Library/XSL Style Sheets/
  8. Copy the contents of glossary-itemstyle.txt into ItemStyle.xsl in /Style Library/XSL Style Sheets/
  9. edit any page – add a CEWP to the page – click in the body of the webpart and edit its html source – Copy the contents of glossary-nav.txt into here
    cewp-edit-source-html
  10. add a CQWP to the page and update the webpart properties to point to the custom list
    • group by Glossary Term Letter
    • sort items by Title
      cqwp-glossary-grouping-and-sorting
    • group style choose Glossary
    • item style choose glossary
    • fill in Glossary Related Terms for RelatedTerms field
    • fill in Glossary Term URL for glossaryItemUrl field
    • fill in Glossary Term Definition for definition field
      cqwp-glossary-group-and-item-styles
    • MAKE THIS WEBPART HIDDEN
      hide-webpart

Usage

Once the script has been installed, you can run the script by invoking it in a jQuery document.ready function, like so:

$(document).ready(function(){
     glossaryTerms();
});

Style (optional)

You may optionally kick-start the styling of your Glossary with the CSS found in glossary-styles.css. Simply drop these styles into an attached style sheet and you’re good to go.

When finished you should end up with something like this

glossary-alphabet

as you can see the terms I’ve added trigger the specific alphabet letter to be active (i’ve only added 2 terms to the list for this example – CQWP and Item Styles) clicking ‘C’ shows this

glossary-term

You may also like...

14 Responses

  1. Adam says:

    Hi, Thanks for the tutorial. I am running into a problem where it shows the letters A-Z vertically and is not hyperlinked, so I can access the information . When I go to edit the webpart it shows the list. What am I doing wrong?

  2. Sonny says:

    Hi Adam,

    When you edit the page does the CQWP render any results?

    Did you attach the optional CSS document to your layout or master? or copy the styles to an already attached stylesheet?

    Are there errors in your console of your browser?

    It’s hard to troubleshoot without knowing if you followed each step very very carefully…

    Let me know if you can send me some screenshots or anything else that will help me help you.

    Thanks!

  3. Tim Robinson says:

    Hi Adam. I’m having the same problem as Sonny. And, yes, the CQWP does render the expected results. I didn’t register the CSS in the master page, but I included in a Script Editor WP. It appears to be working as expected. I can definitely send you more details once your respond. Thanks

    • Tim Robinson says:

      Adding to this, I replaced the contents of glossary-scripts.js with the following:

      function glossaryTerms() {
      alert(“hi”);
      }

      When I call the page, no alert message appeared. I suppose that’s a clue. 😉

  4. Tim Robinson says:

    Yes. I also tried adding the closing parenthesis for the ready method. I checked everything over, and it all looked right. I think I’m going to redo it all.

  5. Tim Robinson says:

    BTW, there’s a typo in your instructions. You says “Get Information From: Gallery, in this column: Title)” Should be “Get Information From: Glossary, in this column: Title)”

    • Tim Robinson says:

      I got it working. But I what is the Glossary Term URL field for? Is that just the link to the list item?

      • Sonny says:

        hey Tim

        thanks for catching the typo – it’s fixed now

        glad you got it working as well

        the Glossary Term URL – when filled in on the list item, links the term to any url you want – it’s there JUST IN CASE you want to link the term to a website or a page on the site for a particular reason

        thanks

  6. youssef says:

    Hey thanks for this nice tutorial !
    I have a little problem , when i delete an item from the Glossary List , it still appear in the glossary !

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 2 =