View formattingSharePoint Online

Highlight Selected List Item Rows

This sample highlights selected list item rows in list view.

Get this format View on GitHub

Shared by Ganesh Sanap
Updated Aug 24, 2022

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.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalRowClass": "=if(@isSelected, 'ms-bgColor-themePrimary', '')"
}

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

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This view formatting sample can be used to customize the list or compact list layout to highlight selected list item rows using @isSelected token and additionalRowClass property in view formatting.

Before/After applying view formatting:

screenshot of the sample

View requirements

View with List or Compact List layout.

Sample

Solution	Author(s)
highlight-selected-item-rows.json	Ganesh Sanap

Version history

Version	Date	Comments
1.0	August 24, 2022	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.