如何实现点击SharePoint彩色磁片跳转到Lien列指定页面？

核心修改思路 #

给磁片的外层容器添加点击事件，直接跳转到Lien超链接列的URL，同时优化交互提示。

修改后的JSON配置示例 #

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 100,
  "width": 150,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "cursor": "pointer",
      "border-radius": "8px",
      "padding": "10px",
      // 保留你原有的背景色逻辑，此处为示例
      "background-color": "=if([$Status] == '完成', '#4CAF50', if([$Status] == '进行中', '#2196F3', '#FFC107'))"
    },
    "attributes": {
      "onclick": "window.location.href = '[$Lien]'"
    },
    "children": [
      // 保留你原有的磁片内容元素，如标题、描述等
      {
        "elmType": "div",
        "style": {
          "font-size": "16px",
          "font-weight": "bold",
          "color": "white",
          "margin-bottom": "5px"
        },
        "txtContent": "[$Title]"
      },
      {
        "elmType": "div",
        "style": {
          "font-size": "12px",
          "color": "white"
        },
        "txtContent": "[$Description]"
      }
    ]
  }
}

关键修改点 #

• 添加点击事件：在磁片外层div的attributes节点中加入"onclick": "window.location.href = '[$Lien]'"，[$Lien]是超链接列的内部名称，需与列表中列的实际内部名称一致。
• 交互提示优化：外层div的style中添加"cursor": "pointer"，鼠标悬停时显示指针，明确磁片可点击。
• 屏蔽默认选中样式：设置"hideSelection": true，避免默认的选中高亮干扰自定义交互。

操作步骤 #

1. 打开目标SharePoint列表，切换到已配置的彩色磁片视图。
2. 点击视图菜单中的格式化当前视图（或右键视图名称选择该选项）。
3. 将现有JSON代码替换为上述修改后的代码，保留你原有的背景色、内容布局等逻辑。
4. 验证[$Lien]是否为超链接列的正确内部名称（可通过列表设置→点击列名→查看地址栏Field=后的参数获取）。
5. 保存配置，测试点击磁片是否成功跳转至指定页面。

注意事项 #

• 确保Lien列是超链接或图片类型，且存储了有效的URL地址。
• 如果超链接列包含显示文本和URL，[$Lien]会自动提取URL部分用于跳转。
• 若跳转失效，优先检查列的内部名称是否正确，或URL格式是否合法。

内容的提问来源于stack exchange，提问作者Jake The Thug