您的位置: 首页  >  文章  >  使用视图格式化来自定义SharePoint

使用视图格式化来自定义SharePoint

分类: 文章 • 2023-11-20 16:42:58

博客地址：http://blog.****.net/FoxDave

本篇开始介绍视图格式化的功能，类同于字段格式化，视图也可以进行自定义格式化。
我们可以使用视图格式化来自定义SharePoint列表和库中的视图如何显示。我们需要构建一个JSON对象来描述当列表视图中的一行数据加载时的元素要应用的样式。视图格式化并不会改变列表项的数据而只改变它们向用户呈现的方式。具有列表中的创建和管理视图权限的用户可以使用视图格式化来配置视图如何显示。

开始进行视图格式化

通过点击视图的下拉菜单选择Format this view来打开视图格式化面板。
使用视图格式化来自定义SharePoint
使用视图格式化最简单的方式跟字段格式化类似：基于一个示例进行修改然后应用到我们特定的视图。本文之后的部分包含一些示例，我们可以依据自己的需求进行自定义。

应用条件样式类

我们可以通过视图格式化基于一个到多个字段的值应用一个到多个样式类到整个列表视图。
推荐的可用样式类可以参照之前的关于字段格式化的文章。

基于日期字段的条件样式类

下图展示了基于日期字段的条件样式类的应用。
使用视图格式化来自定义SharePoint
该示例在列表项的DueDate字段在当前日期之前时应用sp-field-severity–severeWarning样式类到列表视图表示超期。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
   "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', '')"
}

基于文本或选项字段的条件样式类

本示例采用了类似之前字段格式化中的例子，但是在视图格式化中additionalRowClass属性只允许我们指定样式类，图标不可以。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good', if([$Status] == 'In progress', 'sp-field-severity--low' ,if([$Status] == 'In review','sp-field-severity--warning', if([$Status] == 'Has issues','sp-field-severity--blocked', ''))))"
}

构建自定义行布局

我们可以使用视图格式化来定义一个完全自定义的行布局。

多行视图样式
下图展示了应用自定义多行视图样式的列表。
使用视图格式化来自定义SharePoint
本例使用rowFormatter元素，它完全重写了一个列表视图行的渲染。例子中的rowFormatter为列表视图的每行创建了一个绑定的div框。在这个绑定的框中，Title和Title和Feedback字段分别在各自的行显示。在这些字段下面，有一个button元素，在点击时会打开列表项的属性查看页。这个按钮是根据条件显示的，当$Assigned_x0020_To的值为当前登录用户才显示。

{
  "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Feedback]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Give feedback",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$Assigned_x0020_To.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

创建自定义JSON

如果我们懂它的schema的话，从头开始创建自定义的视图格式化JSON也很简单。遵从下面几个步骤：

  1. 下载Visual Studio Code。
  2. 在Visual Studio Code中创建一个新文件，保存成.json文件扩展名。
  3. 将下面的代码粘贴到该文件中：
{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json"
 }

现在我们完成创建自己的JSON了。我们可以开始在第一行之后添加我们自己的JSON来定义schema。

详细语法参考

rowFormatter
可选元素。指定一个描述列表视图行格式的JSON对象。JSON对象的schema需要跟字段格式化的schema完全相同。
注意：使用rowFormatter属性会完全覆盖additionalRowClass属性中指定的所有内容，它们是互斥的。

rowFormatter元素和字段格式化行为上的不同
尽管共享相同的schema，rowFormatter中的元素跟字段格式化对象中相关的元素在行为上还是有一些不同的。

  • @currentField在rowFormatter中总是解析为Title字段。

additionalRowClass

可选元素，指定应用到整行的CSS样式类。
additionalRowClass只在没有rowFormatter元素指定的情况下生效。如果rowFormatter被指定了，additionalRowClass就会被忽略。

hideSelection
可选元素，指定是否禁用视图中行的选择。false是默认的行为，true表示用户不能够选中列表项。
hideSelection只在指定了rowFormatter元素的情况下生效。

hideListHeader
可选元素，指定视图中的字段头是否隐藏。false是默认的行为，true表示视图不会显示字段头。

相关推荐