SharePoint Online保存页面时图库视图自动还原为列表视图求助

问题场景 #

我为列表使用了一段Tile Formatting代码，操作流程为：在列表视图中粘贴代码 → 切换为图库视图，此时列表可正常显示带链接的磁贴样式。但将该图库视图添加到SharePoint页面后，初始显示正常，保存页面后却自动变回列表视图，需要实现保留图库视图的磁贴显示效果并全屏展示。

使用的Tile Formatting代码 #

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "width": "180",
  "height": "150",
  "formatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$URL]",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-black ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "min-width": "180px",
          "min-height": "150px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px black"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title "
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

解决步骤 #

• 先将配置好的视图保存为图库视图
  在列表页面完成代码粘贴并切换到图库视图后，点击顶部的「保存视图」（或「另存为视图」），给视图命名（如「磁贴全屏视图」），确认视图类型为「图库」，保存后再进行页面添加操作。

• 添加Web部件时直接选择已保存的图库视图
  在SharePoint页面添加「列表」Web部件时，选中目标列表后，在Web部件属性面板的「视图」下拉菜单中，直接选择你刚才保存好的图库类型视图，避免选择默认的列表视图。

• 锁定Web部件的布局设置
  添加Web部件后，在右侧属性面板找到「布局」选项，确认选择「图库」布局；保存页面之前再次检查该设置，确保未被意外切换回「列表」布局。

• 调整代码适配页面全屏显示
  原代码的固定宽高可能导致视图适配异常，可修改样式为相对布局以适配全屏：
  将代码中磁贴容器的style部分修改为：

  "style": {
    "display": "flex",
    "flex-wrap": "wrap",
    "width": "calc(25% - 10px)", // 按4列自适应布局，可根据需求调整比例
    "min-height": "150px",
    "margin-right": "10px",
    "margin-top": "10px",
    "box-shadow": "2px 2px 4px black"
  }
  

• 强制刷新清除页面缓存
  若保存后视图仍异常，按Ctrl+F5强制刷新页面，或进入页面编辑模式重新保存一次，避免缓存导致的显示问题。

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