使用 PnP 可重用属性窗格控件

  • 9 分钟

在本单元中，你将了解如何使用常用 PnP SPFx 可重用属性窗格控件项目中的第三方控件。

概述

SharePoint 框架 API 中包含的属性窗格字段控件是基本输入控件。 通过这些控件，开发人员能够为用户提供在 Web 部件上编辑公共属性的体验。 这些基本控件不包含有关当前 SharePoint 网站的任何特殊逻辑或详细信息。

例如，如果要为用户提供从属性窗格的列表中从当前网站中选择现有 SharePoint 列表的体验，将必须编写代码来检索所有 SharePoint 列表并在属性窗格中显示它们。

可以简化此常见要求，以便开发人员可以创建自定义属性窗格字段控件，在将其添加到属性窗格时，该控件包含从当前 SharePoint 网站检索所有列表并在下拉列表控件中显示这些列表的逻辑。 还可以在控件上包括设置以包括或排除隐藏列表、排除 SharePoint 基础结构列表（如母版页库或客户端资产库）或其他设置。

这些 智能控件 随后可以用于多个 SharePoint 框架客户端 Web 部件项目中，从而简化这些项目中的代码，因为它们不必使用网站中所有 SharePoint 列表的列表填充该属性窗格。

SharePoint 框架的属性窗格控件

SharePoint 模式和做法 (PnP) 组提供开源库，即 PnP 可重用属性窗格控件，其中包含用在 SharePoint 框架客户端 Web 部件属性窗格中的可重用控件。 这些控件包括绑定到当前 SharePoint 网站的此可重用逻辑。

有关这些控件的详细信息，请参阅 SharePoint 框架解决方案的可重用属性窗格控件

此库包含可在项目中使用的多个控件。 其中一些控件包括：

  • PropertyFieldColorPicker：从样本中选择颜色或使用 RGB 值。

    PropertyPaneFieldControlPicker 控件的屏幕截图。

  • PropertyFieldDateTimePicker：从友好的选取器控件中选择日期和时间。

    PropertyFieldDateTimePicker 控件的屏幕截图。

  • PropertyFieldListPicker：从当前网站中选择 SharePoint 列表。

    PropertyFieldListPicker 控件的屏幕截图。

  • PropertyFieldPeoplePicker：从当前网站的目录中选择人员或组。

    PropertyFieldPeoplePicker 控件的屏幕截图。

在项目中使用 PnP 可重用属性窗格控件

要在项目中使用 PnP 可重用属性窗格控件，首先安装包含控件的 NPM 包：

npm install @pnp/spfx-property-controls --save

接下来，仅将控件导入到要使用的 Web 部件文件中。

import {
  PropertyFieldListPicker,
  PropertyFieldListPickerOrderBy
} from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker’;

提示

确保仅导入要使用的控件。 导入特定对象时，捆绑过程在生成的捆绑包中仅包括这些对象及其依赖项。 否则，捆绑包中将包含整个库（包括项目中未使用的控件）。

最后，将控件添加到 getPropertyPaneConfiguration() 方法中 groupFields 的列表：

groupFields: [
  PropertyFieldListPicker('lists', {
    label: 'Select a list',
    selectedList: this.properties.lists,
    includeHidden: false,
    orderBy: PropertyFieldListPickerOrderBy.Title,
    disabled: false,
    onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
    properties: this.properties,
    context: this.context,
    onGetErrorMessage: null,
    deferredValidationTime: 0,
    key: 'listPickerFieldId'
  })
]

摘要

在本单元中，你了解了如何使用常用 PnP SPFx 可重用属性窗格控件项目中的第三方控件。