Custom JSON formatting for Document Library

Question

I've been having a really hard time getting this JSON to count likes upwards for every time someone clicks on the picture preview..

After the picture has one like, any further likes increase it by 10.

Any help would be greatly appreciated!

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json","height": 283,"width": 254,"hideSelection": true,"fillHorizontally": true,"formatter": {"elmType": "div","attributes": {"class": "sp-card-container"},"children": [{"elmType": "div","style": {"font-size": "18px","padding": "2px 12px","cursor": "pointer"},"attributes": {"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer","title": "=if(indexOf([$LikedBy.email], @me) > -1 , 'Unlike', 'Like')"},"customRowAction": {"action": "setValue","actionInput": {"LikesCount": "=if(indexOf([$LikedBy.email], @me) > -1, [$LikesCount] - 1, [$LikesCount] + 1)","LikedBy": "=if(indexOf([$LikedBy.email], @me) > -1, removeFrom([$LikedBy.email], @me), appendTo([$LikedBy.email], @me))"}},"children": [{"elmType": "div","attributes": {"class": "sp-card-previewColumnContainer"},"children": [{"elmType": "div","attributes": {"class": "sp-card-imageContainer"},"children": [{"elmType": "filepreview","attributes": {"src": "@thumbnail.512x432"},"style": {"height": "200px"},"filePreviewProps": {"fileTypeIconClass": "sp-fileTypeIcon-cardDesigner","brandTypeIconClass": "sp-brandTypeIcon-cardDesigner"}}]}]},{"elmType": "div","attributes": {"class": "sp-card-displayColumnContainer"},"children": [{"elmType": "p","attributes": {"title": "[$LikesCount]","class": "ms-fontColor-neutralPrimary sp-card-content sp-card-likes"},"children": [{"elmType": "span","attributes": {"class": "sp-card-heartIcon","iconName": "=if (length(removeFrom([$LikedBy.email],@me)) == length([$LikedBy]), 'Heart', 'HeartFill')"}},{"elmType": "span","txtContent": "=if ([$LikesCount] == '', 0, [$LikesCount])"}]}]},{"elmType": "div","attributes": {"class": "sp-card-lastTextColumnContainer"},"children": [{"elmType": "div","attributes": {"class": "ms-fontColor-neutralPrimary sp-card-userContent ","title": "[$LikedBy.title]"},"children": [{"elmType": "p","txtContent": "=if(length([$LikedBy]) == 0, '–', '')"},{"forEach": "personIterator in [$LikedBy]","elmType": "p","defaultHoverField": "[$personIterator]","style": {"display": "=if(loopIndex('personIterator') >= 1, 'none', '')"},"txtContent": "[$personIterator.title]"},{"elmType": "p","txtContent": "=if(length([$LikedBy]) > 1, ',  +' + (length([$LikedBy]) - 1) , '')"}]}]}]}]}}

Answer 1

Figured it out, found some code that was trying to accomplish the same thing, theirs works.

FYI - This will change a document library to look like a picture gallery, with the ability to click on the picture to "Like" it.

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json","height": 283,"width": 254,"hideSelection": true,"fillHorizontally": true,"formatter": {"elmType": "div","attributes": {"class": "sp-card-container"},"children": [{"elmType": "div","style": {"font-size": "18px","padding": "2px 12px","cursor": "pointer"},"attributes": {"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer","title": "=if(indexOf([$LikedBy.email], @me) > -1 , 'Unlike', 'Like')"},"customRowAction": {"action": "setValue","actionInput": {"LikedBy": "=if(indexOf([$LikedBy.email] , @me) > -1, removeFrom([$LikedBy.email] , @me), appendTo([$LikedBy.email] , @me))","LikesCount": "=if(indexOf([$LikedBy.email] , @me) >= 0, toString(Number([$LikesCount]) - Number(1)), toString(Number([$LikesCount]) + Number(1)))"}},"children": [{"elmType": "div","attributes": {"class": "sp-card-previewColumnContainer"},"children": [{"elmType": "div","attributes": {"class": "sp-card-imageContainer"},"children": [{"elmType": "filepreview","attributes": {"src": "@thumbnail.512x432"},"style": {"height": "200px"},"filePreviewProps": {"fileTypeIconClass": "sp-fileTypeIcon-cardDesigner","brandTypeIconClass": "sp-brandTypeIcon-cardDesigner"}}]}]},{"elmType": "div","attributes": {"class": "sp-card-displayColumnContainer"},"children": [{"elmType": "p","attributes": {"title": "[$LikesCount]","class": "ms-fontColor-neutralPrimary sp-card-content sp-card-likes"},"children": [{"elmType": "span","attributes": {"class": "sp-card-heartIcon","iconName": "=if (length(removeFrom([$LikedBy.email],@me)) == length([$LikedBy]), 'Heart', 'HeartFill')"}},{"elmType": "span","txtContent": "=if ([$LikesCount] == '', 0, [$LikesCount])"}]}]},{"elmType": "div","attributes": {"class": "sp-card-lastTextColumnContainer"},"children": [{"elmType": "div","attributes": {"class": "ms-fontColor-neutralPrimary sp-card-userContent ","title": "[$LikedBy.title]"},"children": [{"elmType": "p","txtContent": "=if(length([$LikedBy]) == 0, '–', '')"},{"forEach": "personIterator in [$LikedBy]","elmType": "p","defaultHoverField": "[$personIterator]","style": {"display": "=if(loopIndex('personIterator') >= 1, 'none', '')"},"txtContent": "[$personIterator.title]"},{"elmType": "p","txtContent": "=if(length([$LikedBy]) > 1, ', +' + (length([$LikedBy]) - 1) , '')"}]}]}]}]}}

Answer 2

Dear Evaneezy ,

Good day!

Thanks for your feedback.

I’m glad to hear that you fixed this. I will mark your reply as an answer later. I believe this can help more users with the same situation.

Sincerely,

Tin | Microsoft Community Moderator