Back to column formats
Column formattingSharePoint Online

Like / Dislike - Unique reaction

This sample provides rounded images for each person in a multi-select person field.

Like / Dislike - Unique reaction formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

2 definitions

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.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "setValue",
    "actionInput": {
      "Like": "=removeFrom([$Like.email], @me)",
      "Dislike": "=if(indexOf([$Dislike.email] , @me) > -1 , removeFrom([$Dislike.email] , @me) , appendTo([$Dislike.email] , @me))"
    }
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
    "title": "I dislike this"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "=if(indexOf([$Dislike.email] , @me) > -1, 'DislikeSolid', 'Dislike')"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "=length([$Dislike])"
    }
  ]
}

From the contributor

How to use this sample

Summary

This sample demonstrates the usage of the setValue action and array manipulation using removeFrom and appendTo on multiple fields at the same time, by creating buttons to like/dislike an item and updating two multi person fields, one used to save the likes (people who liked), the other one to save the dislikes (people who disliked).

A user can only either like or dislike an item, if an item is liked by the current and is disliked, the like is undone and vice-versa (similar to what happens in YouTube).

screenshot of the sample

View requirements

Type Internal Name Required Additional Information
Person or Group (Multi) Like Yes Apply the template multi-person-unique-reaction.json on this field
Person or Group (Multi) Dislike Yes Apply the template multi-person-unique-reaction-dislike.json on this field

Sample

Solution Author(s)
multi-person-unique-reaction.json Michel Mendes
multi-person-unique-reaction-dislike.json Michel Mendes

Version history

Version Date Comments
1.0 November 27, 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.