SharePoint framework 解决方案添加webpart属性

 

　　前言

　　最近，在写SharePoint Framework 的解决方案的时候，有些属性需要在右侧属性面板里进行配置，也就是需要添加webpart的属性。

　　正文

　　首先，需要导入相关的库，如下图：

import {
    IPropertyPaneConfiguration,
    PropertyPaneTextField,
    PropertyPaneButton,
    PropertyPaneCheckbox,
    IPropertyPaneButtonProps
}
from '@microsoft/sp-property-pane';

　　然后，需要添加相关的属性代码，如下图：

protected getPropertyPaneConfiguration() : IPropertyPaneConfiguration {
    return {
        pages: [{
            header: {
                description: strings.PropertyPaneDescription
            },
            groups: [{
                groupName: strings.BasicGroupName,
                groupFields: [PropertyPaneTextField('description', {
                    label: strings.DescriptionFieldLabel
                })]
            },
            {
                groupName: "Configure List",
                // isCollapsed: true, //控制折叠属性
                groupFields: [PropertyPaneTextField("configureList", {
                    label: "Configure List Url"
                }), PropertyPaneCheckbox("topreport", {
                    text: "一级报表"
                }), PropertyPaneTextField("secondListName", {
                    label: "二级报表名称"
                }), ]
            }]
        }]
    };
}

　　我们查看一下效果，如下图：

　　结束语

　　SharePoint framework webpart的属性面板有很多类型，我们这里只是演示了这两种，有更多的属性，还是需要参考官方的sdk。