Microsoft and some amazing contributors have given us the ability to format our list columns in Modern Lists & Libraries to provide a great user experience to our users when viewing lists.
To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements.
Luckily for us, most of the work is already done and all we have to do is copy and paste the JSON for the format we want from the Git repository. It’s as simple as going to your List column –> Column settings –> “Format this column” option and pasting in the JSON that has already been constructed by the contributors.
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples
I put this blog together as mostly a quick reference to myself so I can quickly choose a list column user experience to give to my clients based on a sample image that the column format does. Credit to the open source contributors for developing this JSON.
Concatenate Currency Symbol to Numeric Columns
Formatting an item when a date column is before or after today’s date
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/date-range-format
Creating Red-Amber-Green (RAG) bars based on date ranges
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/date-range-rag
Centered Content
Turn FileRef field into clickable thumbnail hyperlink
Turn field values into hyperlinks
Project Indicator Formats
Display social media profile pics using social media handles
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-socialpic
Create a button to launch a Flow for the selected item
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-start-flow
Displays a customizable Google map image for a given location
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-staticmap
SVG icons
Display Twitter profile pics using Twitter handles
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-twitterpic
Conditional formatting based on a number range
Format a number column as a number/percentage data bar
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-data-bar
Formatting percentage number (%) to pie chart
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-piechart
Smiley faces for good quiz results
Show trending up/trending down icons
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-trending-icon
Highlight the current user
Person Mail To Link
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/person-mailto
Display a person’s profile picture in a circle
Display a picture column as a circle
Conditional formatting based on the value in a text or choice field
Formatting an ISBN (text column) to book cover image. Images are retrieved by calling Open Library Covers API
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/text-isbn-image
Traffic Light (Red-Yellow-Green) Status Indicator
Strikethrough on Completion
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/text-strikethrough
Formatting column with long text to multiple-line with word wrap.
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/text-wrap-format
Yes/No Checkbox
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/yesno-checkbox
Formatting Yes/No field to check mark based on the value in the field
Yes/No Column Check Mark
Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/yesno-checkmark
So helpful! Thanks for putting this together.
Perfect