This article shall give you guidance and inspiration on how to turn your classic boring lists into interactive modern list experiences, which will wow your users, let them get information at first sight, and increase overall productivity. This post is not about the Microsoft 365 list templates; I will cover them in one of the next blog posts.
If you never heard anything about modern SharePoint list formatting, don't worry; I will guide you through this.
First things first: Why should we use SharePoint lists and not use - for instance - an Excel spreadsheet? Because we don't need to hide information in cascading folders, that should be at the user's fingertips. The beauty of lists lies in their simplicity and flexibility to organize work and track the information that matters most to our businesses.
Creating, sharing, and tracking lists is easy and available on any device; everyone stays in the loop, and we can use lists for all kinds of purposes like tracking issues, assets, routines, contacts, inventory, and more. Lists can easily be customized to make them visually more appealing.
Now that we are teased into modern lists and libraries in SharePoint, it's time to turn on modern experiences. We can do it like this in the classic experience:
Lists can contain different columns, and each column has a certain column type, depending on the kind of value we want to store in that column like text, numbers, dates, choice, persons, locations, links, or images. As lists can contain much information, its brilliant if we emphasize crucial parts by formatting them in a way that they are
Already built-in, we will find options to format columns and views. Formatting a view means modifying the way the entire list is displayed. Formatting a column means changing the way this particular column looks like.
* and even with rules like if - then - else:
Rules are a powerful feature to determine how a column should look like. Let's say we want to apply a background color depending on a number value. If the number is below 30, the field should be red; between 30 and 70, it should yellow, and above 70, it should be green. Let's see how this looks like:
Sometimes, even if those options are already cool, we need some more flexibility.
There is a way to format both columns and views beyond what is already offered, as seen above. Perhaps you might have noticed the little link Advanced mode? This is where we will find the cool tools to play with!
This field expects you to put some JSON code in it to format this column. If you never heard about JSON, you can quickly get started with Intro to JSON by Bob German, this video, or you can learn more at w3schools.
We will browse to the Microsoft 365 PnP List formatting repository on GitHub and open the folder column samples
. In here, we will find free-to-use samples to make our lists look fantastic.
Instead of having a list like this:
we can now look at a list like that:
readme.md
file to know the requirements for your column. Some samples only work with choice, text, or number columns
One more example how amazing a list can look like? I run a the PimpYourOwnDevoce.com sticker store together with Elio Struyf and we use a SharePoint list as our inventory (Elio blogged about the whole architecture here. With this sample we can hover over our images to have a big preview:
That's it!
We will find view samples in the same GitHub repository.
You can find helpful resources to learn more here:
Have fun and happy Modern SharePoint list formatting - #SharingIsCaring ❤
PS: Did you like this post? I wrote even more about list formatting
First published on m365princess.com
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.