在 Sharepoint 列表上调整自定义悬停卡

Question

我刚刚尝试将 Github 中的“列表上的自定义悬停卡”改编为我的 Sharepoint 在线列表，但遇到了几个问题 (https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/custom-hover-cards)。

基本上，我希望这个悬停卡片列表适用于我的简单流程：

1. 开始
2. 进行中
3. 完成

有没有人可以在这方面支持我？

提前致谢 & 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",
                      "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
  }
}

Answer 1

为了完成悬停卡片：

     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", “风格”： { “填充”：“15px 45px 15px 15px” }, “孩子们”： [ { "elmType": "div", “孩子们”： [ { "elmType": "div", “风格”： { "字体大小": "18px", “字体粗细”：“550”， “文本对齐”：“中心”， “边距底部”：“10px” }, "txtContent": "状态追踪" } ] }, { "elmType": "div", “孩子们”： [ { “elmType”：“跨度”， “风格”： { "border-left-style": "solid", "border-left-color": "='ms-borderColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')", “文本对齐”：“中心”， “左边距”：“21px” }, “属性”： { "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } } ] }, { "elmType": "div", “孩子们”： [ { “elmType”：“跨度”， “风格”： { "字体大小": "16px", “字体粗细”：“600”， "padding-left": "15px" }, "txt内容": " ", “属性”： { "iconName": "=if([$StatusCode] > 0, 'StatusCircleCheckmark', 'CircleRing')", "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } }, { “elmType”：“跨度”， “风格”： { "字体大小": "16px", “字体粗细”：“600”， “左边距”：“-16px” }, "txt内容": " ", “属性”： { "iconName": "CircleRing", "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } }, { “elmType”：“跨度”， “风格”： { "font-size": "=if([$StatusCode] > 0, '16px', ''", "font-weight": "=if([$StatusCode] > 0, '600', ''", “填充左”：“9px” }, "txtContent": "开始", “属性”： { "class": "='ms-fontColor-' + if([$StatusCode] > 0,'green','neutralSecondaryAlt')" } }, { "elmType": "div", “风格”： { "字体大小": "10px", “字体粗细”：“600”， “文本对齐”：“中心”， "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”：“跨度”， “风格”： { "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”：“跨度”， “风格”： { "字体大小": "16px", “字体粗细”：“600”， "padding-left": "15px" }, "txt内容": " ", “属性”： { "iconName": "=if([$StatusCode] > 1, 'StatusCircleCheckmark', 'CircleRing')", "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')" } }, { “elmType”：“跨度”， “风格”： { "字体大小": "16px", “字体粗细”：“600”， “左边距”：“-16px” }, "txt内容": " ", “属性”： { "iconName": "CircleRing", "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')" } }, { “elmType”：“跨度”， “风格”： { "font-size": "=if([$StatusCode] > 1, '16px', ''", "font-weight": "=if([$StatusCode] > 1, '600', ''", “填充左”：“9px” }, "txtContent": "进行中", “属性”： { "class": "='ms-fontColor-' + if([$StatusCode] > 1,'green','neutralSecondaryAlt')" } }, { "elmType": "div", “风格”： { "字体大小": "10px", “字体粗细”：“600”， “文本对齐”：“中心”， "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”：“跨度”， “风格”： { "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”：“跨度”， “风格”： { "字体大小": "16px", “字体粗细”：“600”， "padding-left": "15px" }, "txt内容": " ", “属性”： { "iconName": "=if([$StatusCode] > 2, 'StatusCircleCheckmark', 'CircleRing')", "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')" } }, { “elmType”：“跨度”， “风格”： { "字体大小": "16px", “字体粗细”：“600”， “左边距”：“-16px” }, "txt内容": " ", “属性”： { "iconName": "CircleRing", "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')" } }, { “elmType”：“跨度”， “风格”： { "font-size": "=if([$StatusCode] > 2, '16px', ''", "font-weight": "=if([$StatusCode] > 2, '600', ''", “填充左”：“9px” }, "txtContent": "完成", “属性”： { "class": "='ms-fontColor-' + if([$StatusCode] > 2,'green','neutralSecondaryAlt')" } }, { "elmType": "div", “风格”： { "字体大小": "10px", “字体粗细”：“600”， “文本对齐”：“中心”， "border-left-style": "solid", "border-left-color": "=if([$StatusCode] > 3,'green','neutralSecondaryAlt')", “左边距”：“21px” }, “属性”： { "class": "='ms-fontColor-' + if([$StatusCode] > 2, 'black', 'black')" }, "txtContent": "[$InTransitStartDate]" } ] } ] } ] } ] }, "openOnEvent": "悬停", “方向提示”：“底部中心”， “isBeakVisible”：真 } }

请不要忘记标记答案。谢谢