tecchan1107
commented
6 days ago Hi @chasquad .
I tried to make it, is it what you imagined?
Sample Code
``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 310, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-defaultClickButton" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "style": { "width": "95%", "display": "flex", "flex-direction": "row-reverse", "font-size": "28px", "margin-top": "5px" }, "attributes": { "iconName": "Trophy2Solid", "class": "ms-fontColor-themePrimary" } }, { "elmType": "div", "attributes": { "class": "sp-card-previewColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Author.DisplayName]" }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([$Author]) == 0, '–', '')" }, { "forEach": "personIterator in [$Author]", "elmType": "a", "attributes": { "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')" }, "style": { "display": "=if(loopIndex('personIterator') >= 5, 'none', '')" }, "defaultHoverField": "[$personIterator]", "children": [ { "elmType": "img", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" }, "style": { "display": "=if(length([$Author]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([$Author]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [$Author]", "elmType": "div", "attributes": { "class": "sp-card-userContainer sp-card-userCustomCard" }, "style": { "display": "=if(loopIndex('personIterator') < 4, 'none', '')" }, "children": [ { "elmType": "img", "defaultHoverField": "[$personIterator]", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" } } ] } ] }, "openOnEvent": "hover" }, "children": [ { "elmType": "span", "txtContent": "='+' + toString(length([$Author]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle sp-card-keyboard-focusable" }, "style": { "display": "=if(length([$Author]) == 1, '', 'none')" }, "defaultHoverField": "[$personIterator]", "txtContent": "[$Author.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-previewColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Nominee_x0028_s_x0029_.DisplayName]" }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([$Nominee_x0028_s_x0029_]) == 0, '–', '')" }, { "forEach": "personIterator in [$Nominee_x0028_s_x0029_]", "elmType": "a", "attributes": { "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')" }, "style": { "display": "=if(loopIndex('personIterator') >= 5, 'none', '')" }, "defaultHoverField": "[$personIterator]", "children": [ { "elmType": "img", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" }, "style": { "display": "=if(length([$Nominee_x0028_s_x0029_]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([$Nominee_x0028_s_x0029_]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [$Nominee_x0028_s_x0029_]", "elmType": "div", "attributes": { "class": "sp-card-userContainer sp-card-userCustomCard" }, "style": { "display": "=if(loopIndex('personIterator') < 4, 'none', '')" }, "children": [ { "elmType": "img", "defaultHoverField": "[$personIterator]", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" } } ] } ] }, "openOnEvent": "hover" }, "children": [ { "elmType": "span", "txtContent": "='+' + toString(length([$Nominee_x0028_s_x0029_]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle sp-card-keyboard-focusable" }, "style": { "display": "=if(length([$Nominee_x0028_s_x0029_]) == 1, '', 'none')" }, "defaultHoverField": "[$personIterator]", "txtContent": "[$Nominee_x0028_s_x0029_.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!ReasonforNomination.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$ReasonforNomination]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$ReasonforNomination] == '', '–', [$ReasonforNomination])", "style": { "-webkit-line-clamp": "2", "height": "40px" } } ] }, { "elmType": "div", "style": { "width": "95%", "display": "flex", "flex-direction": "row-reverse" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "align-items": "center", "cursor": "pointer", "padding": "3px 5px 3px 5px", "border-radius": "5px", "z-index": "1" }, "attributes": { "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover ms-bgColor-themeLighter--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-themePrimary" }, "children": [ { "elmType": "div", "style": { "margin-right": "5px" }, "attributes": { "iconName": "HeartFill" } }, { "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 , 'HeartFill' , 'Heart' )" } }, { "elmType": "div", "txtContent": "=length([$Likes])" } ] } ] } ] } ] } } ```⚠️ In my environment, Likes were not reflected without a screen refresh. Also, the form update was not reflected without a screen refresh. This is probably a temporary bug in Microsoft Lists. (However, I am not a Microsoft employee, so I don't know exactly if it is a bug or not.)
Previously, Likes were reflected immediately without a screen refresh, as in the following sample video.
https://github.com/pnp/List-Formatting/tree/master/column-samples/multi-person-reaction
chasquad
Sample (which sample are you talking about)
Praise Cards https://github.com/pnp/List-Formatting/blob/master/view-samples/praise-cards/praise-cards.json#L194
Question (the more details, the better)
I like the way that the Praise Cards sample provides a Like button at the bottom right and the trophy image in the top right of the cards. However, since we already have a SharePoint list for recognition, I simply want to add those 2 elements to our current Gallery view cards and that is where I'm struggling. We have one Author (Created By) and the option to add multiple Nominees, so our cards look like this:
And like I said, I don't want to change the cards other than to add the award trophy in the top right of the cards and to add the Like button in the bottom right of the cards.
Here is the json code for the cards now:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 239, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-defaultClickButton" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-previewColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Author.DisplayName]" }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([$Author]) == 0, '–', '')" }, { "forEach": "personIterator in [$Author]", "elmType": "a", "attributes": { "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')" }, "style": { "display": "=if(loopIndex('personIterator') >= 5, 'none', '')" }, "defaultHoverField": "[$personIterator]", "children": [ { "elmType": "img", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" }, "style": { "display": "=if(length([$Author]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([$Author]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [$Author]", "elmType": "div", "attributes": { "class": "sp-card-userContainer sp-card-userCustomCard" }, "style": { "display": "=if(loopIndex('personIterator') < 4, 'none', '')" }, "children": [ { "elmType": "img", "defaultHoverField": "[$personIterator]", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" } } ] } ] }, "openOnEvent": "hover" }, "children": [ { "elmType": "span", "txtContent": "='+' + toString(length([$Author]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle sp-card-keyboard-focusable" }, "style": { "display": "=if(length([$Author]) == 1, '', 'none')" }, "defaultHoverField": "[$personIterator]", "txtContent": "[$Author.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-previewColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Nominee_x0028_sx0029.DisplayName]" }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "p", "attributes": { "class": "sp-card-userEmptyText" }, "txtContent": "=if(length([$Nominee_x0028_sx0029]) == 0, '–', '')" }, { "forEach": "personIterator in [$Nominee_x0028_sx0029]", "elmType": "a", "attributes": { "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')" }, "style": { "display": "=if(loopIndex('personIterator') >= 5, 'none', '')" }, "defaultHoverField": "[$personIterator]", "children": [ { "elmType": "img", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" }, "style": { "display": "=if(length([$Nominee_x0028_sx0029]) > 5 && loopIndex('personIterator') >= 4, 'none', '')" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers" }, "style": { "display": "=if(length([$Nominee_x0028_sx0029]) > 5 && loopIndex('personIterator') == 4, '', 'none')" }, "customCardProps": { "formatter": { "elmType": "div", "attributes": { "class": "sp-card-personCallout" }, "children": [ { "forEach": "personIterator in [$Nominee_x0028_sx0029]", "elmType": "div", "attributes": { "class": "sp-card-userContainer sp-card-userCustomCard" }, "style": { "display": "=if(loopIndex('personIterator') < 4, 'none', '')" }, "children": [ { "elmType": "img", "defaultHoverField": "[$personIterator]", "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]", "class": "sp-card-userThumbnail" } } ] } ] }, "openOnEvent": "hover" }, "children": [ { "elmType": "span", "txtContent": "='+' + toString(length([$Nominee_x0028_sx0029]) - (4))" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-userTitle sp-card-keyboard-focusable" }, "style": { "display": "=if(length([$Nominee_x0028_sx0029]) == 1, '', 'none')" }, "defaultHoverField": "[$personIterator]", "txtContent": "[$Nominee_x0028_sx0029.title]" } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!ReasonforNomination.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$ReasonforNomination]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$ReasonforNomination] == '', '–', [$ReasonforNomination])", "style": { "-webkit-line-clamp": "2", "height": "40px" } } ] } ] } ] } }
I just would like to know how to incorporate the 2 elements from the Praise Cards sample into my code. I added the Icon column (single line of text with a default value of Trophy2Solid), and the Likes column (multiple people field) to the list already.
Any help would be appreciated. Thanks so much!