（六）创建并调试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中使用这个字段。

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

Delphi插件创建、调试与使用应用程序扩展
Delphi插件创建.调试与使用应用程序扩展翻译 : MiracleZ 有没有使用过Adobe Photoshop?如果用过,你就会对插件的概念比较熟悉.对外行人来说,插件仅仅是从外部提供给应用 ...
SAP CRM WebClient UI端到端的字段扩展
所谓端到端的字段扩展,就是在WebClient UI上增添新的字段,允许客户维护,并保存到数据库里. 根据Jerry文章 Jerry的WebClient UI 42篇原创文章合集所以端对端的字段扩展 ...
如何创建自己的 Google Chrome 扩展程序
如何创建自己的 Google Chrome 扩展程序如果您是 Google Chrome 用户,您可能已经在浏览器中使用了一些扩展程序. 你有没有想过如何自己建造一个?在本文中,我将向您展示如何从头 ...
RFC7814基于BGP/MPLS IP VRF的子网扩展解决方案
基于BGP/MPLS IP VRF的子网扩展解决方案 ---学习笔记 1引言 2术语 3方案描述 3.1单播 3.1.1子网内单播 3.1.2子网间单播 3.2组播 3.3主机发现 3.4ARP/ND ...
普冉PY32系列(六) 通过I2C接口驱动PCF8574扩展的1602LCD
目录普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境普冉PY32系列(三) P ...
Mybatis优雅存取json字段的解决方案 - TypeHandler (一)
起因在业务开发过程中,会经常碰到一些不需要检索,仅仅只是查询后使用的字段,例如配置信息,管理后台操作日志明细等,我们会将这些信息以json的方式存储在RDBMS表里假设某表foo的结构如下,字段b ...
VS2013无法创建WebForm和MVC项目的解决方案
VS2013无法创建WebForm和MVC项目的解决方案: 错误提示:系统找不到指定的文件(Exception HRESULT:08x0070002) 究其原因,竟然是没有安装NuGet. 打开＂工具 ...
（六）elasticsearch 集群网络超时解决方案 --- Elasticsearch 集群搭建
上一篇: (五)elasticsearch 集群扩展 --- Elasticsearch 集群搭建因为网络原因,可能会有节点被踢出集群,如果网络恢复,节点会再次加入集群,但是这中间的过程是比较耗费性 ...
Java并发编程原理与实战六：主线程等待子线程解决方案
Java并发编程原理与实战六:主线程等待子线程解决方案参考文章: (1)Java并发编程原理与实战六:主线程等待子线程解决方案 (2)https://www.cnblogs.com/pony1223 ...

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

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

最新文章

热门文章