SharePoint Online 的 Microsoft List 中的 JSON 列格式中未显示嵌套子元素

Question

我正在尝试创建一个

Status

列来显示多阶段审批流程的进度。

要在您自己的环境中重新创建设置，请在 Microsoft 列表中创建以下列：

• Status

  （类型：单行文本）

• Stage1Person

  （类型：人物）

• Stage2Person

  （类型：人物）

• Stage3Person

  （类型：人物）

然后将下面的任一 JSON 列格式示例粘贴到

Status

列。

JSON列格式化的逻辑是：

• 如果

  Stage1Person

  有值，应用背景颜色到第一阶段指标
• 如果

  Stage2Person

  有值，应用背景颜色到第二阶段指示器
• 如果

  Stage3Person

  有值，给第三阶段指示器应用背景颜色

这个 JSFiddle 演示了它的外观（注意箭头）：

我现在正在将 HTML 和 CSS 转换为列格式所需的 JSON。

所有的条件逻辑和颜色都在工作，但是它没有输出嵌套的子元素。

嵌套的子元素（跨度）是每个阶段末尾的“箭头”。

因此列格式如下所示（注意箭头未显示）：

浏览器开发者工具控制台中的关联 HTML 如下所示：

（你可以看到嵌套的 span 根本没有被输出）

起初，我想知道在 JSON 列格式中是否允许嵌套

children

但是我看到了其他人在使用它的例子（example），所以这似乎不是问题。

下面是我正在使用的 JSON 列格式。

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style":
    {
        "font-size": "16px"
    },
    "children":
    [
        {
            "elmType": "div",
            "txtContent": "Stage 01",
            "style":
            {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
            },
            "children":
            [
                {
                    "elmType": "span",
                    "style":
                    {
                        "position": "absolute",
                        "top": "0",
                        "right": "-19px",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "20px solid transparent",
                        "z-index": "2",
                        "background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "txtContent": "Stage 02",
            "style":
            {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
            },
            "children":
            [
                {
                    "elmType": "span",
                    "style":
                    {
                        "position": "absolute",
                        "top": "0",
                        "right": "-19px",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "20px solid transparent",
                        "z-index": "2",
                        "background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "txtContent": "Stage 03",
            "style":
            {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
            },
            "children":
            [
                {
                    "elmType": "span",
                    "style":
                    {
                        "position": "absolute",
                        "top": "0",
                        "right": "-19px",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "20px solid transparent",
                        "z-index": "2",
                        "background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
                    }
                }
            ]
        }
    ]
}

简化的 JSON

这是一个更简化的版本，它还演示了嵌套的 CHILD 元素是如何不作为 HTML 输出的：

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style":
    {
        "font-size": "16px"
    },
    "children":
    [
        {
            "elmType": "div",
            "txtContent": "Stage 01",
            "style":
            {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
            },
            "children":
            [
                {
                    "elmType": "span",
                    "txtContent": "Stage 01 - CHILD"
                }
            ]
        },
        {
            "elmType": "div",
            "txtContent": "Stage 02",
            "style":
            {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
            },
            "children":
            [
                {
                    "elmType": "span",
                    "txtContent": "Stage 02 - CHILD"
                }
            ]
        },
        {
            "elmType": "div",
            "txtContent": "Stage 03",
            "style":
            {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
            },
            "children":
            [
                {
                    "elmType": "span",
                    "txtContent": "Stage 03 - CHILD"
                }
            ]
        }
    ]
}

更新：

我刚遇到这个：

孩子们
一个可选属性，指定由 elmType 指定的元素的子元素。该值被指定为一个榆树对象数组。 可以有任意级别的嵌套。如果元素具有 txtContent 属性，则忽略子属性。

因此，支持嵌套子元素，但如果顶级元素具有

txtContent

属性，则不会呈现子元素。

之所以可行，是因为顶部元素中没有

textContent

属性：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "font-size": "16px"
  },
  "children": [
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "txtContent": "Stage 01 - CHILD"
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "txtContent": "Stage 02 - CHILD"
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "txtContent": "Stage 03 - CHILD"
        }
      ]
    }
  ]
}

现在我只需要弄清楚如何获得所需的行为，而无需在父元素中指定

txtContent

。

Answer 1

这可能不是最优雅的方式。

但它似乎得到了想要的行为。

我重构了 HTML，这样就没有“父”div 包含

txtContent

.

HTML结构本质上是这样的：

<div id='stage_container_01'>
  <div class='stage done'>Stage 01</div>
  <div class='arrow done'></div>
</div>
<div id='stage_container_02'>
  <div class='stage current'>Stage 02</div>
  <div class='arrow current'></div>
