SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

SharePoint Framework Extension分为3种

1. Application Customizer  一般用来给导航或者页脚添加自定义组件样式

2. Field Customizer  一般用来修改视图下面列表栏显示样式

3. List view command set  一般用来给List 添加自定义的Ribbon button,实现定制Modern页面List功能需求

本文介绍第3中如何给sharepoint online modern list view页面定制ribbon button.

下面以图文的方式介绍下如何创建一个list view command set来获取选中item的信息:site url, list title, item id

1. 创建solution目录

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

2. 创建sharepoint framework extension组件

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

3. 创建List view command set组件

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

4. 添加逻辑获取选中item的site url, list title, id

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

5. 本地测试extension,修改serve.json中的pageUrl为自己的sharepoint online site list view链接

6. gulp serve 运行测试

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

7.效果图

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

8.打包部署

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

将打包出来的包文件上传到sharepoint online app catalog site中

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

SharePoint Framework Extension- 添加List view command set 到List或者Document Library中

9.最后一步还需要安装app到当期site中,这样就实现了在LIst和Library中添加list view command set.