Custom Hover Card - problem, please help

[JanSpotak]

Hi, thanks for all fantastic ideas and tips. I was trying to implement the Custom Hover Card https://github.com/pnp/List-Formatting/tree/master/column-samples/custom-hover-cards. It worked fine, the problem is it doesn't feed in the changes and dates - so it always stays on the same - 1st stage of tracking . Do not know what I've missed to created the right connection. Any help would be useful. Thanks a lot! Jan

Here is my code: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "font-size": "12px" }, "txtContent": "[$Status]", "customCardProps": { "formatter": { "elmType": "div", "children": [ { "elmType": "div", "children": [ { "elmType": "div", "style": { "padding": "15px 45px 15px 15px" }, "children": [ { "elmType": "div", "children": [ { "elmType": "div", "style": { "font-size": "18px", "font-weight": "550", "text-align": "center", "margin-bottom": "10px" }, "txtContent": "Contract Process Tracking" } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "padding-left": "15px" }, "txtContent": " ", "attributes": { "iconName": "StatusCircleCheckmark", "class": "ms-fontColor-green" } }, { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "margin-left": "-16px" }, "txtContent": " ", "attributes": { "iconName": "CircleRing", "class": "ms-fontColor-green" } }, { "elmType": "span", "style": { "font-size": "=if([$StatusCode] > 0, '16px', ''", "font-weight": "=if([$StatusCode] > 0, '600', ''", "padding-left": "9px" }, "txtContent": "Initial documents sent", "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'green', 'green')" } }, { "elmType": "div", "style": { "font-size": "10px", "font-weight": "600", "text-align": "center" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'black', 'black')" } } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "border-left-style": "solid", "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')", "text-align": "center", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "padding-left": "15px" }, "txtContent": " ", "attributes": { "iconName": "=if([$StatusCode] > 0, 'StatusCircleCheckmark', 'CircleRing')", "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "margin-left": "-16px" }, "txtContent": " ", "attributes": { "iconName": "CircleRing", "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "=if([$StatusCode] > 0, '16px', ''", "font-weight": "=if([$StatusCode] > 0, '600', ''", "padding-left": "9px" }, "txtContent": "Basis for contract to HR", "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } }, { "elmType": "div", "style": { "font-size": "10px", "font-weight": "600", "text-align": "center", "border-left-style": "solid", "border-left-color": "=if([$StatusCode] > 1,'green','neutralSecondaryAlt')", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 0, 'black', 'black')" }, "txtContent": "[$PackedDate]" } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "border-left-style": "solid", "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')" } } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "padding-left": "15px" }, "txtContent": " ", "attributes": { "iconName": "=if([$StatusCode] > 1, 'StatusCircleCheckmark', 'CircleRing')", "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "margin-left": "-16px" }, "txtContent": " ", "attributes": { "iconName": "CircleRing", "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "=if([$StatusCode] > 1, '16px', ''", "font-weight": "=if([$StatusCode] > 1, '600', ''", "padding-left": "9px" }, "txtContent": "Contract created", "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')" } }, { "elmType": "div", "style": { "font-size": "10px", "font-weight": "600", "text-align": "center", "border-left-style": "solid", "border-left-color": "= if([$StatusCode] > 2,'green','neutralSecondaryAlt')", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 1, 'black', 'black')" }, "txtContent": "[$ShippedDate]" } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "border-left-style": "solid", "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')" } } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "padding-left": "15px" }, "txtContent": " ", "attributes": { "iconName": "=if([$StatusCode] > 2, 'StatusCircleCheckmark', 'CircleRing')", "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "margin-left": "-16px" }, "txtContent": " ", "attributes": { "iconName": "CircleRing", "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "=if([$StatusCode] > 2, '16px', ''", "font-weight": "=if([$StatusCode] > 2, '600', ''", "padding-left": "9px" }, "txtContent": "Contract signed", "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')" } }, { "elmType": "div", "style": { "font-size": "10px", "font-weight": "600", "text-align": "center", "border-left-style": "solid", "border-left-color": "=if([$StatusCode] > 3,'green','neutralSecondaryAlt')", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 2, 'black', 'black')" }, "txtContent": "[$InTransitStartDate]" } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "border-left-style": "solid", "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')" } } ] }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "padding-left": "15px" }, "txtContent": " ", "attributes": { "iconName": "=if([$StatusCode] > 3, 'StatusCircleCheckmark', 'CircleRing')", "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "16px", "font-weight": "600", "margin-left": "-16px" }, "txtContent": " ", "attributes": { "iconName": "CircleRing", "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')" } }, { "elmType": "span", "style": { "font-size": "=if([$StatusCode] > 3, '16px', ''", "font-weight": "=if([$StatusCode] > 3, '600', ''", "padding-left": "9px" }, "txtContent": "Contract sent out", "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 3,'green','neutralSecondaryAlt')" } }, { "elmType": "div", "style": { "font-size": "10px", "font-weight": "600", "text-align": "center", "margin-left": "21px" }, "attributes": { "class": "='ms-fontColor-' + if([$StatusCode] > 3, 'black', 'black')" }, "txtContent": "[$DeliveredDate]" } ] } ] } ] } ] }, "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true } }

[aaclage]

I believe could be related with [$StatusCode] > 0 did you try to include more conditions like [$StatusCode] > 1 or do you have other fields you could use for conditions?

[JT-BergerGroup]

I solved it by adding a StatusCode column and calculating the Code from the Status selected. I feel that StatusCode Column is missing in the description or how does everyone do it?