利用JSON去配置SharePoint列表表单

您可以使用自定义页眉、页脚和表单正文在列表或库中配置列表表单,其中包含一个或多个部分,其中每个部分都有字段。表单配置不会改变列表项或文件中的数据;它只会更改表单向浏览列表或库的用户显示的方式。任何可以在列表中创建和管理视图的人都可以使用表单配置来配置带有页眉、页脚和正文部分的表单。

开始

要在列表或库中配置表单:

  1. 转到要为其配置表单的列表或库。
  2. 如果您在列表中:
    • 打开一个项目以在显示表单中查看项目详细信息。
  3. 如果您在文档库中:
    • 选择一个文件。
    • 选择 ...
    • 选择更多
    • 选择属性
  4. 在表单顶部,展开编辑表单图标,然后选择**配置布局

image.png 以下是自定义标头和 JSON 的示例

image.png

利用JSON去配置SharePoint列表表单

您可以使用自定义页眉、页脚和表单正文在列表或库中配置列表表单,其中包含一个或多个部分,其中每个部分都有字段。表单配置不会改变列表项或文件中的数据;它只会更改表单向浏览列表或库的用户显示的方式。任何可以在列表中创建和管理视图的人都可以使用表单配置来配置带有页眉、页脚和正文部分的表单。

开始

要在列表或库中配置表单:

  1. 转到要为其配置表单的列表或库。

  2. 如果您在列表中:

    • 打开一个项目以在显示表单中查看项目详细信息。
  3. 如果您在文档库中:

    • 选择一个文件。
    • 选择 ...
    • 选择更多
    • 选择属性
  4. 在表单顶部,展开编辑表单图标,然后选择配置布局

配置列表表单

配置自定义页脚

  1. 要将格式应用于页脚,请在格式窗格中,在将格式应用于下拉菜单中选择页脚

  2. 将您的自定义页脚格式化程序粘贴到 JSON 文本输入区域。

    笔记

    表单配置允许使用某些预定义的元素和属性来构建自定义页脚。

  3. 以下是自定义页脚和 JSON 的示例:

自定义列表表单页脚

{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "width": "100%",
                "padding-top": "10px",
                "height": "24px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "='Contact Details for ' + [$Title]",
                    "attributes": {
                        "target": "_blank",
                        "href": "='https://aka.ms/contacts?email=' + [$Email]",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        }
    ]
}
复制代码

使用一个或多个部分配置自定义正文

  1. 以下是带有部分的自定义正文 JSON 的示例:

    {
        "sections": [
            {
                "displayname": "",
                "fields": [
                    "Title"
                ]
            },
            {
                "displayname": "Details",
                "fields": [
                    "Department",
                    "Email",
                    "Country"
                ]
            },
            {
                "displayname": "Application",
                "fields": [
                    "Application Id",
                    "Approver",
                    "Reviewer"
                ]
            }
        ]
    }
    复制代码

一旦正文用一个或多个部分自定义,列表或库表单将切换到多列布局

带有部分的自定义列表表单正文

猜你喜欢

转载自juejin.im/post/7036559505139695624