Want to create a SharePoint list with dynamic formatting? In this tutorial, we will learn how to color code rows in your SharePoint list based on a choice column, using JSON.
Formatting views is a new feature in SharePoint, as of August 2019. Previously you could use JSON only to format individual columns.
Why use dynamic formatting in a SharePoint list? In my example, I have a team of project managers who are providing project information via a centralized list. We want our department heads to view project metrics in visual way.
With JSON, we will color rows dynamically, using a choice field's values to determine whether the row displays as green, yellow, orange, red, or white. When the choice field is updated, the row color updates automatically.
With View Formatting, the visual indicator is now no longer confined to one column, and no matter how wide your list view is, you can always tell the status of the items by the color of the row. Decision makers can quickly scan a list, easily spotting projects that are experiencing issues, no matter how the list is sorted or filtered.
To follow along with this guide:
Full Control permission level: You should have Full Control (or Owner level) permission for the list.
Choice column: The list should have a choice column that you will to use to determine row formatting. In our example, we are using a choice column called Status with five options: No issues, Warning, In Review, At Risk, Inactive.
Modern Experience: The list must be in the Modern Experience. JSON formatting does not display in Classic Experience.
Now that your list is ready, let's format our list view.
STEP 1: Navigate to the list.
STEP 2: Create a new choice column. This is the column we will use to dynamically determine the formatting of the list view.
STEP 3: Add options to the choice column. In my example, my choice column has 5 options. The JSON code provided below supports 5 color customizations: white, red, orange, yellow, green.
STEP 4: Navigate to the view you wish to format in the list. You may want to create a new view to test. To create a new view, click the views drop down, select Save As, and give your view a new name. NOTE: the choice column you are using in the JSON must appear in the view in order to trigger the JSON formatting.
STEP 5: Format the view. Under the views dropdown, select Format this View.
STEP 6: Customize the JSON code. Replace the word "Status" in the code below with your choice column name, if necessary. Replace the choice options (colored green in the code) with your choice options, if necessary.
Note: JSON is case sensitive. Your choice options in the code must match the choice options in your list exactly.
Note: JSON requires the SharePoint column name. If there are spaces or special characters in the name, or if the column name is changed, you may need to retrieve the SharePoint column name. To find the SharePoint column name, navigate to List Settings, scroll down to the columns section, click on the column name, and look at the URL. The column name appears at the end of the URL.
STEP 7: Paste the JSON code. This is where we insert the JSON code. JSON must be formatted exactly right. An extra comma, or parenthesis, or other typo can keep the code from working.
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "=if([$Status] == 'No Issues', 'sp-field-severity--good', if([$Status] == 'Inactive', 'sp-field-severity--low' ,if([$Status] == 'Warning','sp-field-severity--warning', if([$Status] == 'In Review','sp-field-severity--severeWarning', if([$Status] == 'At Risk','sp-field-severity--blocked', '')))))"
}
STEP 8: Save your formatting code. Click save. If your view does not update immediately, try refreshing the page.