Alternating row colors in SharePoint was one of the easier styling components of SharePoint. This held true until the SharePoint modern UI was introduced. People have been wondering how to do basic things such as having alternating row colors in a SharePoint modern view using JSON. Microsoft introduced styling views for the SharePoint modern UI in the middle of 2018, but not much more than simple guidance. Microsoft’s guidance on how to style views: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
Unfortunately, this does not address how to do alternating row colors. Below is the code snippet on how to achieve this leveraging your site theme colors. Other color schemes can be used using CSS with JSON, but the below will not only use your site theme, but it will also utilize lighter colors while hovering.
Alternating Row Colors in a SharePoint Modern View
The Results:
Adding Alternating Row Colors in a SharePoint Modern View
In order to add the JSON code to SharePoint:
- First in SharePoint Online, navigate to the list you want to add alternating colors.
- Next, select the view you want to have alternative row colors.
- After your view has loaded, click the drop-down menu for the view selector and choose ‘Format Current View’
- Finally, copy and paste the code above into the JSON code snippet and click save.
The code snippet should look like this on the right-hand side of your screen:
Contact Us
Microsoft is continually making updates to SharePoint Online and the entire Office 365 platform to add even more functionality and design. Many design formats that can be applied to a SharePoint view and specific columns. This includes conditional formatting based on other values, aligning columns and formatting text. Contact us if you would like to learn more about designing amazing and functional views within the SharePoint Modern UI.
1-800-682-0882 or submit an inquiry here to speak with our SharePoint specialists.
Learn More About eSoftware Associates
See how our custom SharePoint applications and design can make a difference for your organization.
