Question

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

Answer 1

SharePoint Framework字段自定义程序扩展使您可以自定义SharePoint列表中字段数据的格式。字段定制器功能更强大，因为您可以使用它编写任何您想要控制字段显示方式的代码。在这里，我为您提供一个快速简单的示例，该示例基于字段值 SLA Met？和过期时间的条件格式来呈现状态字段值SPFx字段定制器。 enter image description here

假设我们有一个包含四个字段的列表，标题，状态，SLA达到了？和过期时间。标题是默认列。 “状态列”是一个选择字段，具有以下值“打开”，“进行中”，“待处理”，“已拒绝”，“已完成”和“已关闭”。达到SLA？列是“是/否”字段，“逾时”是“数字”字段。我的要求是，我们希望在视图表单中将状态列值显示为状态值+满足以下条件的 SLA？为“是”的超时时间，如果超时时间 >大于或等于48小时，然后显示为几天。另外，以每个“状态”值为基础，以颜色显示“状态”单元格。

解决方案：

打开Node.js命令提示符

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

步骤2：转到项目目录。 cd字段扩展名

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

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

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

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

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

步骤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类访问呈现的状态列的列表项。因此，我们应该从sp-listview-extensibility包中导入该类。

导入{ BaseFieldCustomizer， IFieldCustomizerCellEventParameters， ListItemAccessor }，来自“ @ microsoft / sp-listview-extensibility”；

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

@override 公共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命令提示符下构建代码大吃一惊

步骤15：通过运行以下命令来编译代码：喝一口

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

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

enter image description here

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

enter image description here

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

1 个答案: