在上一篇博客(四)修改webpart并在SharePoint Online中调试中,我们在SharePoint Online在线工作台中使用”this.context.pageContext.web.title“获取到了当前站点的名称,下面将介绍如何实现增删查改操作。微软提供了一个library pnp-js-core,封装了REST API,可以使用这个库来与SharePoint Online交互。
首先打开powershell进入webpart项目目录,使用如下npm命令安装pnp-js-core库。
npm i --save @pnp/sp @pnp/common @pnp/odata @pnp/logging
安装完成之后可以在项目的node_modules中看到新添加的库文件如下:
添加完成之后,我们需要在webpart中实现以下四个操作:
- 读取当前站点下的列表
- 在指定列表中创建一个item
- 修改item
- 删除item
使用Code打开项目,在HelloWorldWebPart.ts文件的import代码区域添加如下代码,引入一个对象:sp
sp对象是对SharePoint REST API的封装,我们需要使用sp对象与SharePoint Online交互。接下来我们参照上一篇博客内容在webpart的属性编辑器中添加一个名字为“列表名称”的文本框,用于指定需要访问的列表。还是需要三步,第一步确保import中导入一个文本框控件:
第二步在接口中定义列表名称属性:
第三步修改getPropertyPaneConfiguration()方法在webpart属性编辑器中显示这个文本框控件:
然后添加如下get函数,禁用响应式的属性编辑功能:
disableReactivePropertyChanges是webpart基类BaseClientSideWebPart的一个属性,默认是false,也就是使用响应式方式,当用户修改webpart属性编辑器中的webpart属性的时候,webpart会即时根据属性的值来展示webpart,上一篇博客中我们为webpart添加了一个背景颜色的属性,当选择下拉菜单中的颜色的时候,webpart的背景颜色会立即改变。现在将这个属性值设置为true,webpart属性编辑器会自动添加一个“应用”的按钮,对webpart属性所做的修改,不会立即改变webpart,而是要点击这个按钮,才会改变webpart。
添加了列表名称这个属性之后,webpart的属性编辑器是这样子的,注意下方自动添加了一个“应用”按钮:
添加了这个webpart属性之后,让我们添加CRUD操作需要的UI,也就是修改render()方法,添加一些页