Adding Slider Property To SPFX Web Part Properties Pane

Introduction

In this article, you will learn how to add slider property to SharePoint Framework Web part properties pane.

Several types of Web part properties are available, which can be added to SPFx Web part properties pane. Here, we will see how to add slider property and a basic sample to load SharePoint list content on the Web part, which is based on the slider value.

Slider property definition

The definition of Property Pane slider method is given in the links below.

Note

The property definition might be changing, since the SPFx is still under preview. The samples shown below are not for production environments, unless the SPFx is fully available for use.

The method PropertyPaneSlider(targetProperty,properties) will create the property in SPFx Web part properties pane. TargetProperty denotes the property name (identifier). The properties denote the property customizations. They contain,

label - Text to be displayed on the property.
min - Numeric minimum value of slider.
max - Numeric maximum value of slider.
step - Difference between the adjacent values (optional).
value - Initial value (optional).
showValue - Boolean, To show the value? (optional)
disabled - Boolean, to be disabled? (optional)

Implementation

Let us look at the implementation. Let us retrieve SharePoint items from SharePoint list, using the slider value. Here, the number of items retrieved are controlled, using the slider property.

The property is defined in the getPropertyPaneConfiguration method of the Web part property class. The snippet given below shows the property definition. Other properties can also be added.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneSlider('sliderproperty',{
label:"Max Items",
min:5,
max:20,
value:5,
showValue:true,
step:1
})
]
}
]
}
]
};
}

The property value can be retrieved, using the property name under the properties collection (this.properties.sliderproperty). Remember, this property name should be defined in Web part properties file. This has been explained in my previous article.

The custom methods are used to retrieve the data from SharePoint list. The filter is applied with the help of the slider value to the REST API to control the list items count. The methods given below shows the implementation.

public render(): void {
// Render the items in tabular format
this.domElement.innerHTML = `
<div class="${styles.listItemsForm}">
<div class="${styles.Table}">
</div>
</div>`;
this.LoadData();
}
private LoadData(): void{
if(this.properties.sliderproperty != undefined){
let url: string = this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('TestList')/items?$select=Title,Created,Author/Title&$expand=Author&$top=${this.properties.sliderproperty}`;
this.GetListData(url).then((response)=>{
// Render the data in the web part
this.RenderListData(response.value);
});
}
}
private GetListData(url: string): Promise<spListItems>{
// Retrieves data from SP list
return this.context.spHttpClient.get(url, SPHttpClient.configurations.v1)
.then((response: Response) => {
return response.json();
});
}
private RenderListData(listItems: spListItem[]): void{
let itemsHtml: string = `<div class="${styles.Heading}">
<div class="${styles.Cell}">Title</div>
<div class="${styles.Cell}">Created</div>
<div class="${styles.Cell}">Author</div>
</div>`;
// Displays the values in table rows
listItems.forEach((listItem: spListItem)=>{
itemsHtml += `<div class="${styles.Row}">`;
itemsHtml += `<div class="${styles.Cell}"><p>${listItem.Title}</p></div>`;
itemsHtml += `<div class="${styles.Cell}"><p>${listItem.Created}</p></div>`;
itemsHtml += `<div class="${styles.Cell}"><p>${listItem.Author.Title}</p></div>`;
itemsHtml += `</div>`;
});
this.domElement.querySelector("."+styles.Table).innerHTML =itemsHtml;
}

The snapshot given below shows the slider property appended to the pane and the values loading, which is based on the slider property.

The basic development and deployment steps are explained in the previous articles

In my previous articles, I have explained about adding the basic custom properties to the properties pane.

Summary

Thus, you have learned how to add a slider property to SharePoint Framework Web part properties pane and seen how the data can be rendered based on the slider property value.

1 Comment

Join the conversation! Your thoughts help the community grow.

Divesh Gupta6y ago
Hey! I would like to create a react slider which reads from a list. The list can have a Title & Description and I would like to read the two fields and read data to show. Users can slide thru for list items and read. Can you help with that?