5

SharePoint framework 解决方案添加webpart属性

 4 years ago
source link: https://www.cnblogs.com/jianyus/p/14267495.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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: "二级报表名称"
                }), ]
            }]
        }]
    };
}

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

256729-20210213131302977-1765007425.png

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK