Modern SharePoint list formatting

Published Feb 12 2021 06:56 AM 4,895 Views

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.

daniel-cheung-zky0BmMT5m8-unsplash.jpg

Why would we use SharePoint lists

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.

How can we turn on modern experience

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:

  • select Library Settings or List Settings on the ribbon
  • select Advanced settings and select List experience
  • select New experience
  • save with Ok

How can we change the look and feel of a list in the UI

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

  • easier to read
  • give a grasp on what is going on
  • are mobile-friendly

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.

 

list-formatting-create.png

 

Formatting Views

  • We can change the format view
 

 

  • and also display a gallery view
 

list-formatting-formatgallery.png

Formatting columns

  • If we want to change the column's appearance, we can do that very end-user-friendly directly in the UI:
 

list-formatting-formatcolumns.png

 

* and even with rules like if - then - else:

 

list-formatting-formatrules.png

How can I apply conditional formatting, aka rules

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:

 

list-formatting.gif

How can we change the look and feel of a list with JSON

Sometimes, even if those options are already cool, we need some more flexibility.

 

whatif.jpg

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!

 
 
 

advanced-mode.png

 

 

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.

Samples

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:

 

example list-BEFORE.png

  

 

we can now look at a list like that:

 

example list.png

How can we apply a sample?

  • Get familiar with the samples that are available on GitHub
  • regularly check for new ones / pin the repo
  • select the one that is interesting for you
  • read the readme.md file to know the requirements for your column. Some samples only work with choice, text, or number columns
  • open the JSON file
  • copy the code to your clipboard
  • go to your SharePoint list
  • go to column settings --> format this column
  • click on Advanced mode
  • paste the code
  • click Save
 

formatsplist.gif

 

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:

 

listformat-pyod.gif

That's it!:stareyes:

We will find view samples in the same GitHub repository.

Want to learn more?

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 

4 Comments
Occasional Contributor

I love that fact this is a great, straight forward article that describes formatting lists and extending that functionality via JSON that I would feel comfortable forwarding on to users without worry. But now I know where I can get some cool stickers to "pimp my laptop" out! Thank you Luise!

Hey @Rob Bowman thank you for your nice comment! Please do share this article and let me know: Which kind of content are you interested in? This Microsoft 365 PnP blog is still new and we want to make sure to cater what you need! Any input would be highly appreciated! 

regarding PYOD.shop : #StickWithUs :)

Regular Visitor

Hey, 
Nice article, However I wanted to make the column conditional read only. for example, I have a status col and comment col then if(status) = complete then comment should be read only. 

 

if you can help me with this... couldn't find anywhere

hello @binodranabhat  - this is not possible with SharePoint out of the box - but you can customize the form with Power Apps - In the list, select Integrate, then Power Apps, then Customize Forms. You will be redirected to PowerApps. In the form, you can select the Card and need to change its `DisplayMode` property conditionally: 

If(ThisItem.Status.Value = "complete", DisplayMode.View, DisplayMode.Edit)

You will ne to first unlock this - this is just to make sure that you know what you are doing :) 

Please reach out if you have any questions. 

