在SharePoint服务器端webpart开发中,我们可以在webpart的属性编辑器中自定义webpart的属性,来配置webpart。在使用SharePoint Framework创建的客户端webpart中,一样可以方便的自定义webpart的属性编辑面板,添加新的属性来配置我们的webpart。
在创建完成一个webpart项目之后,webpart属性编辑面板中会默认添加一个属性description:
这个description属性,是在webpart中,通过如下代码添加的。首先在webpart的属性中,定义description:
export interface IPropertyPaneWebPartProps {
description: string;
}
然后在“getPropertyPaneConfiguration”方法中,定义这个属性的编辑控件,从名字"PropertyPaneTextField"可以看出来,这是一个文本框:
以上代码就是定义description属性,并且在属性编辑面板里展示一个文本框。当用户修改文本框中的值的时候,webpart会将新的值保存起来,作为webpart的配置,这样我们在webpart开发中就可以使用this.properties.description获取属性值了。
先来看属性编辑面板,这个属性编辑面板包含如下三个部分:
1, 页面(page)
页面包含header属性,用来作为page的标题或者描述,也包含组,一个组是一些属性控件的集合。在pages这个数组中可以添加多个页面,如果指定了多个页面,会自动分页显示各个页面。
2,组(group)
组包含一个groupName属性,用来指定组的名字,组是属性控件的集合,可以将不同的属性控件放在不同的组里。在groups这个数组中可以添加多个组。
关于页面和组的其他属性,可以参考使用SharePoint Framework开发webpart的一些技巧汇总
3, 属性控件(field)
属性控件用来展示和编辑属性值。在groupFields这个数组中配置。除了这个“PropertyPaneTextField”属性控件之外,目前SharePoint Framework提供的开箱即用的属性控件有:
- Button
- Checkbox
- Choice group
- Dropdown
- Horizontal rule
- Label
- Link
- Slider
- Textbox
- Multi-line Textbox
- Toggle
- Custom (用于自定义属性控件)
在使用它们之前,首先需要导入这些控件:
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneButton,
PropertyPaneCheckbox,
PropertyPaneChoiceGroup,
PropertyPaneDropdown,
PropertyPaneLabel,
PropertyPaneLink,
Proper