Open Source Repository – SharePoint Online Modern List Column Formatting Samples

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

screenshot of sample

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

screenshot of the sample

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

screenshot of the sample

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/date-range-rag

Centered Content

screenshot of the sample

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

Turn FileRef field into clickable thumbnail hyperlink

screenshot of the sample

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

Turn field values into hyperlinks

screenshot of the sample

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

Project Indicator Formats

Color status field

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

screenshot of the sample

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

screenshot of the sample

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

screenshot of the sample

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

SVG icons

screenshot of the sample

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

Display Twitter profile pics using Twitter handles

screenshot of the sample

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

Conditional formatting based on a number range

screenshot of the sample

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

screenshot of the Simple Data Bar

screenshot of the 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

screenshot of the sample

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

Smiley faces for good quiz results

screenshot of the sample

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

Show trending up/trending down icons

screenshot of the sample

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

Highlight the current user

screenshot of the sample

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

Person Mail To Link

screenshot of the sample

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

Display a person’s profile picture in a circle

screenshot of the sample

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

Display a picture column as a circle

screenshot of the sample

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

screenshot of the sample

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

screenshot of the sample

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

Traffic Light (Red-Yellow-Green) Status Indicator

screenshot of the sample

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/text-ryg-status-indicator

Strikethrough on Completion

screenshot of the sample

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.

screenshot of the sample

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

Yes/No Checkbox

screenshot of the sample

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

screenshot of the sample

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

Yes/No Column Check Mark

screenshot of the sample

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

2 thoughts on “Open Source Repository – SharePoint Online Modern List Column Formatting Samples

Leave a Reply

Your email address will not be published. Required fields are marked *