Custom Like/Dislike functionality using SharePoint list formatting

By using the setValue list formatting action, we are able to update field values as demonstrated in the earlier Quick Approvals sample. And the in addition to the possibility demonstrated on that sample, we can also use the new functions removeFrom and appendTo in combination with setValue, so we are able to remove and add people to a multi-person field.

After seeing great samples and ideas from community members (Tetsuya Kawahara – @techan_k and Dennis Goedegebuure – @expiscornovus), I have thought about another use case and built it. A like/dislike feature, similar to the one in YouTube, where you can only either like or dislike an item:

Logic behind the sample

When a user clicks the Like column button, if the user has not liked the item, the user is added to the Like column multi-person value, and removed from the Dislike column (if the item was disliked previously).

If the user had already liked an item, the icon is updated to highlight the like. And when clicked again, the like is undone. The reverse process also happens, if there was an existing like, the like is undone when disliking an item and also the icon is changed to highlight a dislike.

How to use the solution

Create two multi-person fields, one with the internal name ‘Like‘, and the other one with the internal name as ‘Dislike‘. Apply the following JSON templates on each:

Like field:

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

Dislike field:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/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])"        
      }
    ]
  }

Conclusion

With the new JSON setValue action and a few formulas we are able to create a custom like/dislike feature with unique reactions.

4 comments

  1. thank you so much for this! I was able to finally complete my video list project because of your tutorial, this also helped me understand better the setValue property.

Leave a Reply

Your email address will not be published. Required fields are marked *