Embedded Files
02/01/2025
Whether we are building a corporate knowledge portal or a new project tool for our team, a glossary can be a valuable ally in helping users focus on specific terms in a given field of work.
Between these two example use cases at each end, there are all those nuances that we'll have to consider from time to time, to determine whether an interactive glossary can actually be useful to users.
In Microsoft 365, there are many tools and methods we can use to create a glossary and provide users with a quick reference of specific terms and topics. Thanks to Microsoft Lists and JSON formatting capabilities, we can build custom rows and group headers to create a glossary and display it in SharePoint.
🧱 Solution breakdown
Here is a visual description of a glossary user interface created with Microsoft Lists:
🎯 User interface result
Here is the result of a glossary displayed in SharePoint. Thanks to group headers and conditional formatting of rows, it's possible to build a basic glossary of terms. That's cool! 😎
⚙️ Filter by letter (navigation bar)
The first row has a conditional formatting applied to display a navigation bar. You can get a filtered view of the glossary terms, by clicking on a letter from the navigation bar.
⚙️ Filter by tag (item hovercard)
You can also filter existing items based on tags applied to classify them. In this sample, you can filter by one tag at a time. If you need to apply more complex filters, please use the Microsoft Lists OOTB filter pane.
... ok, but that's not my alphabet 🤔
You are right! To solve this issue, you can add or remove letters based on your alphabet. The navigation bar is built with the split function, which divides a given string into an ordered list of substrings by searching for the given pattern criteria (comma in this sample), and returns an array of these substrings. So open the JSON code and go to row number 98 and 489 to edit:
Where is the list search bar? And where is my site navigation gone? 🤔
They haven't moved nor disappeared. If you want to display the Microsoft Lists search bar above, just replace the ending query parameter from all the href lines in the JSON code:
from env=WebView
to env=WebViewList
Conversely, if you want to display all your website navigation (eg. in case of a knowledge portal, site hub, intranet etc.), just remove the ending query parameter from all the href lines in the JSON code.
Query parameters are thoroughly explained in Microsoft Learn and we can play with them to offer a customized navigation to our users.
Why does the navigation bar disappear in case of no results?🤔
This is a known and "by design" Lists limitation, since what we render through JSON row formatting is "item based" and is part of the item with row index = 0 (the first item resulting from a letter filtering). Therefore, no item = no bar rendering.
This behaviour can be noticed in the browser DOM, where we have limited control on single rows, not on other stuff around them.
Users should be informed about this behaviour and would have to clear all filters in case of no results, to display the navigation bar again:
Alternatively, in order to completely avoid this behaviour, you can customize your alphabet (see step above) by showing only the letters currently existing. This way, you'll make sure that users will always get related terms and the glossary navigation bar.
Page updated
Google Sites
Report abuse