Open Source Repository – SharePoint Online Modern List View (or Row) Formatting Samples

Open Source Repository – SharePoint Online Modern List View (or Row) Formatting Samples

Microsoft and some amazing contributors have given us the ability to format our rows 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 the row.

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 View Selector –> “Format current view” 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/view-samples

I put this blog together as mostly a quick reference to myself so I can quickly choose a list view (or row format) user experience to give to my clients based on a sample image that the view format does.  Credit to the open source contributors for developing this JSON.

Bulletin Board

Light and Dark Themes

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/bulletin-board-format

Contact Card Row Format

Light and Dark Themes

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/contact-card-format

ContentType Format

Fruit

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/contenttype-format

Conditional formatting based on date

SharePoint list with view formatted with conditional formatting

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

Document Library Sample

Document Library Sample

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/document-library

Numeric Average Comparison

Screenshot Sample

Screenshot Sample

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-numeric-average-comparison

Project Indicator – Risk Score Indicator

Color-coded ranges

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-risk-score-format

Project Indicator – RYG Status Format

Color status field

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-ryg-status-format

Items in Tile Format

Color status field

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

Multi-line view rendering

SharePoint list with multi-line view customization

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/multi-line-view

Current User’s Rows

Light and Dark Themes

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

Resource Catalog Sample

Resource Catalog Sample

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/resource-catalog

Retail Account Sample

Retail Account Sample

Reference: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/retail-account

Conditional formatting based on choice field

Formatting based on text field

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

Leave a Reply

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