生成自定义属性窗格字段控件

已完成

在本单元中，你将了解客户端 Web 部件的自定义属性窗格控件。

概述

适用于客户端 Web 部件的 SharePoint 框架 API 包括以下可用于自定义 web 部件的属性窗格字段控件：

• 标签
• 文本框
• 复选框
• 下拉菜单
• 链接
• 滑块
• 切换

当你希望自定义控件的呈现方式时，开发人员还可以实现自定义属性窗格字段。

实现自定义属性窗格字段控件

要实现自定义属性窗格字段控件，首先从 @microsoft/sp-property-pane 类中导入 PropertyPaneCustomField 类。

接下来，将属性添加到 Web 部件的界面，并将其映射到字段控件。 这样做的方式与将提供的控件之一映射到属性的方式相同：按名称指定属性作为控件中的第一个参数：

import { PropertyPaneCustomField } from '@microsoft/sp-property-pane';

export interface IHelloPropertyPaneWebPartProps {
  customField: string;
}

export default class HelloPropertyPaneWebPart extends BaseClientSideWebPart<IHelloPropertyPaneWebPartProps> {
  protected get propertyPaneSettings(): IPropertyPaneSettings {
    return {
      pages: [{
        header: { description: strings.PropertyPaneDescription },
        groups: [{
          groupName: strings.BasicGroupName,
          groupFields: [
            PropertyPaneCustomField('customField', { /* ... */ } ),
          ]
        }]
      }]
    };
  }
}

借助 PropertyPaneCustomField 字段控件，开发人员能够定义控件的自定义呈现。 为此，请实施接受单个 HTMLElement 参数的方法。 此元素是对在页面上呈现控件的 <div> 的引用。

private _customFieldRender(elem: HTMLElement): void {
  elem.innerHTML = '<div><h1>This is a custom field.</h1></div>’;
}

最后，将函数绑定到 PropertyPaneCustomField 属性上的 onRender 属性：

groupFields: [
  PropertyPaneCustomField('customField', {
    onRender: this._customFieldRender.bind(this);
  })
]

创建自定义属性窗格控件

借助 PropertyPaneCustomField 字段控件，开发人员能够定义控件的呈现方式。 用于呈现控件的所有代码都位于使用它的 Web 部件中。

虽然此解决方案适用于许多一次性方案，但你可能有更复杂的业务需求。 在此方案中，可以创建自定义属性窗格控件，这些控件可为你提供更多控制权，并且可在 web 部件项目中重复使用。

要在 web 部件中使用自定义字段控件，只需将其导入项目并添加对它的引用，如所包含的字段控件：

groupFields: [
  PropertyPaneContinentSelector('myContinent', <IPropertyPaneContinentSelectorProps>{
    label: 'Continent where I currently reside',
    disabled: false,
    selectedKey: this.properties.myContinent,
    onPropertyChange: this.onContinentSelectionChange.bind(this),
  })
]

在下一个单元中，你将使用上图所示的自定义字段控件。

摘要

在本单元中，你将了解客户端 Web 部件的自定义属性窗格控件。