Forum Discussion
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?
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
- michalkornetIron 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_365Copper 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_365Copper 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!