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.

There are three different formatting options, you can see examples of them in the links below where I’ve extracted the open source published Github samples in an easy to view visual manner:

1. Option 1 – Column Formatting – Examples
2. Option 2 – Row/View Formatting – Examples
3. Option 3 – Form Formatting – Examples

This post is focused on modern SharePoint Online List Formatting –> View and Row Formatting examples shown to you in a manner which you can easily pick and choose the option you like with the direct link to the Github sample so you can easily use in your own 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.

Alternating Rows

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/alternating-rowclass

Announcements style

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/announcements-format

Average Rating Row Class

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/average-rating-rowclass

Bar Graph format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/bar-graph-format

Birthday Row Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/birthday-format

Budget Tracker Sample

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/budget-tracker

Bulletin Board

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

Butterfly Chart Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/butterfly-chart-format

Conditional formatting based on a Choice field

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/choice-conditional-format

Chronological Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/chronological-format

Clipboard format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/clipboard-format

Column Graph format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/column-graph-format

Contact Card Row Format

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

ContentType Format

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

Current Year Row Class

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/current-year-rowclass

Current User Liked Row Class

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/currentuser-liked-rowclass

Custom Header

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-header-format

Custom hover card on List view

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-hover-cards

Conditional formatting based on date

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

Default hover card on doclib

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/default-hover-cards

Disable Selection

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/disable-selection

Document Library Items in Tiles Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/document-library-thumbnails

Document Library Sample

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

Elf Progress Board

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/elf-progress-board

Link collection using Emoji

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/emoji-link-tile-format

Employee Onboarding: Steps

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/employee-onboarding-steps

FAQ Accordion style

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/faq-accordion

Faq-Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/faq-format

Flashcards

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/flashcards

Numeric Average Comparison

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

Project Indicator – Risk Score Indicator

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

Project Indicator – RYG Status Format

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

Items in Tile Format

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

View to get the embed code for a video file

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/get-video-file-embed-code

Remove column name from group header

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-remove-column-name

Displays related status icon and background color in group header

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-status-icon-color

Display user’s picture in group header

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-user-picture

Display User Properties (Picture/Email/Job Title/Department) in the view group header

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-user-properties

Honeycomb Links

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/honeycomb-link

Horse Crests

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/horse-crests

Issue Tracker: Planner Cards

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/issue-tracker-planner-cards

Likes Count Row Class

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/likes-count-rowclass

London Underground Line Status

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/london-tube-status

Menu Tiles format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/menu-tiles-format

Message Chat Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/message-chat-format

Multi choice link row format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/multi-choice-link-format

Multi-line view rendering

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

Current User’s Rows

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

Out of office row format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/out-of-office-format

Current User’s Rows

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/person-currentuser-rowclass

Piano Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/piano-format

Planner Inspired Task Cards

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/planner-inspired-task-card

Product Catalog Sample

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/product-catalog

User Profile Card

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/profile-card

Project Gantt Chart View

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/project-gantt-chart

Project Health Dashboard

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/project-health-dashboard

Resource Catalog Sample

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

Retail Account Sample

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

Staff Rota Shifts View Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/rota-css-table

Small Card

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/small-card-format

Stat Comparison Chart

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/stat-comparison-chart

Testimonials

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/testimonials

Conditional formatting based on choice field

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

Items in Tile Layout with images and Formatting for Doclib

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/tile-layout-example-with-formatting

Items in Tile Layout with images

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/tile-layout-example-with-image

Timeline Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/timeline-format

Twitter Format

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/twitter-format

Video library for SharePoint and the new Stream in SharePoint

Reference: https://github.com/pnp/List-Formatting/tree/master/view-samples/videoLibrary