How to create a glossary page in Microsoft Lists [SharePoint]

Summary

In this engaging video, Giuliano De Luca guides viewers through the process of creating a visually appealing glossary page in Microsoft Lists, integrated with SharePoint. By leveraging the work of Federigo Sapia, viewers learn to craft a customizable UI that includes a header with the alphabet where list items can be ordered, grouped, and panel details accessed effortlessly. The tutorial starts with creating a basic list structure with several columns and illustrates the end-to-end setup, including adding calculated fields and multi-choice fields. Finally, De Luca gives insights on implementing JSON-based custom views to enhance the user experience.

Highlights

• Discover how to build an awesome glossary page using Microsoft Lists! 🎉
• Federigo Sapia's UI design is a game-changer for item grouping and display. 🚀
• Learn step-by-step how to set up calculated and multi-choice fields. 🛠
• Explore smart ways to display item details in panel views. 📜
• Get tips on integrating your list into SharePoint for a seamless experience. 🌐

Key Takeaways

• Creating a glossary in Microsoft Lists is a breeze thanks to a simple UI setup! 📚
• Use Federigo Sapia's design for a polished, professional look. 🎨
• Grouping and arranging items alphabetically just got easier! 🔤
• Integrate your glossary page seamlessly into SharePoint and Teams. 🚀
• Learn to use JSON for advanced UI customization! 💡

Overview

Giuliano De Luca kicks off the tutorial by introducing Microsoft Lists' capabilities for creating a dynamic glossary page. He highlights Federigo Sapia's contribution with a UI design that allows users to navigate through list items easily and explore project details with flair.

The process of building this feature from scratch is demystified with clear, concise instructions. Users begin by setting up a basic list structure and end with a sophisticated glossary view enhanced with JSON. The video showcases steps from column creation to leveraging calculated fields for efficient item sorting.

The video wraps up with integration tips for embedding this view into SharePoint and Microsoft Teams. De Luca emphasizes the seamless experience and offers additional insights on similar themes, inviting viewers to explore more through supplementary content.

Chapters

• 00:00 - 01:00: Introduction to Glossary Page in Microsoft Lists In the chapter 'Introduction to Glossary Page in Microsoft Lists', the speaker introduces viewers to creating a glossary page using Microsoft Lists. The chapter highlights features as showcased by Federo Sapia, a notable contributor in this area. The features include a cool user interface with an alphabetical header, enabling users to order items, group them, and open detailed panels for each item.
• 01:01 - 04:00: Creating and Setting Up the List Structure The chapter discusses the versatility and usefulness of setting up a list structure for various scenarios, such as project navigation and sharing important information within an organization. It emphasizes the ease of creating a simple list with multiple columns as a starting point, with potential for further expansion. The customization of the list includes options such as adding videos and other types of content as needed.
• 04:01 - 07:00: Customizing Views and Utilizing JSON Code This chapter introduces a streamlined method to create an easily navigable glossary page using Microsoft Lists integrated into a SharePoint site. The focus is on simplifying user interaction with the list items and enhancing the user interface.
• 07:01 - 10:00: Finalizing the Glossary and Adding Data The chapter discusses how to finalize the glossary by focusing on important details such as title, description, and including data like Agile development, AI, and Automation. A calculated field is used to apply specific definitions or calculations related to the glossary terms.
• 10:01 - 12:00: Conclusion and Subscription Invitation In the 'Conclusion and Subscription Invitation' chapter, the focus is on finalizing a method to extract the first letter of a title, which plays a crucial role in ensuring the functionality of the glossary feature. Additionally, there is mention of a multi-choice field coded as 'TX', allowing for the proper assignment of topics to list items. This multi-choice field is demonstrated through a standard view presentation. Overall, the chapter emphasizes the technical steps required to enhance glossary features and categorization through coding mechanisms.

How to create a glossary page in Microsoft Lists [SharePoint] Transcription

