Open Source Repository – SharePoint Online Modern List Column Formatting Samples

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/currency-symbol-concatenation

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-centered-content

Turn FileRef field into clickable thumbnail hyperlink

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-hyperlink-thumbnail

Turn field values into hyperlinks

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-hyperlink-values

Project Indicator Formats

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-project-management

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/generic-svgicon-format

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-conditional-format

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-quiz-smiley-face

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/person-currentuser-format

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/person-roundimage-format

Display a picture column as a circle

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/picture-roundimage-format

Conditional formatting based on the value in a text or choice field

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/text-conditional-format

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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/text-ryg-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

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/yesno-checkmark-format

Yes/No Column Check Mark

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/yesno-checkmark