（八）使用SPFx命令集扩展自定义列表操作

        在上一篇博客（七）创建一个字段并在SharePoint Online中使用中，我们创建了一个新的字段并部署在SharePoint Online中，本文将介绍如何使用SPFx提供的命令集扩展（CommandSet Extension)来自定义一个操作按钮，并将自定义的操作按钮添加到列表中。

        首先还是使用Yeoman创建命令集扩展的解决方案：

        在指定客户端组件的时候，选择Extension，然后选择ListView CommandSet Extension：

        创建完毕时候打开项目，可以在HelloWorldCommandSet.manifest.json文件中看到，解决方案模板已经为我们创建好了两个command操作：

    一个COMMAND_1，另一个是COMMAND_2，并且指定了它们的标题，图标和类型。下面看一下HelloWorldCommandSet.ts文件，所有的命令集扩展都要继承“BaseListViewCommandSet"这个基类，这个类提供了三个方法：

• onInit()方法用于初始化设置。在我们的代码中并没有做什么设置，只是输出log信息。
• onListViewUpdated()方法在页面状态改变的时候执行，例如刷新页面。代码中在这个方法中控制自定义操作按钮的显示。例如对于COMMAND_1按钮，只有当用户选择了一个item的时候才显示出来（使用visible属性来控制）
• onExecute()方法是在点击自定义操作按钮的时候执行。代码中使用Dialog对象，在点击按钮的时候弹出对话框。

        

        接下来我们看一下这两个操作在列表中的样子，首先打开manifest.json文件，将id复制下来：

        使用gulp serve --nobrowser命令启动本地调试环境，打开SharePoint Online中的列表，将以下查询字符串附加到列表url之后，注意其中的id的值需要提供成刚刚复制的id的值：

?loadSpfx=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"d7c64898-1076-47bc-8e30-416e902aa573":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One item is selected in the list.","sampleTextTwo":"This command is always visible."}}}

        其中location的值可以是以下三种选项：

• ClientSideExtension.ListViewCommandSet.CommandBar  --  自定义操作按钮出现在页面上方的命令栏中
• ClientSideExtension.ListViewCommandSet.ContextMenu  --  自定义操作按钮出现在item的操作菜单中
• ClientSideExtension.ListViewCommandSet  --  自定义操作按钮既出现在命令栏中又出现在操作菜单中

        刷新页面，会提示是否运行调试脚本，点击“加载调试脚本”

        选择一个列表中的一个item项目，可以看到这两个操作已经在列表中显示出来了：

        当点击任意一个按钮的时候，会弹出对话框：

        接下来我们把自定义的操作部署到SharePoint Online中去，在部署之前需要介绍一下elements.xml这个文件，它是SharePoint使用的功能定义文件，其中定义了自定义操作出现在哪些列表上，出现在页面的位置等等:

        其中“RegistrationId"指定自定义操作命令出现在哪些列表中，”100“是指自定义列表，如果是文档库，这里应该指定为”101“。每种列表对应的值可以参考微软官方文档。”RegistrationType“指定自定义操作命令的注册类型，可以是List也可以是ContentType，或者其他类型。Location刚刚介绍过，用于指定自定义操作在页面中的位置。”ClientSideConponentId“就是在manifest.json文件中定义的自定义扩展的Id，ClientSideComponentProperties可以指定一些属性，在自定义操作中使用。

        使用gulp package-solution命令打包：

        打包完成之后会在solution文件夹中出现spfx-command.sppkg文件：

        然后打开SharePoint Online的管理中心，将这个文件上传到SharePoint Online的应用程序目录中：

        然后将自定义操作添加到网站应用中：

        重新打开列表，确认启动了gulp serve --nobrowser，就可以看到我们自定义的操作了：