SharePoint的字段控制器扩展

这是我参与11月更文挑战的第4天，活动详情查看：11月更文挑战

创建一个 SharePoint 框架 (SPFx) 字段自定义程序扩展，它将在列中显示一个彩色条，并根据字段中的值填充该条的百分比。注意,这个只能在SharePoint的modern风格下才可以使用.

1.生成框架

yo @microsoft/sharepoint

一般选择默认提示:

1. Which type of client-side component to create? : Extension
2. What type of client-side extension to create? : Field Customizer
3. Which framework would you like to use? : No JavaScript Framework

配置好项目所需的文件夹后，生成器会npm install自动运行安装所有依赖包。NPM 完成下载所有依赖项后，在Visual Studio Code 中打开项目文件夹

2.更新CSS

找到 /src/extensions/{helloFieldCustomizer}/{HelloFieldCustomizerFieldCustomizer}.module.scss {括起来的为包名}

.HelloFieldCustomizer {
  .cell {
    display: 'inline-block';
  }
  .filledBackground {
    background-color: #cccccc;
    width: 100px;
  }
}

在{包名}.文件中找到接口 设定

greenMinLimit?: string;
yellowMinLimit?: string;

修改onRenderCell(),通过SharePoint的API来获取到list页面的filed值,通过判断来生成颜色,onRenderCell()并更新内容以匹配以下代码。此代码查看字段中的现有值，并根据已完成百分比值中输入的值构建相关的彩色条。

event.domElement.classList.add(styles.cell);
​
// determine color and text to use
const fieldValue = parseInt(event.fieldValue);
let filledColor: string = '';
​
if (isNaN(fieldValue) || fieldValue === 0) {
  event.domElement.innerHTML = `
    <div class="${styles.HelloFieldCustomizer}">
      <div class="">
        <div style="width: 100px; color:#000000;">
          &nbsp; no progress
        </div>
      </div>
    </div>
  `;
} else {
  if (fieldValue >= parseInt(this.properties.greenMinLimit)) {
    filledColor = '#00ff00';
  } else if (fieldValue >= parseInt(this.properties.yellowMinLimit)) {
    filledColor = '#ffff00';
  } else {
    filledColor = '#ff0000';
  }
​
  event.domElement.innerHTML = `
    <div class="${styles.HelloFieldCustomizer}">
      <div class="${styles.filledBackground}">
        <div style="width: ${fieldValue}px; background:${filledColor}; color:#000000;">
          &nbsp; ${fieldValue}% completed
        </div>
      </div>
    </div>`;
}

3.创建用于测试的SharePoint List

4.更新部署配置

./sharepoint/assets/elements.xml file.

<Field> element

注意这里的&quot 是"的意思 它相当于在xml文件写入JSON

ClientSideComponentProperties="{"greenMinLimit":"85","yellowMinLimit":"70"}"

打开 ./config/serve.json

修改配置 serveConfigurations.default.pageUrl 更新为列表所在全连接

修改配置serveConfigurations.default.fieldCustomizers.InternalFieldName   (修改为列表中实际的字段名)

修改 propertiesJSON: 配置什么JSON就写什么JSON

"properties": {
  "greenMinLimit": "85",
  "yellowMinLimit": "70"
}

那么配置好的properties就像这样

"serveConfigurations": {
    "default": {
      "pageUrl": "https://volvogroup.sharepoint.com/sites/coll-powerappstrainingtj/Lists/Work%20States/AllItems.aspx?origin=createList",
      "fieldCustomizers": {
        "score": {
          "id": "42dc029b-e035-468b-b9e8-d597666c0674",
          "properties": {
            "greenMinLimit": "85",
            "yellowMinLimit": "70"
          }
        }
      }
    },

5.测试字段定制扩展

完成了字段定制化,我觉得这玩意没啥用,就是拿到值,判断,输出在页面上,就是一个script.而且你的extension需要在config.json中指定哪个页面的哪个字段 有点鸡肋.