Question

我正在尝试在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;
  });
}

Answer 1

无论您打电话给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,
  // ...
})

Answer 2

Web部件属性–在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 Framework Web部件的属性窗格中使用。

可以将控件配置为单选列表选择器或多选列表选择器。请检查以下链接：

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

SPFX Webpart属性窗格

3 个答案: