I just tried to adapt "Custom hover card on Lists" from Github to my Sharepoint online list but ran into a couple of issues (https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/custom-hover-cards).
Basically, I'd like to have this hover card list to work for my simple process:
- Start
- In progress
- Done
Is there anyone who could support me in this?
Thanks in advance & BR Henri
{
"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": "Tracking details"
}
]
},
{
"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": "Ready to be packed",
"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": "Packed",
"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": "Shipped",
"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": "In transit",
"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": "Delivered",
"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
}
}
Aucun commentaire:
Enregistrer un commentaire