如何使用 SPFx - 字段定制器对 SharePoint 列表字段值进行条件格式化？

Question

如何使用 SPFx - 字段定制器对 SharePoint 列表字段值进行条件格式化？

Answer 1

SharePoint Framework Field Customizer 扩展使您能够自定义 SharePoint 列表中字段数据的格式。 Field Customizer 更强大，因为您可以使用它来编写您想要控制字段显示方式的任何代码。 在这里，我给你一个快速简单的例子，根据字段值 SLA Met? 和 的条件格式呈现 Status 字段值]过期时间 使用 SPFx Field Customizer。 enter image description here

假设我们有一个包含四个字段标题、状态、SLA 满足的列表？和逾期时间。标题是默认列。 Status Column 是一个选择字段，具有以下值 Open、InProgress、Pending、Rejected、Completed 和 Closed。满足 SLA？ column 是一个 Yes/No 字段，Overdue Hours 是一个 Number 字段。 我的要求是我们想在视图表单中将 Status 列值显示为 Status value + Overdue Hours which SLA Met? is Yes and if 逾期时间 大于或等于 48 小时则按天显示。此外，根据每个状态值用颜色显示状态单元格。

解法：

打开Node.js命令提示符

第 1 步：在您喜欢的位置创建一个新的项目目录。 MD field-extension

Step-2：进入项目目录。 cd field-extension

第 3 步：通过 运行 Yeoman SharePoint 生成器创建新的 DataSupplier 扩展。 哟@microsoft/sharepoint 出现提示时，输入以下值（select 下面省略所有提示的默认选项）：

第 4 步：您的解决方案名称是什么？ field-extension

第 5 步：解决方案中的组件是否需要访问唯一且不与租户中的其他组件共享的 Web API 的权限？ (y/n)n

第 6 步：要创建哪种类型的 client-side 组件？分机

第 7 步：要创建哪种类型的 client-side 扩展？字段定制器

第 8 步：您的现场定制员姓名是什么？数据供应商

第 9 步：您的 Field Customizer 描述是什么？数据供应商描述

第 10 步：您想使用哪个框架？无JavaScript 框架

此时，Yeoman 安装所需的依赖项并搭建解决方案文件以及 DataSupplier 扩展。这可能需要几分钟时间。

第 11 步：在控制台中键入以下内容以启动 Visual Studio 代码。 代码.

第 12 步：在 Visual Studio 代码中，打开 ./config/serve.json 文件。

将我们创建的字段名称的 InternalFieldName 属性设置为 Status。更新 pageUrl 属性以匹配列表的 URL。更改后，您的 serve.json 应类似于以下代码：

enter image description here

第 13 步：打开 .../src\extensions\dataSupplier\DataSupplierFieldCustomizer.ts 文件。

这里我们使用 ListItemAccessor class 来访问呈现状态列的列表项。所以，我们应该从 sp-listview-extensibility 包中导入 class。

进口{ 基础字段定制器， IFieldCustomizerCellEventParameters, 列表项访问器 } 来自 '@microsoft/sp-listview-extensibility';

以下是解决方案中OnRendercell()方法的内容。我们还从名为 _getSLAValue() 的 OnRenderCell() 方法中调用一个新函数来检查逾期时间。

@覆盖 public onRenderCell（事件：IFieldCustomizerCellEventParameters）：void { // 使用此方法执行自定义单元格渲染。

let sLADueHours=this._getSLAValue(event.listItem);
switch(event.fieldValue){
  case 'Open':
    event.domElement.parentElement.style.backgroundColor=`#ffb6c1`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'InProgress':
    event.domElement.parentElement.style.backgroundColor=`#90ee90`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Pending':
    event.domElement.parentElement.style.backgroundColor=`#cabbbb`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Rejected':
    event.domElement.parentElement.style.backgroundColor=`#f08080`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Completed':
    event.domElement.parentElement.style.backgroundColor=`#7fffd4`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;
  case  'Closed':
    event.domElement.parentElement.style.backgroundColor=`#abff2e`;
    event.domElement.innerHTML=`<div>
                      ${event.fieldValue} ${sLADueHours}</div>`;
                      break;                                    
}
}
private _getSLAValue(event: ListItemAccessor): any{
let sLAHours: string=``;
let isSLAMet: string=event.getValueByName('SLAMet_x003f_');
const overDueHoursValue: number=event.getValueByName('OverDueHours');
console.log(isSLAMet);
if(isSLAMet=='Yes'){
  if(overDueHoursValue>=48)
  {
    console.log(Number(overDueHoursValue/24).toFixed(2));
    sLAHours=`( ` + Number(overDueHoursValue/24).toFixed(2) + ` Days )` ;
  }
  else{
    sLAHours=`( ` + Number(overDueHoursValue).toFixed(2) + ` Hours )` ;
  }
}
return sLAHours;
}

第 14 步：在 Node.js 命令提示符下构建代码 gulp 构建

第 15 步：通过 运行 此命令编译您的代码： gulp发球

这将启动您的默认浏览器并加载 serve.json 文件中定义的页面。

第 16 步：通过select出现提示时加载调试脚本来接受调试清单的加载。

enter image description here

现在我们可以在列表视图中看到变化，如下所示。

enter image description here