Question Regarding View Sample - Announcements

[Nilles85]

I've an issue regarding the announcement view formatting sample: announcements

It seems that the ImgHover isn't working properly. I just got the little image icon. I've created an image column with the exact stated name. An uploaded some sample images. But no picture is shown once hovered of the card.

Also I have added some text field to jso which is rendered as a link.

here is my code:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideColumnHeader": true, "hideSelection": true, "rowFormatter": { "elmType": "div", "style": { "min-width": "12vw", "max-width": "15vw", "padding-bottom": "20px", "display": "=if([$RemoveDate] <= @now, 'none', '')", "white-space": "wrap", "overflow": "hidden", "text-overflow": "ellipsis", "flex-flow": "wrap" }, "customCardProps": { "formatter": { "elmType": "div", "children": [ { "elmType": "img", "attributes": { "src": "[$ImgHover]" } } ], "style": { "display": "=if([$ImgHover], '', 'none')", "height": "200px", "width": "200px", "cursor": "pointer", "font-size": "14px", "padding": "14px", "align-items": "stretch" } }, "openOnEvent": "hover", "directionalHint": "leftCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "white" } }, "children": [ { "elmType": "div", "style": { "border-radius": "8px", "box-shadow": "#00000022 0px 1.6px 3.6px 0px, #00000022 0px 0.3px 0.9px 0px", "display": "flex", "font-size": "0.85rem", "background-color": "=if([$TypeAnn] == 'Error', '#fdeded', if([$TypeAnn] == 'Success', '#edf7ed', if([$TypeAnn] == 'Warning', '#fff4e5', '#e5f6fd')))", "line-height": "1.43", "padding": "6px 16px", "flex-flow": "wrap" }, "children": [ { "elmType": "span", "attributes": { "iconName": "=if([$TypeAnn] == 'Error', 'ErrorBadge', if([$TypeAnn] == 'Success', 'Completed', if([$TypeAnn] == 'Warning', 'warning', 'info')))" }, "style": { "padding-right": "10px", "font-weight": "700", "flex-direction": "column", "flex-flow": "wrap", "white-space": "wrap", "text-overflow": "ellipsis", "color": "=if([$TypeAnn] == 'Error', '#ef5350', if([$TypeAnn] == 'Success', '#4caf50', if([$TypeAnn] == 'Warning', '#ff9800', '#03a9f4')))" } }, { "txtContent": "[$Title]", "elmType": "div", "style": { "font-weight": "700", "margin-bottom": "0.10em", "min-width": "50%", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis" } }, { "elmType": "div", "txtContent": "[$Description]", "style": { "padding-left": "26px", "display": "flex", "flex-flow": "wrap", "flex-direction": "column" } }, { "elmType": "a", "attributes": { "href": "[$Link]", "target": "_blank" }, "txtContent": "[$Link]", "style": { "padding-left": "26px" } } ] } ] } }

Could you please help me to get that hovering image to work properly? Also there seems to be an issue, that the formatting isn't loaded correctly from now and then. The link is missing sometimes. Be fair with me just started to get into all that stuff. ;)

[tecchan1107]

Hi @Nilles85 .

Is the ImgHover column type an image column? If it is an image column, try changing the src in line 24 to

"src": "=getThumbnailImage([$ImgHover], 200, 200)"

[tecchan1107]

I close this issue once as I have not received any replies.