这是我参与11月更文挑战的第5天，活动详情查看：11月更文挑战
主要用途:启动外部进程+选择按钮时执行自定义脚本
1.生成SharePoint Framework 框架
yo @microsoft/sharepoint
Use the following to complete the prompt that is displayed (if additional options are presented, accept the default answer) :
- Which type of client-side component to create? : Extension
- What type of client-side extension to create? : ListView Command Set
- What is your Command Set name? : CommandSetDemo
2.定义命令集按钮
manifest.json 这个文件决定什么能显示出来
"items": {
"ONE_ITEM_SELECTED": {
"title": { "default": "One Item Selected" },
"iconImageUrl": "icons/request.png",
"type": "command"
},
"TWO_ITEM_SELECTED": {
"title": { "default": "Two Items Selected" },
"iconImageUrl": "icons/cancel.png",
"type": "command"
},
"ALWAYS_ON": {
"title": { "default": "Always On" },
"iconImageUrl": "icons/cancel.png",
"type": "command"
}
}
./src/extensions/commandSetDemo/CommandSetDemoCommandSet.ts
接口ICommandSetDemoCommandSetProperties 更新成员变量:
messagePrefix: string;
onListViewUpdated() in the CommandSetDemoCommandSet.
const one_item_selected: Command = this.tryGetCommand('ONE_ITEM_SELECTED');
if (one_item_selected) {
one_item_selected.visible = event.selectedRows.length === 1;
}
const two_item_selected: Command = this.tryGetCommand('TWO_ITEM_SELECTED');
if (two_item_selected) {
two_item_selected.visible = event.selectedRows.length === 2;
}
onExecute() 在CommandSetDemoCommandSet
switch (event.itemId) {
case 'ONE_ITEM_SELECTED':
Dialog.alert(`${this.properties.messagePrefix} ONE_ITEM_SELECTED command checked; Title = ${event.selectedRows[0].getValueByName('Title')}`);
break;
case 'TWO_ITEM_SELECTED':
Dialog.alert(`${this.properties.messagePrefix} TWO_ITEM_SELECTED command checked; Title = ${event.selectedRows[event.selectedRows.length-1].getValueByName('Title')}`);
break;
case 'ALWAYS_ON':
Dialog.alert(`${this.properties.messagePrefix} ALWAYS_ON command checked. Total selected: ${event.selectedRows.length}`);
break;
default:
throw new Error('Unknown command');
}
该onInit()方法返回一个Promise对象，可用于执行任何需要在呈现命令集之前完成的初始化代码。
接下来，执行onListViewUpdated()事件。当命令集按钮首次呈现在页面上以及列表视图状态更改时，将调用此方法。页面上呈现的每个按钮都会调用此方法，因此如果您在组件的清单中注册了三个按钮，则每次列表视图状态更改时都会调用此方法三次。
最后一步是实现onExecute()用户选择按钮时调用的事件。与onListViewUpdated()事件类似，这是在组件清单中注册的所有按钮之间共享的方法。您可以使用传递给itemId的IListViewCommandSetExecuteEventParameters对象上的属性onExecute()来确定哪个按钮触发了单击事件。
- 在页面上加载 SharePoint 框架（如果尚不存在）
- 来自本地 Web 服务器的manifest.js文件的位置，该文件告诉 SharePoint 可以在页面上放置哪些自定义组件
- SharePoint 框架应加载并放置在页面上的哪个组件
- 特定于每个组件的附加属性
3.更新部署配置
./sharepoint/assets/elements.xml
ClientSideComponentProperties="{"messagePrefix":"[command_set_prefix]"}"
这还是相当于xml写JSON
4.测试Command Set
打开 ./config/serve.json文件。
复制列表属性的完整 URL（包括AllItems.aspx）serveConfigurations.default.pageUrl。
找到serveConfigurations.default.customActions.properties对象。
将properties对象的值更改为以下 JSON：
"properties": {
"messagePrefix": "[command_set_prefix]"
}
通过执行以下命令运行项目：
gulp serve
选一个选两个会引起显示的不一样,点击Always on 会弹窗,创建了一个 SharePoint 框架 (SPFx) 命令集扩展，用于在 SharePoint 列表中显示自定义按钮。主要用途:启动外部进程+选择按钮时执行自定义脚本
还是有一点点用处的,不至于太没用
