SPFx 自定义字段增强库使用指南

班岑航Harris

于 2024-09-01 07:57:52 发布

阅读量567

点赞数 11

本文链接：https://blog.csdn.net/gitblog_01160/article/details/141768522

版权

SPFx 自定义字段增强库使用指南

sp-client-custom-fieldsWeb Site: https://oliviercc.github.io/sp-client-custom-fields项目地址:https://gitcode.com/gh_mirrors/sp/sp-client-custom-fields

项目介绍

SPFx 自定义字段增强库（sp-client-custom-fields）是由Olivier Carpentier开发的一个强大工具包，包含30多个组件，旨在深度定制SharePoint框架（SharePoint Framework, SPFx）中的Web部件自定义字段体验。这个开源项目让开发者能够轻松创建交互性更强、用户体验更佳的配置界面，使得编辑Web部件时更加得心应手。

主要功能

丰富的自定义字段类型：如日期时间选择器、文档选择器、图标选择等。
兼容Office UI Fabric：确保与SharePoint设计语言一致。
多语言支持：提供国际化设置。

项目快速启动

安装依赖

首先，确保你的开发环境已经配置好SPFx开发工具链。然后，在你的SPFx Web部件项目根目录下执行以下命令来安装此库：

npm i --save sp-client-custom-fields

配置项目

接着，打开config/config.json文件，并添加以下内容到externals和localizedResources部分：

{
  "externals": {
    "sp-client-custom-fields": "node_modules/sp-client-custom-fields/dist/sp-client-custom-fields.bundle.js"
  },
  "localizedResources": {
    "sp-client-custom-fields/strings": "/node_modules/sp-client-custom-fields/lib/loc/{locale}.js"
  }
}

最后，运行Gulp任务以编译并准备使用新组件：

gulp

此时，你的项目已准备好使用该库中的自定义属性字段。

示例代码片段

在你的Web部件代码中引入并使用一个自定义字段示例：

import { PropertyFieldCustomList } from 'sp-client-custom-fields';

// 在webpart的propertyFields数组中添加自定义字段
export default class YourWebPart extends BaseClientSideWebPart<YourWebPartProps> {

  // ...

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected render(): void {
    // 渲染逻辑...
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                new PropertyFieldCustomList('customList', {
                  label: '自定义列表',
                  choices: [
                    { key: 'option1', text: '选项1' },
                    { key: 'option2', text: '选项2' },
                  ],
                }),
                // 其他字段配置...
              ]
            }
          ]
        }
      ]
    };
  }
}