如何用JSON格式在SharePoint中实现带切换按钮的双表单布局？

以下是修改后的表单格式JSON，已实现中央图片展示、切换按钮，以及左右表单切换逻辑：

{
  "sections": [
    // 原表单区域
    {
      "displayname": "Finding Information",
      "fields": ["Finding-Description", "Due date"],
      "conditional_hide": {
        "operator": "AND",
        "rules": [
          {
            "field": "FormView",
            "operator": "equals",
            "value": "Alternate"
          }
        ]
      }
    },
    {
      "displayname": "Root Cause",
      "fields": ["Root Cause"],
      "conditional_hide": {
        "operator": "AND",
        "rules": [
          {
            "field": "FormView",
            "operator": "equals",
            "value": "Alternate"
          }
        ]
      }
    },
    {
      "displayname": "Corrective Action",
      "fields": ["Corrective Action"],
      "conditional_hide": {
        "operator": "AND",
        "rules": [
          {
            "field": "FormView",
            "operator": "equals",
            "value": "Alternate"
          }
        ]
      }
    },
    {
      "displayname": "Status",
      "fields": ["Status"],
      "conditional_hide": {
        "operator": "OR",
        "rules": [
          {
            "field": "Status",
            "operator": "equals",
            "value": "Draft"
          },
          {
            "field": "FormView",
            "operator": "equals",
            "value": "Alternate"
          }
        ]
      }
    },
    {
      "displayname": "Attachments",
      "fields": ["Attachments"],
      "conditional_hide": {
        "operator": "AND",
        "rules": [
          {
            "field": "FormView",
            "operator": "equals",
            "value": "Alternate"
          }
        ]
      }
    },
    // 另一表单区域
    {
      "displayname": "替代表单区域1",
      "fields": ["替代字段1", "替代字段2"], // 替换为你的另一表单字段
      "conditional_hide": {
        "operator": "AND",
        "rules": [
          {
            "field": "FormView",
            "operator": "equals",
            "value": "Original"
          }
        ]
      }
    },
    {
      "displayname": "替代表单区域2",
      "fields": ["替代字段3"], // 替换为你的另一表单字段
      "conditional_hide": {
        "operator": "AND",
        "rules": [
          {
            "field": "FormView",
            "operator": "equals",
            "value": "Original"
          }
        ]
      }
    }
  ],
  "buttons": [
    { "name": "Save", "position": "left" },
    { "name": "Submit for Approval", "position": "right", "inactive": true },
    { "name": "Close", "position": "right" }
  ],
  "headerTemplate": "<div style='text-align:center; padding:20px;'>\n  <img src='你的图片URL' alt='中央图片' style='max-width:200px; margin-bottom:15px;' />\n  <div>\n    <button onclick=\"updateFormView('Alternate')\" style='padding:8px 16px; margin:0 10px;'>切换到右侧表单</button>\n    <button onclick=\"updateFormView('Original')\" style='padding:8px 16px; margin:0 10px;'>返回左侧表单</button>\n  </div>\n</div>",
  "customRowAction": {
    "action": "setValue",
    "actionParams": {
      "FormView": "Original"
    }
  },
  "conditional_hide": {
    "sections": [],
    "fields": [
      { "name": "Request Action", "values_to_hide": ["Draft"] },
      { "name": "Submit for Approval", "values_to_hide": ["Draft"] },
      { "name": "Complete Approval", "values_to_hide": ["Draft"] },
      { "name": "FormView", "values_to_hide": ["*"] } // 隐藏用于控制的FormView字段
    ]
  },
  "onRender": "function updateFormView(view) { spFormContext.setValue('FormView', view); }"
}

关键修改说明： #

• 添加控制字段：创建名为FormView的单行文本字段（默认值设为Original），用于标记当前显示的表单视图。
• 中央图片与切换按钮：通过headerTemplate添加居中的图片和切换按钮，按钮点击时调用自定义函数更新FormView的值。
• 表单切换逻辑：给每个区域添加conditional_hide规则，根据FormView的值决定显示原表单还是另一表单。
• 隐藏控制字段：在conditional_hide中设置隐藏FormView字段，避免干扰用户操作。
• 自定义函数：通过onRender定义updateFormView函数，实现点击按钮切换视图的功能。

使用注意事项： #

• 将你的图片URL替换为实际的图片地址（建议使用SharePoint站点内的图片链接）。
• 将替代字段1、替代字段2等替换为你另一表单的实际字段内部名称。
• 确保FormView字段已在SharePoint列表中创建，且内部名称与JSON中一致。

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