Alternating Row Colors in a SharePoint Modern View

Alternating Row Colors in a SharePoint Modern View

Posted by Joel Hill | March 12, 2019 | Designing, Office 365, SharePoint
Alternating Row Colors in a SharePoint Modern View

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:

Alternating Row Colors in a SharePoint Modern View

Adding Alternating Row Colors in a SharePoint Modern View

In order to add the JSON code to SharePoint:

  1. First in SharePoint Online, navigate to the list you want to add alternating colors.
  2. Next, select the view you want to have alternative row colors.
  3. After your view has loaded, click the drop-down menu for the view selector and choose ‘Format Current View’
  4. 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:
JSON Code for Alternating Row Colors in the Modern SharePoint UI

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.

Related Blogs

Posted by microsoft-admin | March 6, 2019
A new set of updates rolled out for SharePoint earlier this year. Today we’ll take a look at 7 of the best new updates Microsoft has made available. 1. Custom Formatting Microsoft had previously introduced column formatting, which lets...
Posted by microsoft-admin | February 27, 2019
Microsoft Teams is a productivity hub. Office 365 Groups centralizes Microsoft memberships in one place. While both have services that overlap, they aren’t in competition with one another—rather, they’re complementary....
Posted by microsoft-admin | February 13, 2019
Office 365 and G Suite (formerly known as Google Apps for Work) are productivity tools for performing tasks in the cloud. Both let you create documents (Google Docs and Word),...