Prerequisite:
Make sure installation of spfx is already done and we are
using pnp to access the SharePoint lists from current site so make sure pnp is
also installed.
How to bind property pane Dropdown list in Client side
webpart in SharePoint Framework.
We have a scenario suppose that we have to bind a dropdown
list with current site’ s lists/libraries.
Just need to follow
below instruction step by step
1.
Create a Solution .
2.
Add a Webpart to the solution.
3.
Declare the property pane “PropertyPaneDropdown” for dropdown list.
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneDropdown,
} from '@microsoft/sp-webpart-base';
4.
Come to the property pane under “getPropertyPaneConfiguration”.
5.
Define your own group of property pane or
leave the default and add under existing
group fields.
protected
getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description:
strings.PropertyPaneDescription
},
groups: [
{
groupName:
strings.BasicGroupName,
groupFields: [
PropertyPaneDropdown('dropdownLists',
{
label: "Lists",
options:this._dropdownOptions,
disabled:this.listsDropdownDisabled
})
]
}
]
}
]
};
}
6.
Declare Interface “IPropertyPaneDropdownOption” and “IODataList” to map the dropdown list with
the list
export interface
IPropertyPaneDropdownOption
{
key:string;
text:string;
}
export interface IODataList
{
Id:string;
Title:string;
}
7.
Define two variables for dropdown option and to disable
the dropdown while lists loading just below the .
export default class HellowWebpartWebPart extends BaseClientSideWebPart<IHellowWebpartWebPartProps> {
private _dropdownOptions: IPropertyPaneDropdownOption[];
private listsDropdownDisabled: boolean =
true;
8.
Now override the existing method onPropertyPaneConfigurationStart()
and paste the below code
protected
onPropertyPaneConfigurationStart(): void
{
//Bind DropDown List in Peropert pane
this.listsDropdownDisabled =
!this._dropdownOptions;
if (this._dropdownOptions)
{
return;
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement,
'_dropdownOptions');
pnp.sp.web.lists.get()
.then((listOptions: IODataList[]): void
=>
{
var options:
Array<IPropertyPaneDropdownOption> = new
Array<IPropertyPaneDropdownOption>();
listOptions.map((list: IODataList)
=> {
options.push( { key: list.Id, text:
list.Title });
});
this._dropdownOptions=options
this.listsDropdownDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
9.
Start terminal and run gulp bundle
10.
Now run the gulp serve –nobrowser command in
terminal
11.
Open workbench on the site open direct link https://tenant.sharepoint.com/sites/demo/_layouts/15/workbench.aspx
12.
Add client side webpart on the bench.
13.
Click on Edit properties
14.
You see on
right side in properties will be dropdown list bind with current site’s
lists/libraries
Happy coding !!!
