我正在尝试将这两个 JSON 效果组合到同一个共享点列上，但我似乎无法找到这样做的方法 - 只有一个。
第一个效果是自定义悬停卡（可在以下位置公开获得：https://github.com/pnp/List-Formatting/tree/master/column-samples/custom-hover-card）。
另一个是简单的Status issue pill（也可以公开获取：https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-issuestatus-pill）
我试过堆叠它们，但似乎没有任何结果。
我的悬停：
{
"$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": {
"border-style": "solid",
"border-width": "thin",
"border-color": "#102c3c",
"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": "PTR Progress"
}
]
},
{
"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": "Open",
"attributes": {
"class": "='ms-fontColor-' + if([$StatusCode] > 0, 'green', 'green')"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"border-left-style": "solid",
"border-left-color": "=if([$StatusCode] > 0,'green','neutralSecondaryAlt')",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' + if([$StatusCode] > 0, 'black', 'black')"
},
"txtContent": "=getDate([$PrimaryDate]) + ' ' + if(getMonth([$PrimaryDate])==0,'Jan',if(getMonth([$PrimaryDate])==1,'Feb',if(getMonth([$PrimaryDate])==2,'Mar',if(getMonth([$PrimaryDate])==3,'Apr',if(getMonth([$PrimaryDate])==4,'May',if(getMonth([$PrimaryDate])==5,'Jun',if(getMonth([$PrimaryDate])==6,'Jul',if(getMonth([$PrimaryDate])==7,'Aug',if(getMonth([$PrimaryDate])==8,'Sept',if(getMonth([$PrimaryDate])==9,'Oct',if(getMonth([$PrimaryDate])==10,'Nov',if(getMonth([$PrimaryDate])==11,'Dec',''))))))))))) + ' ' + getYear([$PrimaryDate])"
}
]
},
{
"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": "Primary",
"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": "=getDate([$PrimaryDate]) + ' ' + if(getMonth([$PrimaryDate])==0,'Jan',if(getMonth([$PrimaryDate])==1,'Feb',if(getMonth([$PrimaryDate])==2,'Mar',if(getMonth([$PrimaryDate])==3,'Apr',if(getMonth([$PrimaryDate])==4,'May',if(getMonth([$PrimaryDate])==5,'Jun',if(getMonth([$PrimaryDate])==6,'Jul',if(getMonth([$PrimaryDate])==7,'Aug',if(getMonth([$PrimaryDate])==8,'Sept',if(getMonth([$PrimaryDate])==9,'Oct',if(getMonth([$PrimaryDate])==10,'Nov',if(getMonth([$PrimaryDate])==11,'Dec',''))))))))))) + ' ' + getYear([$PrimaryDate])"
}
]
},
{
"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": "Secondary",
"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": "=getDate([$SecondaryDate]) + ' ' + if(getMonth([$SecondaryDate])==0,'Jan',if(getMonth([$SecondaryDate])==1,'Feb',if(getMonth([$SecondaryDate])==2,'Mar',if(getMonth([$SecondaryDate])==3,'Apr',if(getMonth([$SecondaryDate])==4,'May',if(getMonth([$SecondaryDate])==5,'Jun',if(getMonth([$SecondaryDate])==6,'Jul',if(getMonth([$SecondaryDate])==7,'Aug',if(getMonth([$SecondaryDate])==8,'Sept',if(getMonth([$SecondaryDate])==9,'Oct',if(getMonth([$SecondaryDate])==10,'Nov',if(getMonth([$SecondaryDate])==11,'Dec',''))))))))))) + ' ' + getYear([$SecondaryDate])"
}
]
},
{
"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": "Final",
"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": "=getDate([$FinalDate]) + ' ' + if(getMonth([$FinalDate])==0,'Jan',if(getMonth([$FinalDate])==1,'Feb',if(getMonth([$FinalDate])==2,'Mar',if(getMonth([$FinalDate])==3,'Apr',if(getMonth([$FinalDate])==4,'May',if(getMonth([$FinalDate])==5,'Jun',if(getMonth([$FinalDate])==6,'Jul',if(getMonth([$FinalDate])==7,'Aug',if(getMonth([$FinalDate])==8,'Sept',if(getMonth([$FinalDate])==9,'Oct',if(getMonth([$FinalDate])==10,'Nov',if(getMonth([$FinalDate])==11,'Dec',''))))))))))) + ' ' + getYear([$FinalDate])"
}
]
},
{
"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": "Closed",
"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": "=getDate([$ClosedDate]) + ' ' + if(getMonth([$ClosedDate])==0,'Jan',if(getMonth([$ClosedDate])==1,'Feb',if(getMonth([$ClosedDate])==2,'Mar',if(getMonth([$ClosedDate])==3,'Apr',if(getMonth([$ClosedDate])==4,'May',if(getMonth([$ClosedDate])==5,'Jun',if(getMonth([$ClosedDate])==6,'Jul',if(getMonth([$ClosedDate])==7,'Aug',if(getMonth([$ClosedDate])==8,'Sept',if(getMonth([$ClosedDate])==9,'Oct',if(getMonth([$ClosedDate])==10,'Nov',if(getMonth([$ClosedDate])==11,'Dec',''))))))))))) + ' ' + getYear([$ClosedDate])"
}
]
}
]
}
]
}
]
},
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true
}
}
我的药丸：
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"flex-wrap": "wrap",
"display": "flex"
},
"children": [
{
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"overflow": "hidden",
"text-overflow": "ellipsis",
"display": "flex",
"border-radius": "16px",
"height": "24px",
"align-items": "center",
"white-space": "nowrap",
"margin": "4px 4px 4px 4px"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Open"
]
},
"sp-css-backgroundColor-BgCoral sp-field-fontSizeSmall sp-css-color-CoralFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Primary"
]
},
"sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Secondary"
]
},
"sp-css-backgroundColor-BgCornflowerBlue sp-field-fontSizeSmall sp-css-color-CornflowerBlueFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
""
]
},
"",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Final"
]
},
"sp-css-backgroundColor-BgCyan sp-css-borderColor-CyanFont sp-field-fontSizeSmall sp-css-color-CyanFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Closed"
]
},
"sp-css-backgroundColor-BgMintGreen sp-field-fontSizeSmall sp-css-color-MintGreenFont",
"sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
]
}
]
}
]
}
]
}
]
}
]
}
},
"txtContent": "@currentField"
}
]
}```