（七）创建一个字段并在SharePoint Online中使用

        在上一篇博客（六）创建并调试SPFx字段扩展解决方案中我们使用Yeoman模板建立了一个SPFx字段扩展解决方案并且在SharePoint Online上演示了效果，这一篇博客将在此基础上创建一个新的字段，这个字段会对列表中的数字类型的字段求和。还是使用上一篇博客中的报销单这个列表，我希望添加一个自定义的栏，名称为”总计“，这个栏可以对报销单中的数字类型的栏求和并显示出来，如下所示：

        使用Code打开上一篇博客中创建的SPFx-field解决方案，打开HelloWorldFieldCustomizer.ts文件，将onRenderCell方法替换如下：

 @override
  public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
    let sum : number = 0;
    event.listItem.fields.forEach(
      c=>{
        if(c.fieldType == 'Number' && c.id != this.context.field.id){
          sum += parseInt(event.listItem.getValue(c))
        };
      }
    );
    let sumHTMLRed:string = `<div class='${styles.RedWarning}'>总计：${sum.toString()}</div>`;
    let sumHTMLGreen:string = `<div class='${styles.GreenOK}'>总计：${sum.toString()}</div>`;
    event.domElement.innerHTML = sum > 500 ? sumHTMLRed : sumHTMLGreen;
  }

        这段代码使用event获取当前item，然后遍历当前item包含的字段，如果字段类型为Number，并且字段不等于我们的”总计“字段，那么就使用event.listItem.getValue()方法获得这些字段的值，然后把这些字段的值加在一起。如果这些字段的总和大于500，那么就显示为红色，否则显示为绿色。其中红色和绿色的样式”styles.RedWarning“和”styles.GreenOK“是在HelloWorldFieldCustomizer.module.scss文件中定义的，打开HelloWorldFieldCustomizer.module.scss文件添加样式定义如下：

.RedWarning{
  color:red;
}
.GreenOK{
  color:green;
}

        到这里代码部分就完成了，下面我们把这个列（栏）部署到SharePoint Online中去，首先我们需要修改项目中sharepoint文件夹的asset子文件夹中的elements.xml文件：

        这个文件中定义了字段的属性，例如ID，Name, DisplayName, type类型等，我们需要修改Name为”Summary“， DisplayName为”总计“，如下所示：

        然后在Code中打开powershell控制台，执行如下命令打包解决方案:

        打包完成后，会在”sharepoint“文件夹下新增一个“solution”文件夹，其中包含一个“spfx-field.sppkg”文件，这个就是打包生成的文件：

        下面我们把这个.sppkg文件部署到SharePoint Online中去，打开SharePoint Online的管理中心，然后打开SharePoint管理中心：

        然后打开SharePoint管理中心的应用程序目录：

        如果还没有创建应用程序目录网站，首先需要创建一个：

        输入信息：

        点击确定，创建成功之后会在SharePoint管理中心的网站集中显示出来：

        创建完成之后，再次点击左边栏中的“应用程序"，然后点击”应用程序目录“，会打开应用程序目录网站如下：

        点击”适用于SharePoint的应用程序“文档库，把刚刚打包生成的spfx-field.sppkg文件上传到文档库中，上传完毕时候会弹出一个对话框，提示是否信任这个应用程序：

        点击”确定“，可以看到应用程序的状态，已经成功部署到SharePoint Online中：

        下面我们将这个应用程序添加到我们的站点中，打开需要使用这个字段的站点，在站点设置中点击”添加应用程序“:

        在站点内容中可以搜索到我们添加的字段应用程序了：

        将这个应用程序添加到站点中，然后打开”报销单“列表的列表设置，点击”从现有网站栏添加“：

        在现有网站栏中的SPFx Columns组中，可以看到”总计“这个栏了：

        将这个栏添加到列表中，然后在Code中的Powershell控制台中启动gulp serve，刷新”报销单“列表，可以看到最终的效果：

        因为我们还没有将解决方案代码部署到CDN中，目前还是在本地调试，所以要确保本地运行gulp serve，否则我们的自定义字段会加载失败。