%3CLINGO-SUB%20id%3D%22lingo-sub-2128544%22%20slang%3D%22en-US%22%3EModern%20SharePoint%20list%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2128544%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20article%20shall%20give%20you%20guidance%20and%20inspiration%20on%20how%20to%20turn%20your%20classic%20boring%20lists%20into%20interactive%20modern%20list%20experiences%2C%20which%20will%20wow%20your%20users%2C%20let%20them%20get%20information%20at%20first%20sight%2C%20and%20increase%20overall%20productivity.%20This%20post%20is%20not%20about%20the%20Microsoft%20365%20list%20templates%3B%20I%20will%20cover%20them%20in%20one%20of%20the%20next%20blog%20posts.%3C%2FP%3E%0A%3CP%3EIf%20you%20never%20heard%20anything%20about%20modern%20SharePoint%20list%20formatting%2C%20don't%20worry%3B%20I%20will%20guide%20you%20through%20this.%3C%2FP%3E%0A%3CH1%20style%3D%22font-family%3A%20SegoeUI%2C%20Lato%2C%20'Helvetica%20Neue'%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%20color%3A%20%23333333%3B%22%20id%3D%22toc-hId-1270078959%22%20id%3D%22toc-hId-1270079021%22%20id%3D%22toc-hId-1270079021%22%20id%3D%22toc-hId-1270079021%22%20id%3D%22toc-hId-1270079021%22%20id%3D%22toc-hId-1270079021%22%20id%3D%22toc-hId-1270079021%22%20id%3D%22toc-hId-1270079021%22%20id%3D%22toc-hId-1270079021%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22daniel-cheung-zky0BmMT5m8-unsplash.jpg%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254517i7399CDDCDFA2E390%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22daniel-cheung-zky0BmMT5m8-unsplash.jpg%22%20alt%3D%22daniel-cheung-zky0BmMT5m8-unsplash.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FH1%3E%0A%3CH2%20id%3D%22toc-hId-1960640433%22%20id%3D%22toc-hId-1960640495%22%20id%3D%22toc-hId-1960640495%22%20id%3D%22toc-hId-1960640495%22%20id%3D%22toc-hId-1960640495%22%20id%3D%22toc-hId-1960640495%22%20id%3D%22toc-hId-1960640495%22%20id%3D%22toc-hId-1960640495%22%20id%3D%22toc-hId-1960640495%22%3E%3CA%20id%3D%22user-content-why-would-we-use-sharepoint-lists%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23why-would-we-use-sharepoint-lists%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EWhy%20would%20we%20use%20SharePoint%20lists%3C%2FH2%3E%0A%3CP%3EFirst%20things%20first%3A%20Why%20should%20we%20use%20SharePoint%20lists%20and%20not%20use%20-%20for%20instance%20-%20an%20Excel%20spreadsheet%3F%20Because%20we%20don't%20need%20to%20hide%20information%20in%20cascading%20folders%2C%20that%20should%20be%20at%20the%20user's%20fingertips.%20The%20beauty%20of%20lists%20lies%20in%20their%20simplicity%20and%20flexibility%20to%20organize%20work%20and%20track%20the%20information%20that%20matters%20most%20to%20our%20businesses.%3C%2FP%3E%0A%3CP%3ECreating%2C%20sharing%2C%20and%20tracking%20lists%20is%20easy%20and%20available%20on%20any%20device%3B%20everyone%20stays%20in%20the%20loop%2C%20and%20we%20can%20use%20lists%20for%20all%20kinds%20of%20purposes%20like%20tracking%20issues%2C%20assets%2C%20routines%2C%20contacts%2C%20inventory%2C%20and%20more.%20Lists%20can%20easily%20be%20customized%20to%20make%20them%20visually%20more%20appealing.%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-153185970%22%20id%3D%22toc-hId-153186032%22%20id%3D%22toc-hId-153186032%22%20id%3D%22toc-hId-153186032%22%20id%3D%22toc-hId-153186032%22%20id%3D%22toc-hId-153186032%22%20id%3D%22toc-hId-153186032%22%20id%3D%22toc-hId-153186032%22%20id%3D%22toc-hId-153186032%22%3E%3CA%20id%3D%22user-content-how-can-we-turn-on-modern-experience%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23how-can-we-turn-on-modern-experience%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EHow%20can%20we%20turn%20on%20modern%20experience%3C%2FH2%3E%0A%3CP%3ENow%20that%20we%20are%20teased%20into%20modern%20lists%20and%20libraries%20in%20SharePoint%2C%20it's%20time%20to%20turn%20on%20modern%20experiences.%20We%20can%20do%20it%20like%20this%20in%20the%20classic%20experience%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3Eselect%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ELibrary%20Settings%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eor%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EList%20Settings%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eon%20the%20ribbon%3C%2FLI%3E%0A%3CLI%3Eselect%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EAdvanced%20settings%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eand%20select%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EList%20experience%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3Eselect%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ENew%20experience%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3Esave%20with%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EOk%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CH3%20id%3D%22toc-hId-843747444%22%20id%3D%22toc-hId-843747506%22%20id%3D%22toc-hId-843747506%22%20id%3D%22toc-hId-843747506%22%20id%3D%22toc-hId-843747506%22%20id%3D%22toc-hId-843747506%22%20id%3D%22toc-hId-843747506%22%20id%3D%22toc-hId-843747506%22%20id%3D%22toc-hId-843747506%22%3E%3CA%20id%3D%22user-content-how-can-we-change-the-look-and-feel-of-a-list-in-the-ui%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23how-can-we-change-the-look-and-feel-of-a-list-in-the-ui%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EHow%20can%20we%20change%20the%20look%20and%20feel%20of%20a%20list%20in%20the%20UI%3C%2FH3%3E%0A%3CP%3ELists%20can%20contain%20different%20columns%2C%20and%20each%20column%20has%20a%20certain%20column%20type%2C%20depending%20on%20the%20kind%20of%20value%20we%20want%20to%20store%20in%20that%20column%20like%20text%2C%20numbers%2C%20dates%2C%20choice%2C%20persons%2C%20locations%2C%20links%2C%20or%20images.%20As%20lists%20can%20contain%20much%20information%2C%20its%20brilliant%20if%20we%20emphasize%20crucial%20parts%20by%20formatting%20them%20in%20a%20way%20that%20they%20are%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3Eeasier%20to%20read%3C%2FLI%3E%0A%3CLI%3Egive%20a%20grasp%20on%20what%20is%20going%20on%3C%2FLI%3E%0A%3CLI%3Eare%20mobile-friendly%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EAlready%20built-in%2C%20we%20will%20find%20options%20to%20format%20columns%20and%20views.%20Formatting%20a%20view%20means%20modifying%20the%20way%20the%20entire%20list%20is%20displayed.%20Formatting%20a%20column%20means%20changing%20the%20way%20this%20particular%20column%20looks%20like.%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_0%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22list-formatting-create.png%22%20style%3D%22width%3A%20178px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254498iA464ED494317B9E5%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22list-formatting-create.png%22%20alt%3D%22list-formatting-create.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH4%20id%3D%22toc-hId-1534308918%22%20id%3D%22toc-hId-1534308980%22%20id%3D%22toc-hId-1534308980%22%20id%3D%22toc-hId-1534308980%22%20id%3D%22toc-hId-1534308980%22%20id%3D%22toc-hId-1534308980%22%20id%3D%22toc-hId-1534308980%22%20id%3D%22toc-hId-1534308980%22%20id%3D%22toc-hId-1534308980%22%3E%3CA%20id%3D%22user-content-formatting-views%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23formatting-views%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EFormatting%20Views%3C%2FH4%3E%0A%3CUL%3E%0A%3CLI%3EWe%20can%20change%20the%20format%20view%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_1%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3Eand%20also%20display%20a%20gallery%20view%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_2%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22list-formatting-formatgallery.png%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254503i5033B1D304502798%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20role%3D%22button%22%20title%3D%22list-formatting-formatgallery.png%22%20alt%3D%22list-formatting-formatgallery.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH4%20id%3D%22toc-hId--273145545%22%20id%3D%22toc-hId--273145483%22%20id%3D%22toc-hId--273145483%22%20id%3D%22toc-hId--273145483%22%20id%3D%22toc-hId--273145483%22%20id%3D%22toc-hId--273145483%22%20id%3D%22toc-hId--273145483%22%20id%3D%22toc-hId--273145483%22%20id%3D%22toc-hId--273145483%22%3E%3CA%20id%3D%22user-content-formatting-columns%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23formatting-columns%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EFormatting%20columns%3C%2FH4%3E%0A%3CUL%3E%0A%3CLI%3EIf%20we%20want%20to%20change%20the%20column's%20appearance%2C%20we%20can%20do%20that%20very%20end-user-friendly%20directly%20in%20the%20UI%3A%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_3%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22list-formatting-formatcolumns.png%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254506i7D10470EC583EE85%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20role%3D%22button%22%20title%3D%22list-formatting-formatcolumns.png%22%20alt%3D%22list-formatting-formatcolumns.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E*%20and%20even%20with%20rules%20like%20if%20-%20then%20-%20else%3A%3C%2FSPAN%3E%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_4%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22list-formatting-formatrules.png%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254505i2348F2ED4C00D7FA%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20role%3D%22button%22%20title%3D%22list-formatting-formatrules.png%22%20alt%3D%22list-formatting-formatrules.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--283648649%22%20id%3D%22toc-hId--283648587%22%20id%3D%22toc-hId--283648587%22%20id%3D%22toc-hId--283648587%22%20id%3D%22toc-hId--283648587%22%20id%3D%22toc-hId--283648587%22%20id%3D%22toc-hId--283648587%22%20id%3D%22toc-hId--283648587%22%20id%3D%22toc-hId--283648587%22%3E%3CA%20id%3D%22user-content-how-can-i-apply-conditional-formatting-aka-rules%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23how-can-i-apply-conditional-formatting-aka-rules%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EHow%20can%20I%20apply%20conditional%20formatting%2C%20aka%20rules%3C%2FH3%3E%0A%3CP%3ERules%20are%20a%20powerful%20feature%20to%20determine%20how%20a%20column%20should%20look%20like.%20Let's%20say%20we%20want%20to%20apply%20a%20background%20color%20depending%20on%20a%20number%20value.%20If%20the%20number%20is%20below%2030%2C%20the%20field%20should%20be%20red%3B%20between%2030%20and%2070%2C%20it%20should%20yellow%2C%20and%20above%2070%2C%20it%20should%20be%20green.%20Let's%20see%20how%20this%20looks%20like%3A%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_5%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22list-formatting.gif%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254507iC882E050F3EA60C6%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22list-formatting.gif%22%20alt%3D%22list-formatting.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--2091103112%22%20id%3D%22toc-hId--2091103050%22%20id%3D%22toc-hId--2091103050%22%20id%3D%22toc-hId--2091103050%22%20id%3D%22toc-hId--2091103050%22%20id%3D%22toc-hId--2091103050%22%20id%3D%22toc-hId--2091103050%22%20id%3D%22toc-hId--2091103050%22%20id%3D%22toc-hId--2091103050%22%3E%3CA%20id%3D%22user-content-how-can-we-change-the-look-and-feel-of-a-list-with-json%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23how-can-we-change-the-look-and-feel-of-a-list-with-json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EHow%20can%20we%20change%20the%20look%20and%20feel%20of%20a%20list%20with%20JSON%3C%2FH3%3E%0A%3CP%3ESometimes%2C%20even%20if%20those%20options%20are%20already%20cool%2C%20we%20need%20some%20more%20flexibility.%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_6%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22whatif.jpg%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254508i0A296BD6A241F67B%2Fimage-size%2Fsmall%3Fv%3D1.0%26amp%3Bpx%3D200%22%20role%3D%22button%22%20title%3D%22whatif.jpg%22%20alt%3D%22whatif.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EThere%20is%20a%20way%20to%20format%20both%20columns%20and%20views%20beyond%20what%20is%20already%20offered%2C%20as%20seen%20above.%20Perhaps%20you%20might%20have%20noticed%20the%20little%20link%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EAdvanced%20mode%3C%2FSTRONG%3E%3F%20This%20is%20where%20we%20will%20find%20the%20cool%20tools%20to%20play%20with!%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_7%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_13%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_14%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22advanced-mode.png%22%20style%3D%22width%3A%20142px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254512iCB5EFDB9A69125FD%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22advanced-mode.png%22%20alt%3D%22advanced-mode.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_12%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20field%20expects%20you%20to%20put%20some%20JSON%20code%20in%20it%20to%20format%20this%20column.%20If%20you%20never%20heard%20about%20JSON%2C%20you%20can%20quickly%20get%20started%20with%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fmicrosoft-365-pnp-blog%2Fintroduction-to-json%2Fba-p%2F2049369%22%20target%3D%22_blank%22%3EIntro%20to%20JSON%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eby%20Bob%20German%2C%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DiiADhChRriM%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ethis%20video%3C%2FA%3E%2C%20or%20you%20can%20learn%20more%20at%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fwww.w3schools.com%2Fjs%2Fjs_json_intro.asp%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ew3schools%3C%2FA%3E.%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--2101606216%22%20id%3D%22toc-hId--2101606154%22%20id%3D%22toc-hId--2101606154%22%20id%3D%22toc-hId--2101606154%22%20id%3D%22toc-hId--2101606154%22%20id%3D%22toc-hId--2101606154%22%20id%3D%22toc-hId--2101606154%22%20id%3D%22toc-hId--2101606154%22%20id%3D%22toc-hId--2101606154%22%3E%3CA%20id%3D%22user-content-samples%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23samples%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3ESamples%3C%2FH2%3E%0A%3CP%3EWe%20will%20browse%20to%20the%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-list-formatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%20365%20PnP%20List%20formatting%20repository%20on%20GitHub%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eand%20open%20the%20folder%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3Ecolumn%20samples%3C%2FCODE%3E.%20In%20here%2C%20we%20will%20find%20free-to-use%20samples%20to%20make%20our%20lists%20look%20fantastic.%3C%2FP%3E%0A%3CP%3EInstead%20of%20having%20a%20list%20like%20this%3A%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_8%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22example%20list-BEFORE.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254513i35A53600A09DA3E4%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22example%20list-BEFORE.png%22%20alt%3D%22example%20list-BEFORE.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%E2%80%83%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Ewe%20can%20now%20look%20at%20a%20list%20like%20that%3A%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_9%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22example%20list.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254514iBC4F4620CB91E8CB%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22example%20list.png%22%20alt%3D%22example%20list.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--1411044742%22%20id%3D%22toc-hId--1411044680%22%20id%3D%22toc-hId--1411044680%22%20id%3D%22toc-hId--1411044680%22%20id%3D%22toc-hId--1411044680%22%20id%3D%22toc-hId--1411044680%22%20id%3D%22toc-hId--1411044680%22%20id%3D%22toc-hId--1411044680%22%20id%3D%22toc-hId--1411044680%22%3E%3CA%20id%3D%22user-content-how-can-we-apply-a-sample%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23how-can-we-apply-a-sample%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EHow%20can%20we%20apply%20a%20sample%3F%3C%2FH3%3E%0A%3CUL%3E%0A%3CLI%3EGet%20familiar%20with%20the%20samples%20that%20are%20available%20on%20GitHub%3C%2FLI%3E%0A%3CLI%3Eregularly%20check%20for%20new%20ones%20%2F%20pin%20the%20repo%3C%2FLI%3E%0A%3CLI%3Eselect%20the%20one%20that%20is%20interesting%20for%20you%3C%2FLI%3E%0A%3CLI%3Eread%20the%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CCODE%3Ereadme.md%3C%2FCODE%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Efile%20to%20know%20the%20requirements%20for%20your%20column.%20Some%20samples%20only%20work%20with%20choice%2C%20text%2C%20or%20number%20columns%3C%2FLI%3E%0A%3CLI%3Eopen%20the%20JSON%20file%3C%2FLI%3E%0A%3CLI%3Ecopy%20the%20code%20to%20your%20clipboard%3C%2FLI%3E%0A%3CLI%3Ego%20to%20your%20SharePoint%20list%3C%2FLI%3E%0A%3CLI%3Ego%20to%20column%20settings%20--%26gt%3B%20format%20this%20column%3C%2FLI%3E%0A%3CLI%3Eclick%20on%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3EAdvanced%20mode%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3CLI%3Epaste%20the%20code%3C%2FLI%3E%0A%3CLI%3Eclick%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ESave%3C%2FSTRONG%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_10%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22formatsplist.gif%22%20style%3D%22width%3A%20728px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254515i2F73A41B3E866CB9%2Fimage-dimensions%2F728x377%3Fv%3D1.0%22%20width%3D%22728%22%20height%3D%22377%22%20role%3D%22button%22%20title%3D%22formatsplist.gif%22%20alt%3D%22formatsplist.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%E2%80%83%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOne%20more%20example%20how%20amazing%20a%20list%20can%20look%20like%3F%20I%20run%20a%20the%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fpyod.shop%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EPimpYourOwnDevoce.com%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Esticker%20store%20together%20with%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fwww.eliostruyf.com%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EElio%20Struyf%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eand%20we%20use%20a%20SharePoint%20list%20as%20our%20inventory%20(%3CA%20href%3D%22https%3A%2F%2Fwww.eliostruyf.com%2Frunning-online-store-powerplatform-azure%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EElio%20blogged%20about%20the%20whole%20architecture%20here%3C%2FA%3E.%20With%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Flists.handsontek.net%2Fformat-image-column-preview-microsoft-lists-sharepoint%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ethis%20sample%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Ewe%20can%20hover%20over%20our%20images%20to%20have%20a%20big%20preview%3A%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorLuise%20Freese_11%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22listformat-pyod.gif%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F254516i5B0324341D132D4B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22listformat-pyod.gif%22%20alt%3D%22listformat-pyod.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EThat's%20it!%3CIMG%20class%3D%22lia-deferred-image%20lia-image-emoji%22%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fhtml%2F%40A027B0AAF3CA617A1E2E22C4E761B2FE%2Fimages%2Femoticons%2Fstareyes_40x40.gif%22%20alt%3D%22%3Astareyes%3A%22%20title%3D%22%3Astareyes%3A%22%20%2F%3E%3C%2FP%3E%0A%3CP%3EWe%20will%20find%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eview%20samples%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Ein%20the%20same%20GitHub%20repository.%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-252221893%22%20id%3D%22toc-hId-252221955%22%20id%3D%22toc-hId-252221955%22%20id%3D%22toc-hId-252221955%22%20id%3D%22toc-hId-252221955%22%20id%3D%22toc-hId-252221955%22%20id%3D%22toc-hId-252221955%22%20id%3D%22toc-hId-252221955%22%20id%3D%22toc-hId-252221955%22%3E%3CA%20id%3D%22user-content-want-to-learn-more%22%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fgithub.com%2FLuiseFreese%2Fblog%2Fblob%2Fmain%2Fsp-list-formatting.md%23want-to-learn-more%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%20aria-hidden%3D%22true%22%3E%3C%2FA%3EWant%20to%20learn%20more%3F%3C%2FH2%3E%0A%3CP%3EYou%20can%20find%20helpful%20resources%20to%20learn%20more%20here%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Faka.ms%2Fm365pnp%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eaka.ms%2Fm365pnp%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fmicrosoft-365-pnp-blog%2F%22%20target%3D%22_blank%22%3EMicrosoft%20365%20PnP%20Community%20on%20TechCommunity%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-list-formatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%20365%20PnP%20List%20formatting%20repository%20on%20GitHub%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EHave%20fun%20and%20happy%20Modern%20SharePoint%20list%20formatting%20-%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CEM%3E%23SharingIsCaring%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%E2%9D%A4%3C%2FEM%3E%3C%2FP%3E%0A%3CP%3EPS%3A%20Did%20you%20like%20this%20post%3F%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fm365princess.com%2Fhow-we-use-sharepoint-list-formatting-and-power-automate-at-pyod-to-ease-our-marketing%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EI%20wrote%20even%20more%20about%20list%20formatting%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CEM%3EFirst%20published%20on%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fm365princess.com%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Em365princess.com%3C%2FA%3E%26nbsp%3B%3C%2FEM%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2128544%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20article%20shall%20give%20you%20guidance%20and%20inspiration%20on%20how%20to%20turn%20your%20classic%20boring%20lists%20into%20interactive%20modern%20list%20experiences%2C%20which%20will%20wow%20your%20users%2C%20let%20them%20get%20information%20at%20first%20sight%2C%20and%20increase%20overall%20productivity.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2128791%22%20slang%3D%22en-US%22%3ERe%3A%20Modern%20SharePoint%20list%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2128791%22%20slang%3D%22en-US%22%3E%3CP%3EI%20love%20that%20fact%20this%20is%20a%20great%2C%20straight%20forward%20article%20that%20describes%20formatting%20lists%20and%20extending%20that%20functionality%20via%20JSON%20that%20I%20would%20feel%20comfortable%20forwarding%20on%20to%20users%20without%20worry.%20But%20now%20I%20know%20where%20I%20can%20get%20some%20cool%20stickers%20to%20%22pimp%20my%20laptop%22%20out!%20Thank%20you%20Luise!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2129345%22%20slang%3D%22en-US%22%3ERe%3A%20Modern%20SharePoint%20list%20formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2129345%22%20slang%3D%22en-US%22%3E%3CP%3EHey%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F5066%22%20target%3D%22_blank%22%3E%40Rob%20Bowman%3C%2FA%3E%26nbsp%3Bthank%20you%20for%20your%20nice%20comment!%20Please%20do%20share%20this%20article%20and%20let%20me%20know%3A%20Which%20kind%20of%20content%20are%20you%20interested%20in%3F%20This%20Microsoft%20365%20PnP%20blog%20is%20still%20new%20and%20we%20want%20to%20make%20sure%20to%20cater%20what%20you%20need!%20Any%20input%20would%20be%20highly%20appreciated!%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3Eregarding%20PYOD.shop%20%3A%20%23StickWithUs%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Co-Authors
Version history
Last update:
‎Feb 12 2021 06:56 AM
Updated by: