json 调整Sharepoint列表上的自定义悬停卡片

bjg7j2ky  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(138)

我只是试图将"列表上的自定义悬停卡"从Github调整到我的Sharepoint在线列表中，但遇到了几个问题（https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/custom-hover-cards）。
基本上，我希望让这个悬停卡列表为我的简单流程工作：
1.开始
1.进行中
1.完成
有人能支持我吗？
提前感谢& 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
  }
}
JSON

1条答案

按热度按时间
bihw5rsg

bihw5rsg1#

为了完成悬停卡：

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", "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": "Status Tracking" } ] }, { "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": "Start", "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": "In Progress", "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": "Done", "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]" } ] } ] } ] } ] }, "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true } }

请不要忘记在答案上做记号，谢谢

赞(0）分享  回复(0）举报  2023-01-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com