</div>
<div id='stage_container_03'>
  <div class='stage todo'>Stage 03</div>
  <div class='arrow todo'></div>
</div>

这是一个展示 HTML/CSS 解决方案的 JSFiddle

然后我将其翻译成 JSON 列格式：

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style":
    {
        "font-size": "16px"
    },
    "children":
    [
        {
            "elmType": "div",
            "style":
            {
                "position": "relative",
                "z-index": "3"
            },
            "children":
            [
                {
                    "elmType": "div",
                    "txtContent": "Stage 01",
                    "style":
                    {
                        "float": "left",
                        "padding": "10px 30px 10px 40px",
                        "position": "relative",
                        "font-family": "Arial",
                        "background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
                    }
                },
                {
                    "elmType": "div",
                    "style":
                    {
                        "float": "left",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "17px solid transparent",
                        "border-left": "19px solid",
                        "border-left-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style":
            {
                "position": "relative",
                "z-index": "2",
                "left": "-19px"
            },
            "children":
            [
                {
                    "elmType": "div",
                    "txtContent": "Stage 02",
                    "style":
                    {
                        "float": "left",
                        "padding": "10px 30px 10px 40px",
                        "position": "relative",
                        "font-family": "Arial",
                        "background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
                    }
                },
                {
                    "elmType": "div",
                    "style":
                    {
                        "float": "left",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "17px solid transparent",
                        "border-left": "19px solid",
                        "border-left-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style":
            {
                "position": "relative",
                "z-index": "1",
                "left": "-38px"
            },
            "children":
            [
                {
                    "elmType": "div",
                    "txtContent": "Stage 03",
                    "style":
                    {
                        "float": "left",
                        "padding": "10px 30px 10px 40px",
                        "position": "relative",
                        "font-family": "Arial",
                        "background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
                    }
                },
                {
                    "elmType": "div",
                    "style":
                    {
                        "float": "left",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "17px solid transparent",
                        "border-left": "19px solid",
                        "border-left-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
                    }
                }
            ]
        }
    ]
}

这会在列表中输出以下内容：

我觉得箭头右边没有边框看起来有点怪怪的

但是箭头本身是 19px 边框的结果，所以不确定如何在边框上放置边框：/.

这是另一种方法，它在不同的已完成阶段之间创建分离。

但它看起来还是有点狡猾：

Answer 2

下面的 JSON 应该可以帮助您开始使用：

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "height": "70px"
  },
  "attributes": {
    "class": "container"
  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "class": "stage done"
      },
      "style": {
        "float": "left",
        "padding": "28px 35px 10px 40px",
        "position": "relative",
        "font-family": "Arial",
        "background-color": "#aeffae",
        "width": "50px"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "Submitted",
          "style": {
            "position": "absolute",
            "left": "30px",
            "top": "12px"
          }
        },
        {
          "elmType": "span",
          "attributes": {
            "class": "arrow"
          },
          "style": {
            "position": "absolute",
            "top": "0",
            "right": "-19px",
            "width": "0",
            "height": "0",
            "border-top": "21px solid transparent",
            "border-bottom": "17px solid transparent",
            "z-index": "2",
            "border-left": "19px solid #aeffae"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "attributes": {
        "class": "stage current"
      },
      "style": {
        "float": "left",
        "padding": "28px 35px 10px 40px",
        "position": "relative",
        "font-family": "Arial",
        "background-color": "#ffdcae",
        "width": "50px"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "Approved",
          "style": {
            "position": "absolute",
            "left": "30px",
            "top": "12px"
          }
        },
        {
          "elmType": "span",
          "attributes": {
            "class": "arrow"
          },
          "style": {
            "position": "absolute",
            "top": "0",
            "right": "-19px",
            "width": "0",
            "height": "0",
            "border-top": "21px solid transparent",
            "border-bottom": "17px solid transparent",
            "z-index": "2",
            "border-left": "19px solid #ffdcae"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "attributes": {
        "class": "stage todo"
      },
      "style": {
        "float": "left",
        "padding": "28px 35px 10px 40px",
        "position": "relative",
        "font-family": "Arial",
        "background-color": "#ffaeae",
        "width": "50px"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "Authorised",
          "style": {
            "position": "absolute",
            "left": "30px",
            "top": "12px"
          }
        },
        {
          "elmType": "span",
          "attributes": {
            "class": "arrow"
          },
          "style": {
            "position": "absolute",
            "top": "0",
            "right": "-19px",
            "width": "0",
            "height": "0",
            "border-top": "21px solid transparent",
            "border-bottom": "17px solid transparent",
            "z-index": "2",
            "border-left": "19px solid #ffaeae"
          }
        }
      ]
    }
  ]
}

根据您的情况更改背景颜色和其他样式属性。

输出：