如何使用 SPFx - 字段定制器对 SharePoint 列表字段值进行条件格式设置？ [关闭]

Question

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

Answer 1

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

假设我们有一个包含四个字段 Title、Status、SLA Met 的列表？和逾期时间。标题是默认列。状态列是一个选择字段，具有以下值 Open、InProgress、Pending、Rejected、Completed 和 Closed。 SLA 满足？列是一个是/否字段，过期时间是一个数字字段。 我的要求是我们希望在视图表单中将 Status 列值显示为 Status 值 + Overdue Hours，其 SLA Met? 为 Yes 并且如果 Overdue Hours 大于或等于 48 小时，然后像天一样显示。此外，使用基于每个状态值的颜色显示状态单元格。

解决方案：

打开 Node.js 命令提示符

步骤 1：在您喜欢的位置创建一个新的项目目录。 md 字段扩展

第二步：进入项目目录。 cd 字段扩展

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

第 4 步：您的解决方案名称是什么？字段扩展

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

第 6 步：创建哪种类型的客户端组件？扩展

第 7 步：创建哪种类型的客户端扩展？字段定制器

第 8 步：您的字段定制器名称是什么？数据供应商

第 9 步：您的字段定制器描述是什么？资料供应商说明

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

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

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

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

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

enter image description here

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

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

进口{ BaseFieldCustomizer, IFieldCustomizerCellEventParameters， 列表项访问器 } 来自“@microsoft/sp-listview-extensibility”；

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

@覆盖 公共 onRenderCell（事件：IFieldCustomizerCellEventParameters）：无效{ // 使用此方法执行您的自定义单元格渲染。

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 命令提示符下构建代码 一饮而尽

第 15 步：通过运行以下命令编译代码： 一饮而尽

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

第 16 步：在出现提示时选择“加载以调试脚本”来接受调试清单的加载。

enter image description here

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

enter image description here