首页 > 解决方案 > SPFX Web 部件属性窗格

问题描述

我正在尝试在 spfx webpart 属性窗格的下拉列表中附加共享点列表。但它没有被附加。请帮忙。

export default class ScrollTickerWebPart extends BaseClientSideWebPart<IScrollTickerWebPartProps> {
  private dropdownOptions: IPropertyPaneDropdownOption[];
  private listsFetched: boolean;
  private fetchLists(url: string) : Promise<any> {
    return this.context.spHttpClient.get(url, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
      if (response.ok) {
        return response.json();
      } else {
        console.log("WARNING - failed to hit URL " + url + ". Error = " + response.statusText);
        return null;
      }
    });
}
private fetchOptions(): Promise<IPropertyPaneDropdownOption[]> {
  var url = "https://abc.sharepoint.com/teams/SharepointPOC" + "/_api/web/lists?$filter=Hidden eq false";

  return this.fetchLists(url).then((response) => {
      var options: Array<IPropertyPaneDropdownOption> = new Array<IPropertyPaneDropdownOption>();
      response.value.map((list: IODataList) => {
          console.log("Found list with title = " + list.Title);
          options.push( { key: list.Id, text: list.Title });
      });

      return options;
  });
}

标签: spfx

解决方案


无论你在哪里打电话fetchOptions,请确保this.context.propertyPane.refresh()在承诺解决后打电话。这是强制使用新的dropdownOptions.

举个例子(其他地方onPropertyPaneConfigurationStart也可以):

protected onPropertyPaneConfigurationStart(): void {
  this.fetchOptions().then(options => {
    this.dropdownOptions = options;
    this.context.propertyPane.refresh();
  });
}

这是假设您PropertyPaneDropdown的设置如下所示,this.dropdownOptions最初是在哪里undefined,并且您希望通过以下方式异步加载它们fetchOptions()

PropertyPaneDropdown('someProperty', {
  // ...
  options: this.dropdownOptions,
  // ...
})

推荐阅读