Forum Discussion

Maria_365's avatar
Maria_365
Copper Contributor
Mar 31, 2025
Solved

JSON Like Buttons in Microsoft Lists Gallery View Not Functioning

Hello,

I have setup a custom Gallery view in Microsoft Lists that has like buttons. The Like button functionality works for me (when clicked, the button fills in, updates to 1 and shows my user info when I hover over it, if I click again it unfills, updates to 0 and removes my profile from showing when I hover over it). This functionality is not working for another member of my team who has Owner/editor access. When he clicks the like button a pop up at the bottom of the screen says it updated, but nothing changes. He has tried different browsers and cleared his cache.

The JSON code is below:

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",

"width": 300,

"height": 450,

"hideSelection": true,

"formatter": {

"elmType": "div",

"style": {

"width": "95%",

"height": "95%",

"border": "1px solid",

"box-shadow": "0 3.2px 7.2px 0",

"border-radius": "6px",

"display": "flex",

"flex-direction": "column",

"justify-content": "center",

"cursor": "pointer",

"background-color": "=if([$PostType] == 'Activities', '#E3F7FF', if([$PostType] == 'Life Post', '#EAFBEB', if([$PostType] == 'Question and Answer', '#FBF7D3', '' )))"

},

"attributes": {

"class": "ms-fontColor-teal--hover"

},

"customRowAction": {

"action": "defaultClick"

},

"children": [

{

"elmType": "img",

"style": {

"margin-top": "8px",

"width": "55px",

"height": "55px",

"border-radius": "50%",

"border": "3px solid",

"border-color": "#D0D0D0"

},

"attributes": {

"src": "=getUserImage([$Author.email], 'S')",

"alt": "[$Author.title]",

"title": "[$Author.title]",

"class": "sp-card-userThumbnail"

},

"defaultHoverField": "[$AuthorIterator]"

},

{

"elmType": "div",

"style": {

"margin-top": "5px"

},

"attributes": {

"class": "sp-card-formatterRef"

},

"children": [

{

"columnFormatterReference": "[$PostType]"

}

]

},

{

"elmType": "div",

"style": {

"display": "flex",

"flex-direction": "column",

"width": "85%",

"height": "57%",

"overflow": "hidden",

"margin-top": "5px"

},

"children": [

{

"elmType": "div",

"txtContent": "[$Title]",

"style": {

"font-weight": "bold",

"font-size": "20px"

}

},

{

"elmType": "div",

"txtContent": "[$PostDescription]",

"style": {

"margin-top": "10px"

}

}

]

},

{

"elmType": "div",

"txtContent": "= 'From: ' + [$Author.title]",

"defaultHoverField": "[$Author]",

"style": {

"margin-top": "10px",

"width": "90%",

"display": "flex",

"flex-direction": "row-reverse",

"font-size": "12.5px",

"height": "25px",

"align-items": "center",

"overflow": "hidden"

},

"attributes": {

"class": "ms-fontColor-neutralSecondary"

}

},

{

"elmType": "div",

"style": {

"width": "90%",

"display": "flex",

"justify-content": "space-between",

"font-size": "17px",

"margin-top": "5px"

},

"children": [

{

"elmType": "div",

"style": {

"display": "flex",

"flex-direction": "row"

},

"children": [

{

"elmType": "div",

"style": {

"display": "flex",

"flex-direction": "row",

"align-items": "center",

"padding": "3px 5px 3px 5px",

"border-radius": "5px"

},

"attributes": {

"class": "ms-fontColor-teal ms-fontColor-black--hover ms-bgColor-tealLight--hover"

},

"customRowAction": {

"action": "setValue",

"actionInput": {

"Likes": "=if(indexOf([$Likes.email] , me) > -1 , removeFrom([$Likes.email] , me) , appendTo([$Likes.email] , me) )"

}

},

"customCardProps": {

"openOnEvent": "hover",

"directionalHint": "rightCenter",

"isBeakVisible": true,

"formatter": {

"elmType": "div",

"style": {

"max-height": "300px",

"padding": "5px 20px 5px 20px",

"display": "flex",

"flex-direction": "column"

},

"children": [

{

"elmType": "div",

"style": {

"padding": "10px",

"font-weight": "bold",

"font-size": "20px",

"display": "flex",

"align-items": "center",

"flex-direction": "row"

},

"attributes": {

"class": "ms-fontColor-teal"

},

"children": [

{

"elmType": "div",

"style": {

"margin-right": "5px"

},

"attributes": {

"iconName": "LikeSolid"

}

},

{

"elmType": "div",

"txtContent": "=length([$Likes])"

}

]

},

{

"elmType": "div",

"children": [

{

"forEach": "personIterator in [$Likes]",

"elmType": "div",

"style": {

"margin-bottom": "5px",

"display": "flex",

"align-items": "center"

},

"children": [

{

"elmType": "img",

"style": {

"width": "32px",

"height": "32px",

"border-radius": "50%",

"margin-right": "5px"

},

"attributes": {

"src": "=getUserImage([$personIterator.email], 'S')",

"title": "[$personIterator.title]"

}

},

{

"elmType": "span",

"txtContent": "[$personIterator.title]"

}

]

}

]

}

]

}

},

"children": [

{

"elmType": "div",

"style": {

"margin-right": "5px"

},

"attributes": {

"iconName": "=if(indexOf([$Likes.email] , me) > -1 , 'LikeSolid' , 'Like' )"

}

},

{

"elmType": "div",

"txtContent": "=length([$Likes])"

}

]

},

{

"elmType": "div",

"style": {

"display": "flex",

"flex-direction": "row",

"align-items": "center",

"cursor": "pointer",

"padding": "3px 5px 3px 5px",

"border-radius": "5px"

},

"attributes": {

"class": "ms-fontColor-teal ms-fontColor-black--hover ms-bgColor-tealLight--hover"

},

"children": [

{

"elmType": "div",

"style": {

"margin-right": "5px"

},

"attributes": {

"iconName": "Comment"

}

},

{

"elmType": "div",

"txtContent": "=if([$_CommentCount] == '' , 0 ,[$_CommentCount])"

}

]

}

]

}

]

}

]

}

}

Is there an issue with the code or is there another reason the functionality is working only for me?

  • Maria_365's avatar
    Maria_365
    Apr 07, 2025

    Yep, I had this selected as well. Co-worker confirmed that it is working for him now, so the issue resolved once I unchecked allow selection of groups and updated the list permissions to allow all users to modify. Thank you for your help and suggestions!

3 Replies

  • michalkornet's avatar
    michalkornet
    Iron Contributor

    Hi Maria_365, Check also the details of the Likes column. Is it a multi-person column? The code looks good, but let me know if the column type is ok, then I can check it further. 

     

    • Maria_365's avatar
      Maria_365
      Copper Contributor

      Yep, I had this selected as well. Co-worker confirmed that it is working for him now, so the issue resolved once I unchecked allow selection of groups and updated the list permissions to allow all users to modify. Thank you for your help and suggestions!

    • Maria_365's avatar
      Maria_365
      Copper Contributor

      Hi michalkornet yes, I have allow multiple selections selected. I also had allow selection of Groups, but I have unchecked this as it was only allowing a certain sharepoint group, instead of everyone, so I believe it is working now but am awaiting confirmation from my co-worker. Thank you!

Resources