How to build a glossary in SharePoint 2013 - Fabian Neve

About SharePoint, Javascript, PowerShell, and other technical stuff

Friday, November 20, 2015

How to build a glossary in SharePoint 2013

Do you wanna build a... glossary in SharePoint 2013? Here I found a nice but fiddly-tricky way to accomplish this task and I'll try to simplify it by adding some details and screenshots.

First, get your Files


First you need this Script Package:
Glossary-for-SharePoint.zip - Link #1
Glossary-for-SharePoint.zip - Link #2
Scan for download


Content of ZIP archive

Place the files in your Site Assets Library


Extract the Zip File, put the .js Files in Library like "SiteAssets" or create a new library called "Scripts" - it is up to you.


Create SharePoint Library and Content Type


1. Open your Site where you will place your glossary.

2. Create an app - a Custom List. Name it Glossary.

2. Go into Advanced Settings from List Settings and activate "manage content types".


3. Create via site settings > site content types a new site content type called Glossary with "Item" as parent.


4. Attach the "Glossary" content type to this list.

5. Make "Glossary" content type default and hide "Item" content type.


6. Create your site columns. Wecreate 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

7. Add these columns to the "Glossary" content type

8. Now add your Glossary Terms to the list, where the term comes in the "Title"-Field

Now it gets complicated!


9. I created a HTML File called "ScriptLoader.html" where I load all the needed libraries. This HTML lies in my SiteAssets library of the site.


10. Copy the contents of glossary-header.txt into Header.xsl in /Style Library/XSL Style Sheets/ of your Site Collection.

11. Copy the contents of glossary-itemstyle.txt into ItemStyle.xsl in /Style Library/XSL Style Sheets/ of your Site Collection.

12. Create your Glossary Page. I recommend a Web Part Page, beacause you need the ability to hide Web Parts.

13. Insert a Content Editor Web Part and open the tool pane of this Web Part. In "Content Link" enter the link to your ScriptLoader.html. This Web Part has to be hidden. Save your Glossary Page but keep editing. (eg. click on "Edit Page" again)


14. Insert another Content Editor Web Part, click in the body of the Web Part and edit its html source. Paste the content of glossary-nav.txt here. Save your Glossary Page but keep editing.


15. Insert a Content Query Web Part to the page, open the tool pane and let the Web Part point to the Glossary list.



16. Group items by "Glossary Term Letter" ascending, Sort items by "Title" ascending.



17. Fields to display:


18. Make this Web Part hidden too.

19. Insert a Hidden Script Editor Web Part with following code:


20. The Web Parts I used are in following order:

Zone 0: Content Editor Web Part with Term Letters for Navigation
Zone 1: (Hidden) Content Editor Web Part for ScriptLoader.html
Zone 2: (Hidden) Content Query Web Part for Term List
Zone 3: (Hidden) Script Editor with document.ready function

Now save your page.

How does it look like when finished?


Here's my Glossary:


Of course you can tweak and edit your css file.

I hope this works in your environment. Let me know your opinion in the comment section!


Edit 11.06.2018: I added ScriptLoader.html to the ZIP File and fixed the links.



8 comments:

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Yannick. Sorry for my late answer. I don't believe it has something to do with the glossary. It works with a few script on a singe page and gets the data from a list. It shouldn't have impact on another page.

      Delete
  2. Everything is working except the alphabet is not showing up as link. I see A B C but you can't click it.

    ReplyDelete
    Replies
    1. Have you any entries with "A" "B" or "C" ? If you don't have an entry beginning with A, B or C in your list, the letters are greyed out.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. does this solution work with SP 2016?

    ReplyDelete
  5. Hi Fabian,
    I have the same issue as Bill T. Everything seems to be working, except the alphabet. No links, so no result. I created a folder Glossary under Site Assets. I changed ScriptLoader accordingly. Any clues?

    ReplyDelete
    Replies
    1. Fixed: the file ScriptLoader.html points to /SiteAssets/jquery.js the actual file in the download is named SiteAssets/jquery-1.11.3.min.js.

      Delete