I borrowed from Microsoft’s documentation on conditional column formatting recently to modify a modern experience list in SharePoint 2019. This also works for SharePoint Online/O365, but will not work in classic experiences [or pre-2019 server versions]. I modified Microsoft’s example on conditional background colors for a numeric range and created a similar conditional column formatting result for text values.
In this example, I have a list for upcoming training opportunities. There’s a column named “Level” which is a choice field of either Beginner, Intermediate, or Advanced. The JSON code at the bottom of this post changes the column’s background color value to green, yellow, or red respectively based on the level selection. Here’s a demonstration of the result:
You could modify this code to suit your own column’s values/options, then paste it into the Column Formatting section of that column’s settings [List settings > Select column from Columns section]. Do not change @currentField in the JSON code – that’s just a reference to whichever column you add it to and doesn’t need to be your column’s name.
I am trying to change the color of a column header in a view on a Sharepoint Online list, ideally using the JSON schema that Microsoft provides for formatting views.
I have found Microsoft's documentation which outlines a number of interesting examples, for example I can hide the column header altogether with "hideColumnHeader": true or I can change the color of group header, but there does not seem to be any documentation of how to change the background color for the column header itself.
//docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
What I'm trying to achieve is very simple. I want to change the column header background color and font color, and have different colors for different columns like one can easily do in Excel:
Example of what I want the Sharepoint List view to look like
Is this possible using the JSON schema, or some other method if its not possible with JSON?
Thanks in advance for your time.
In order to differentiate various list items and highlight key items, there can be applied a method of SharePoint list color coding. Let’s see how it works in adding colored status dots to a SharePoint report list – we’ll perform that through designating a certain color to each status value.
Using a Calculated SharePoint List Column
- Open or create a SharePoint list that you want to add color coded status to, and go to List > List settings and click the Add a new column option.
- In the column creation tab, type in the name – Status indicator and select the column type – Choice. In the Choice option box enter the status colors – green, yeallow, red, and press OK.
- Next, create another column to display the color-coded dots. Enter the field name – Status, and select the field type – Calculated. We need to enter the formula here:
="
Copy and paste it into the corresponding field, and save the settings.
We have two new columns created for the report list. Next, we need to configure the list view to show the color coded status dots.
Adjusting SharePoint List View
- Navigate to the SharePoint page that displays the report list and open the Edit tab. Click on the arrow next to your List and click Edit Web Part.
- On the Edit Web Part, find the List View options and click Edit the Current View.
This opens up the Edit view options, where you need to add the newly created Status column to your SharePoint list by checking the corresponding box, and press OK. Also, you may rearrange the items to put the status column first.
- Find the Style options below and change the View Style from Default to Basic Table. Save the settings by pressing OK.
Now you can view the Status field on the page.
- Next, we are going to change the view for the Status color indicator. To perform that, we are going to add a Content editor to the bottom of the list.
Paste in the following code into a .txt file with e.g. Notepad application. Upload the file to your SharePoint Site Contents into Site Assets, and copy the shortcut.
Now we need to add this Content editor onto the list web part.
- Open the page Edit section and open the Insert tab. Select Media and Content > Content Editor and click Add. Now Content Editor is displayed on the page. Click on the right arrow next to Content Editor, and select Edit Web Part.
- Now we are going to connect the Content Editor with the txt file we created earlier. Paste in the file path into the box provided, and press OK.
Then save the edited page by clicking Save. Now you can see the status dots displayed in the page.
If you want to hide the Conten Editor from the page, go to Page > Edit > Edit Web Part > Appearance. Remove the title and enter a space symbol instead, then change the Column type to None, press OK. Save the page.
If you want to change the status of the report list item, click Edit Item in the drop-down menu, and change the Status Indicator color, press Save.
✓ USEFUL LINKS- How to Overlay SharePoint Calendars
- How to Color Code SharePoint Calendars
I've been trying to change the background color of a column in a Sharepoint list without full success.
I've been using below JSON code but what bugs me is that it don't fill out the whole cell.
{ "$schema": "//developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "div", "debugMode": true, "txtContent": "@currentField", "style": { "background-color": "pink" } }Current sharepoint list
Do you have any ideas on how to solve this?
Thanks