SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Likes Count Row Class

This sample demonstrates how to change the background color of a row depending on the number of likes.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Oct 20, 2021

Likes Count Row Class
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalRowClass": "=if([$LikesCount] >= 2 , 'ms-bgColor-themeLighter' , '')"
}
View sourceLink to this definitionlikes-count-rowclass.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /additionalRowClass must be object

From the contributor

How to use this sample

Summary

This sample demonstrates how to change the background color of a row depending on the number of likes. In this case, the background color of the row changes when the number of likes is 2 or more.

screenshot of the sample

Prerequisites

Enabling the ratings feature

The ratings feature is available by default in the team site, but not in the communication site. If you want to use the ratings feature in the list of communication sites, you need to enable the feature GUID 915c240e-a6cc-49b8-8b2c-0bff8b553ed3. The following is an example of how to enable it using PnP PowerShell.

$targetURL = "https://<tenent name>.sharepoint.com/sites/<site name>"
Connect-PnPOnline -Url $targetURL -Interactive
Enable-PnPFeature –identity 915c240e-a6cc-49b8-8b2c-0bff8b553ed3 -Scope site
Disconnect-PnPOnline

Add a ratings feature to the list

  1. Click gear icon

  2. Click List Settings

  3. Under General Settings, click Rating settings.

    screenshot of how to add the ratings feature

  4. Under Allow items in this list to be rated?, click Yes.

  5. Under Which voting/rating experience would you like to enable for this list?, click Likes.

  6. Click OK.

    screenshot of how to add the ratings feature

View requirements

  • Add a ratings feature to the list and display a like button.

Sample

Solution Author(s)
likes-count-rowclass.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 October 20, 2021 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes