SPFX webpart property pane

Question

I am trying to append sharepoint lists in dropdown of spfx webpart property pane. but its not getting appended. please help out.

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

Wherever you call fetchOptions, make sure to call this.context.propertyPane.refresh() after the promise resolves. This is needed to force a re-render of the property pane with the new dropdownOptions.

As an example (somewhere other than onPropertyPaneConfigurationStart is fine as well):

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

This is assuming that your PropertyPaneDropdown is setup something like below, where this.dropdownOptions are initially undefined, and you are wanting to asynchronously load them with fetchOptions():

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

Answer 2

Web part properties – dynamically populate Dropdown options in SPFX

we populate the dropdown with the SharePoint lists in the current site. We do this with an async REST call to SharePoint

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

Then in the getPropertyPaneConfiguration method, we kick-off the call to fetch the data at the beginning, and then in the control declaration we simply set the options property to our variable holding the array:

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

Refer this Web part properties – dynamically populate Dropdown

Answer 3

You can use PropertyFieldListPicker control which is really easy to use.

This control generates a list picker field that can be used in the property pane of your SharePoint Framework web parts.

The control can be configured as a single or multi-selection list picker. Please check the below link :

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