如何使用JSON根据选择字段值格式化单字段以展示对应操作按钮

问题根源 #

原有代码存在三个核心错误：

1. 不符合JSON语法规范：根节点下不能直接并列多个If语句，同时存在括号不配对、逗号缺失的语法问题
2. 字段引用格式错误：SharePoint列格式化中引用当前列表字段需使用[$字段内部名]格式，你编写的[@WorkflowRequired]是错误写法
3. 多条件逻辑没有绑定到控件的可见性属性，直接写在JSON结构层不符合列格式化的规则

修正思路 #

使用div作为父容器，把三个按钮都放在children节点下，每个按钮的visibility属性同时绑定两个判断条件：

• WorkflowRequired字段值等于当前按钮对应的业务类型
• 对应审批状态字段值为Pending
  只有两个条件同时满足时按钮才会显示，无需编写复杂的分支判断。

修正后完整代码 #

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "button",
      "txtContent": "Launch DI Exit",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"86b2de78-e44c-4e6d-9707-08369f679a42\"}"
      },
      "style": {
        "background-color": "#0080ff",
        "color": "white",
        "border-radius": "0 15px",
        "visibility": "=if([$WorkflowRequired] == 'DI Exit' && [$DIExitApprovalStatus] == 'Pending', 'visible', 'hidden')"
      }
    },
    {
      "elmType": "button",
      "txtContent": "Launch OA Exit",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"e7879e07-2fed-4cee-9a13-9aa4fc673b3c\"}"
      },
      "style": {
        "background-color": "#008082",
        "color": "white",
        "border-radius": "0 15px",
        "visibility": "=if([$WorkflowRequired] == 'OA Exit' && [$OAExitApprovalStatus] == 'Pending', 'visible', 'hidden')"
      }
    },
    {
      "elmType": "button",
      "txtContent": "Launch CD_CV Exit",
      "customRowAction": {
        "action": "executeFlow",
        "actionParams": "{\"id\": \"52999e98-ea2b-46c7-ab21-d5e8e727fa94\"}"
      },
      "style": {
        "background-color": "#008082",
        "color": "white",
        "border-radius": "0 15px",
        "visibility": "=if([$WorkflowRequired] == 'CD_CV Exit' && [$_CD_CVExitApprovalStatus] == 'Pending', 'visible', 'hidden')"
      }
    }
  ]
}

注意事项 #

使用前请确认所有字段的内部名称和代码中引用的一致：字段内部名称可以在列表设置页面点击对应字段，从浏览器地址栏的Field=xxx参数中获取，避免显示名和内部名不一致导致逻辑失效。

内容的提问来源于stack exchange，提问作者Christopher Lond