SPFX pane部件属性窗格

Question

我正在尝试将sharepoint列表追加到spfx pane部件属性窗格的下拉列表中。但它不会被追加。请帮帮忙。

​

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;
  });
}

​

Answer 1

无论您在何处调用fetchOptions，请确保在promise解析后调用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,
  // ...
})

Answer 2

SPFX部件属性-在中动态填充下拉选项

我们用当前站点中的SharePoint列表填充下拉列表。我们通过对SharePoint的异步REST调用来实现这一点

/* need some imports e.g.:
import { IODataList } from '@microsoft/sp-odata-types';
import { SPHttpClient, SPHttpClientConfigurations, 
SPHttpClientConfiguration, SPHttpClientResponse, ODataVersion, 
ISPHttpClientConfiguration } from '@microsoft/sp-http';
*/
private dropdownOptions: IPropertyPaneDropdownOption[];
private listsFetched: boolean;

// these methods are split out to go step-by-step, but you could refactor 
and be more direct if you choose..

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 = this.context.pageContext.web.absoluteUrl + `/_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;
});
}

然后在getPropertyPaneConfiguration方法中，我们在开始时启动获取数据的调用，然后在控件声明中，我们只需将options属性设置为保存数组的变量：

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
 if (!this.listsFetched) {
  this.fetchOptions().then((response) => {
    this.dropdownOptions = response;
    this.listsFetched = true;
    // now refresh the property pane, now that the promise has been 
    resolved..
    this.onDispose();
  });
}

return {
 pages: [
   {
     header: {
      description: "Basic settings"
    },
    groups: [
        {
        groupName: "COB dropdown field (PropertyPaneDropdown)",
        groupFields: [
          PropertyPaneDropdown('dropdownProperty', {
            label: 'This is the label',
            options: this.dropdownOptions
          })
        ]
      }
    ]
   }
  ]
 }
}

请参阅此Web part properties – dynamically populate Dropdown

Answer 3

你可以使用PropertyFieldListPicker控件，它非常容易使用。

此控件生成可在SharePoint框架web部件的属性窗格中使用的列表选取器字段。

该控件可以配置为单选或多选列表选取器。请查看以下链接：

https://sharepoint.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/