（六）创建并调试SPFx字段扩展解决方案

        在上一篇博客（五）在webpart中实现SharePoint Online的增删查改（CRUD）操作中，我们在webpart里实现了与SharePoint Online的交互，这篇博客将使用SPFx提供的字段扩展（field Customizer）修改列表中某个字段的内容。

        首先创建一个新的文件夹“spfx-field”，然后在这个文件夹中，使用Yeoman创建SPFx解决方案，注意在创建向导的“Which type of client-side component to create”问题上选择“Extension”：

        之后会出现三种扩展方式，我们选择“Field Customizer”来创建一个字段扩展：

        然后就是指定字段名称和描述，我们还是使用默认的HelloWorld，最后选择js框架，这里选择“no JavaScript framework”：

        创建好解决方案之后，我们使用Code打开，可以看到项目结构与SPFx webpart类似：

        

        解决方案创建完成之后，SPFx也为我们创建了一个简单的字段扩展，我们可以使用如下方法在SharePoint Online的列表或者文档库中查看它是如何修改当前已经存在的字段内容的：

        1， 打开SharePoint Online站点，创建一个列表，名称为“报销单”，其中有员工姓名，餐饮费（数字类型），住宿费（数字类型）三个列，如下所示：

        我们希望扩展“餐饮费”这个字段，例如更改这个字段的内容和样式等等，就需要知道这个字段的“internalname”，查找字段的internalname，可以进入列表设置，然后点击这个列进入栏编辑页面，在url中找到这个字段的，已经被url编码之后的internalname：

        从url里我们可以找到Field=%5Fx9910%5F%5Fx996e%5F%5Fx8d39%5F，其中的“%5Fx9910%5F%5Fx996e%5F%5Fx8d39%5F”就是这个“餐饮费”栏的internalname，url解码之后的值是: "_x9910__x996e__x8d39_"，也就是将%5F转换为下划线“_"。这个internalname的值一会儿将会用到。

        2， 启动本地调试环境：gulp serve --nobrowser

        3， 在解决方案代码中的“HelloWorldFieldCustomizer.manifest.json”文件中，找到并复制ID：

        4， 打开“报销单”列表，在列表的URL中附加以下查询字符串， 其中:

        "_x9910__x996e__x8d39_"需要替换为你的列表中的栏的internalname

        "002c7536-362f-46dd-8dc8-8bc225f6302b"需要替换成刚刚复制的你的解决方案中的ID

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"_x9910__x996e__x8d39_":{"id":"002c7536-362f-46dd-8dc8-8bc225f6302b","properties":{"sampleText":"Hello!"}}}

        将上述字符串附件到url上之后，在我的环境上的完整的url如下所示：

https://yangsancheng.sharepoint.com/sites/SPFx/Lists/List2/AllItems.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"_x9910__x996e__x8d39_":{"id":"002c7536-362f-46dd-8dc8-8bc225f6302b","properties":{"sampleText":"Hello!"}}}

        5， 回车刷新页面，会弹出如下提示框，点击“加载调试脚本”：

        6，可以看到费用总计这里出现了文字：Hello!: 100

        到这里我们扩展了“餐饮费”这个字段的展示内容，在字段的值的前面添加了”Hello!:“字样，除此之外还可以更改这个字段的样式，下一篇博客我们将讲解代码，然后创建一个字段（而不是扩展已存在的字段）并在SharePoint Online中使用这个字段。