如何解决调整Sharepoint列表上的自定义悬停卡
我刚刚尝试将Github上的“列表上的自定义悬停卡”调整为我的Sharepoint在线列表，但遇到了两个问题（https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/custom-hover-cards）。
基本上，我希望此悬浮卡列表可用于我的简单流程：
- 开始
- 进行中
- 完成
在此先感谢＆BR 亨利
{
"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","margin-left": "-16px"
},"attributes": {
"iconName": "CircleRing","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","text-align": "center"
},'black','black')"
}
}
]
},"style": {
"border-left-style": "solid","border-left-color": "='ms-borderColor-' + if([$StatusCode] > 0,'neutralSecondaryAlt')","margin-left": "21px"
},'neutralSecondaryAlt')"
}
}
]
},"attributes": {
"iconName": "=if([$StatusCode] > 0,'StatusCirclecheckmark','CircleRing')","class": "='ms-fontColor-' + if([$StatusCode] > 0,'neutralSecondaryAlt')"
}
},"txtContent": "Packed","border-left-style": "solid","border-left-color": "=if([$StatusCode] > 1,'black')"
},"txtContent": "[$PackedDate]"
}
]
},"border-left-color": "='ms-borderColor-' + if([$StatusCode] > 1,"attributes": {
"class": "='ms-fontColor-' + if([$StatusCode] > 1,"attributes": {
"iconName": "=if([$StatusCode] > 1,"class": "='ms-fontColor-' + if([$StatusCode] > 1,"style": {
"font-size": "=if([$StatusCode] > 1,"font-weight": "=if([$StatusCode] > 1,"txtContent": "Shipped","border-left-color": "= if([$StatusCode] > 2,"txtContent": "[$ShippedDate]"
}
]
},"border-left-color": "='ms-borderColor-' + if([$StatusCode] > 2,"attributes": {
"class": "='ms-fontColor-' + if([$StatusCode] > 2,"attributes": {
"iconName": "=if([$StatusCode] > 2,"class": "='ms-fontColor-' + if([$StatusCode] > 2,"style": {
"font-size": "=if([$StatusCode] > 2,"font-weight": "=if([$StatusCode] > 2,"txtContent": "In transit","border-left-color": "=if([$StatusCode] > 3,"txtContent": "[$InTransitStartDate]"
}
]
},"border-left-color": "='ms-borderColor-' + if([$StatusCode] > 3,"attributes": {
"class": "='ms-fontColor-' + if([$StatusCode] > 3,"attributes": {
"iconName": "=if([$StatusCode] > 3,"class": "='ms-fontColor-' + if([$StatusCode] > 3,"style": {
"font-size": "=if([$StatusCode] > 3,"font-weight": "=if([$StatusCode] > 3,"txtContent": "Delivered","txtContent": "[$DeliveredDate]"
}
]
}
]
}
]
}
]
},"openOnEvent": "hover","directionalHint": "bottomCenter","isBeakVisible": true
}
}
解决方法
为了完成悬停卡：
Step 1: You need to create a choice column named as "Status" with options as Start,In progress,Done
Step 2: You need to create a choice column named as "Status Code" with options as 1,2,3 where 1(represents Start),2 (In Progress),3 (Done). Set Number Accordingly.
以您的列格式添加以下JSON。以下JSON的结果：
现在，在您的列格式中添加以下JSON：
{ “ elmType”：“ div”， “样式”：{ “字体大小”：“ 12px” }， “ txtContent”：“ [$ Status]”， “ customCardProps”：{ “格式化程序”：{ “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ div”， “样式”：{ “ padding”：“ 15px 45px 15px 15px” }， “儿童”：[ { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ div”， “样式”：{ “ font-size”：“ 18px”， “字体粗细”：“ 550”， “ text-align”：“ center”， “ margin-bottom”：“ 10px” }， “ txtContent”：“状态跟踪” } ] }， { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ span”， “样式”：{ “ border-left-style”：“ solid”， “ border-left-color”：“ ='ms-borderColor-'+ if（[$ StatusCode]> 0，'green'，'neutralSecondaryAlt'）”， “ text-align”：“ center”， “左边距”：“ 21px” }， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 0，'green'，'neutralSecondaryAlt'）” } } ] }， { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ span”， “样式”：{ “ font-size”：“ 16px”， “字体粗细”：“ 600”， “向左填充”：“ 15px” }， “ txtContent”：“”， “属性”：{ “ iconName”：“ = if（[$ StatusCode]> 0，'StatusCircleCheckmark'，'CircleRing'）”， “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 0，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ span”， “样式”：{ “ font-size”：“ 16px”， “字体粗细”：“ 600”， “左边距”：“-16px” }， “ txtContent”：“”， “属性”：{ “ iconName”：“ CircleRing”， “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 0，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ span”， “样式”：{ “ font-size”：“ = if（[$ StatusCode]> 0，'16px'，''”， “ font-weight”：“ = if（[$ StatusCode]> 0，'600'，''”， “向左填充”：“ 9px” }， “ txtContent”：“开始”， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 0，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ div”， “样式”：{ “ font-size”：“ 10px”， “字体粗细”：“ 600”， “ text-align”：“ center”， “ border-left-style”：“ solid”， “ border-left-color”：“ = if（[$ StatusCode]> 1，'green'，'neutralSecondaryAlt'）”， “左边距”：“ 21px” }， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 0，'black'，'black'）” }， “ txtContent”：“ [$ PackedDate]” } ] }， { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ span”， “样式”：{ “ border-left-style”：“ solid”， “ border-left-color”：“ ='ms-borderColor-'+ if（[$ StatusCode]> 1，'green'，'neutralSecondaryAlt'）”， “左边距”：“ 21px” }， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 1，'green'，'neutralSecondaryAlt'）” } } ] }， { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ span”， “样式”：{ “ font-size”：“ 16px”， “字体粗细”：“ 600”， “向左填充”：“ 15px” }， “ txtContent”：“”， “属性”：{ “ iconName”：“ = if（[$ StatusCode]> 1，'StatusCircleCheckmark'，'CircleRing'）”， “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 1，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ span”， “样式”：{ “ font-size”：“ 16px”， “字体粗细”：“ 600”， “左边距”：“-16px” }， “ txtContent”：“”， “属性”：{ “ iconName”：“ CircleRing”， “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 1，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ span”， “样式”：{ “ font-size”：“ = if（[$ StatusCode]> 1，'16px'，''”， “ font-weight”：“ = if（[$ StatusCode]> 1，'600'，''”， “向左填充”：“ 9px” }， “ txtContent”：“进行中”， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 1，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ div”， “样式”：{ “ font-size”：“ 10px”， “字体粗细”：“ 600”， “ text-align”：“ center”， “ border-left-style”：“ solid”， “ border-left-color”：“ = if（[[$ StatusCode]> 2，'green'，'neutralSecondaryAlt'）”， “左边距”：“ 21px” }， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 1，'black'，'black'）” }， “ txtContent”：“ [$ ShippedDate]” } ] }， { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ span”， “样式”：{ “ border-left-style”：“ solid”， “ border-left-color”：“ ='ms-borderColor-'+ if（[$ StatusCode]> 2，'green'，'neutralSecondaryAlt'）”， “左边距”：“ 21px” }， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 2，'green'，'neutralSecondaryAlt'）” } } ] }， { “ elmType”：“ div”， “儿童”：[ { “ elmType”：“ span”， “样式”：{ “ font-size”：“ 16px”， “字体粗细”：“ 600”， “向左填充”：“ 15px” }， “ txtContent”：“”， “属性”：{ “ iconName”：“ = if（[$ StatusCode]> 2，'StatusCircleCheckmark'，'CircleRing'）”， “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 2，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ span”， “样式”：{ “ font-size”：“ 16px”， “字体粗细”：“ 600”， “左边距”：“-16px” }， “ txtContent”：“”， “属性”：{ “ iconName”：“ CircleRing”， “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 2，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ span”， “样式”：{ “ font-size”：“ = if（[$ StatusCode]> 2，'16px'，''”， “ font-weight”：“ = if（[$ StatusCode]> 2，'600'，''”， “向左填充”：“ 9px” }， “ txtContent”：“完成”， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 2，'green'，'neutralSecondaryAlt'）” } }， { “ elmType”：“ div”， “样式”：{ “ font-size”：“ 10px”， “字体粗细”：“ 600”， “ text-align”：“ center”， “ border-left-style”：“ solid”， “ border-left-color”：“ = if（[$ StatusCode]> 3，'green'，'neutralSecondaryAlt'）”， “左边距”：“ 21px” }， “属性”：{ “ class”：“ ='ms-fontColor-'+ if（[$ StatusCode]> 2，'black'，'black'）” }， “ txtContent”：“ [$ InTransitStartDate]” } ] } ] } ] } ] }， “ openOnEvent”：“悬停”， “ directionHint”：“ bottomCenter”， “ isBeakVisible”：为true } }
请不要忘记标记答案。谢谢
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。