0

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

4

1 回答 1

0

SharePoint 框架字段定制器扩展使您能够定制 SharePoint 列表中字段数据的格式。字段定制器更强大，因为您可以使用它来编写任何想要控制字段显示方式的代码。在这里，我给您一个快速简单的示例，根据字段值的条件格式呈现状态字段值SLA Met? 和使用 SPFx 字段定制器的 过期时间。在此处输入图像描述

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

解决方案：

打开 Node.js 命令提示符

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在此处输入图像描述

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

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

从“@microsoft/sp-listview-extensibility”导入 { BaseFieldCustomizer、IFieldCustomizerCellEventParameters、ListItemAccessor }；

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

@override public onRenderCell(event: 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 build 中构建代码

第 15 步：通过运行以下命令编译代码：gulp serve

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

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

在此处输入图像描述

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

在此处输入图像描述

于 2020-10-22T09:03:57.707 回答