SharePoint 列格式化 JSON 配置

[一、设置Column Formating](#一、设置Column Formating)
[二、SharePoint 列格式化 - Json解读](#二、SharePoint 列格式化 - Json解读)
- [1、" $schema"](#1、"$ schema")
- [2、"elmType" 元素类型](#2、"elmType" 元素类型)
- - (1) "a"
  - (2) "button"
  - - [Ⅰ. "action": "editProps"](#Ⅰ. "action": "editProps")
    - [Ⅱ. "action": "defaultClick"](#Ⅱ. "action": "defaultClick")
    - [Ⅲ. "action": "delete"](#Ⅲ. "action": "delete")
    - [Ⅳ. "action": "share"](#Ⅳ. "action": "share")
    - [Ⅴ. "action": "executeFlow"](#Ⅴ. "action": "executeFlow")
- [3、"txtContent" 文字内容](#3、"txtContent" 文字内容)
- - 文本可引用值
  - 可以使用内置图标
- 4、Style属性

一、设置Column Formating

在SharePoint列表中，可以嵌入一个可使用的按钮，效果如下：

首先进入列表的设置

单击我们要设置的列

然后设置对应的Column Formating的值即可

对于文档库，同样可以添加新列，进行相同的设置：

二、SharePoint 列格式化 - Json解读

1、"$schema"

这个参数相当于代码规范性检查，虽然不是必需，但是建议加上

复制代码

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  // 你的配置...
}

2、"elmType" 元素类型

可选的值：span ， div，button，a

(1) "a"

示例

复制代码

{
  "elmType": "a",
  "txtContent": "查看详情",
  "attributes": {
    "href": "https://www.baidu.com/",
    "target": "_blank"
  }
}

如果链接后面要拼接动态的参数，可以参考下面的格式

复制代码

    "href": "='https://apps.powerapps.com/test?sourcetime=qwer&ID='+[$ID]",

假设原链接为

https://apps.powerapps.com/test?sourcetime=qwer

拼接后的效果为：

https://apps.powerapps.com/test?sourcetime=qwer\&ID=1

(2) "button"

Ⅰ. "action": "editProps"

编辑本条数据：

打开编辑表单，让用户修改当前项的字段值

复制代码

{
  "elmType": "button",
  "txtContent": "编辑本条数据",
  "customRowAction": {
     "action": "editProps"
  },
  "style": {
    "background-color": "green",
    "color": "white"
  }
}

Ⅱ. "action": "defaultClick"

查看详情：

打开View表单，让用户查看当前项的字段值

复制代码

{
  "elmType": "button",
  "txtContent": "打开详情(View)",
  "customRowAction": {
      "action": "defaultClick"
  },
  "style": {
    "background-color": "green",
    "color": "white"
  }
}

Ⅲ. "action": "delete"

删除本条数据：

复制代码

{
  "elmType": "button",
  "txtContent": "删除本条数据",
  "customRowAction": {
     "action": "delete"
  },
  "style": {
    "background-color": "red",
    "color": "white"
  }

删除当前列表项，会弹出确认对话框

Share本条数据

复制代码

{
  "elmType": "button",
  "txtContent": "共享",
  "customRowAction": {
      "action": "share"
  },
  "style": {
    "background-color": "green",
    "color": "white"
  }
}

会弹出Share的弹框：

Ⅴ. "action": "executeFlow"

关于触发Flow：

适用的 Power Automate 流程必须使用以下触发器之一：

"手动触发流程" (Manually trigger a flow)

"对于选定项" (For a selected item) - SharePoint

"对于选定文件" (For a selected file) - SharePoint

复制代码

{
  "elmType": "button", 
  "txtContent": "运行Flow",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"941d679e-4208-4c3e-9d1c-fa7bca1a59b6\"}"
  }
}

flows和details中间这串字符就是Flow ID

For a selected item触发器

For a selected file触发器

3、"txtContent" 文字内容

文本可引用值

可引用别的字段的值，也可以引用当前自动的值

引用其他列，形如： [$Title]

引用当前列， @currentField

日期列好像无法引用，自带的创建人和修改人也引用不了

ID可以，自己创建的人员列可以，人员列的引用形如 "[$per.email]"

我们这里配置的值，相当于是一个样式，覆盖在原本的单元格上面，与它实际存储的值无关，也不能导出这里配置的值

复制代码

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "span",
  "txtContent":"[$Title]"
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "span",
  "txtContent":"@currentField"
}

可以使用内置图标

有一些内置的图标，设置文本的时候，可以图标+文字：

复制代码

{
  "elmType": "div",
  "customRowAction": {
    "action": "defaultClick"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {"iconName": "DocumentSearch"},
      "style": {
        "padding-right": "10px",
        "color": "#0078d4",
        "font-size": "16px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "测试图标+文字"
    }
  ]
}

图标可以参考这个链接：

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

鼠标悬停会有图标名字，有的图标可能对不上，但是iconName可以参考

4、Style属性

总之就是CSS样式，大家可以自己调整

复制代码

{
  "elmType": "div", 
  "txtContent": "测试Style",
  "style": {
    "background-color": "#4CAF50",
    "color": "white",
    "border": "none",
    "padding": "10px 20px",
    "border-radius": "6px",
    "cursor": "pointer",
    "font-weight": "500",
    "text-align": "center",
    "font-size": "14px",
    "letter-spacing": "0.5px"
  }
}

欢迎关注我的博客,与我一起学习,我将持续分享我的学习过程,我是热爱学习的小翁同学~

SharePoint 列格式化 JSON 配置

SharePoint 列格式化 JSON 配置

一、设置Column Formating

二、SharePoint 列格式化 - Json解读

1、"$schema"

2、"elmType" 元素类型

(1) "a"

(2) "button"

Ⅰ. "action": "editProps"

Ⅱ. "action": "defaultClick"

Ⅲ. "action": "delete"

Ⅳ. "action": "share"

Ⅴ. "action": "executeFlow"

3、"txtContent" 文字内容

文本可引用值

可以使用内置图标

4、Style属性