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

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.

This post is focused on modern SharePoint Online List Formatting –> Form 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.

Event Itinerary Header

Reference: https://github.com/pnp/List-Formatting/tree/master/form-samples/event-itinerary-header

Status Header and Footer

Wave header and footer

Reference: https://github.com/pnp/List-Formatting/tree/master/form-samples/wave-header-footer

Workflow Progress Header

Reference: https://github.com/pnp/List-Formatting/tree/master/form-samples/workflow-progress-header