• 00:00 - 00:30 hi everyone stick around because in this video I'll show you how you can create a glossary page in Microsoft lists Mr Microsoft lists federo Sapia an incredible contributor in this field has shared his marvelous job by having this cool UI with the header with the alphabet where you can hoarder items in the list you can group the items and then you can even open a panel showing the details of every single item in the
• 00:30 - 01:00 list this is very cool and you can have this to cover many scen areas like for example navigating and exploring projects or important informations that you want to share in the in the organization so super easy to do just you need to start from scratch by creating a simple list with several columns and then it's up to you how you want to expand the panel with all the information you can have a video inside whatever ever you want but this kind of
• 01:00 - 01:30 approach it's pretty cool because you can have a glossery page but where it's more easy to explore every items on the list okay enough talk let's start to explore all steps to do to have this incredible UI let's go here I have Microsoft lists open I created this list calleded glossery and this is drop it in a SharePoint site it's not so difficult
• 01:30 - 02:00 to reproduce this list I have just four columns here title description first and TX so as you can see here I have the standard view where I can see the item inside this this list I have just added some data inside I have Agile development AI boost Automation and here I have the description what I have here as a third column is a calculated field which apply
• 02:00 - 02:30 the first function in order to get the first letter of the title which is absolutely important to make the glossery work and then finally I have a multi-choice field coded TX where I can assign the proper topic of the of the item of this list so say that this is the standard View how I can show this
• 02:30 - 03:00 glossery view so let's click on the button whole items and what I have here is now this gorgeous UI created by federo Sapia so this is very wonderful so I have all my items inside here of this View and when I click on one of this I can display the data in a panel so I can see the title the description
• 03:00 - 03:30 and moreover I can click on the tag in this case Innovation this will if I click now this will reorder and rearrange rearrange the The View by filtering for by Tags by Innovation as tag so I can see now all items with this tag selected in the tags column so I can click on now on the x button to remove this filter and to go
• 03:30 - 04:00 back and to go back to the standard view so what else if I want to immediately open something that is related with the letter c I can just click on the C letter and what I have here now are two items that start with in the title with the letter c I have co-pilot for Microsoft 35 for example with a tax moreover if I double click here I can open the outof thee box detail panel of
• 04:00 - 04:30 this of this item so I can comment I can copy I have the standard outof thee box feature coming with Microsoft lists and SharePoint moreover I have the standard functionalities here I can filter I can group I can sort this uh this list so let me remove now this this filter and what I would like to do is Group by
• 04:30 - 05:00 first for example by the the letter the alphabetical order so I have a b c d a as you can see and I have all items immediately grouped properly so I have the button back to to the top so I can go back uh and reverse to the initial view federo made a nice job also in adapting the
• 05:00 - 05:30 view in teams as well which is slightly different compared to Microsoft lists but using jasen Federico adapted also the view to looks the same as we have seen before in Microsoft teams I use it here Microsoft lists app as a tab to have the same view and what I have here now is exactly the same experience I can click on see for example in reorder the
• 05:30 - 06:00 items of this list accordingly I can clear clear the filters and I have all features that we have seen before I can group and so on all right let's start to implement this solution from scratch together so here I have the page the web page open coming from Federico where is described how you can implement this View and how you can have it on your sharpoint tenant as well so here you have main howto points to follow first
• 06:00 - 06:30 of all we need to create a list a new list you can call it as you want but in this case I'm going to call it glossery and then you have to recreate the same list structure that we have seen with the title which is in out of the box the description as a multi multi-line text and then First Column as calculated column and tax as a multiple choice so if you want to group the items of
• 06:30 - 07:00 this list the first columns plays an important role here and once you have done with the list you can then click on this link to get the jaon code that you need to create this view all right let's start now creating a new list so let me now go on the SharePoint site so we can start again on recreating a new list so I'm going to C call it with another
• 07:00 - 07:30 name so let's say glosser glossery new all right we have this one set up let's remove the blank space I don't want to attach this to the navigation let's hit the button create and I can start recreating the the same structure so the title it's already there one important point is that federo is
• 07:30 - 08:00 pointing out is that fedo has used your um this case and it's important that you have the same in because in the jasm you have description with this exact case if you are going to use the first letter as a capital letter it's important that then you have the same on the jasen so let's start and let's move now on the toab that I have here open the title is already there now for this new one I
• 08:00 - 08:30 will have the description which is a multi-line text multiple line of text let's a the button next and here I have to define the name I'm going to use the same that we have seen description there we go I can click on Save next I need to add the calculated column so clicking here I I cannot see
• 08:30 - 09:00 this field in the new modern UI so that means that I need to go on the wheel icon and then select the list settings because I need to use to use the classic view to do that so let's hit the button here on the link create column and then here I can start to type first for example this is a calculated field it is now an option available for me with this
• 09:00 - 09:30 classic experience then I can add a description if I want I need to define the the field that I want to include here the formula is this one I'm going to use the left function to get the first letter of the title that's it so then I can click on okay and I can also switch back to the modern experience to add last last column so first is here again I refreshed the page now I can add
• 09:30 - 10:00 the last one which is tax for tax this is a choice field let's click on next let's add text TX and then as a choice I can start to type something let's say Innovation AI productivity and then let's add the last one as collaboration for example just to have something inside and this is also a
• 10:00 - 10:30 multi Choice column allow multiple selections all right now I have all Fields I have the same structure mentioned in the Federico's documentation so next I can click on this link to get the jasen this open another tab in the browser and now I can copy the full content on of this page
• 10:30 - 11:00 that we can see here so let's do that and let's create the new view so I'm going to copy this let's go back to the toab that I have open it's time now to change this view all items so let's click on the the arrow and then format current view so here I can jump directly on the advanced mode and now I'm going to select all and past the the jasm
• 11:00 - 11:30 let's click on preview I can also save so now I need to add something inside so we can then see the the real UI and while I added just two elements just to see the something in this View and the UI is here so I can start to play with it and I can see and filter all elements contained in this list all right I hope you enjoyed this video if yes please consider to subscribe and
• 11:30 - 12:00 like if you want to see more video like this one around sharpoint or Microsoft lists drop the word sharpoint in the comment and I will share more videos about this topic I hope to see you next time bye