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. 

• Slider method
• Slider Properties Interface

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

• Developing Web Parts Using SharePoint Framework - Part One
• Developing Web Parts Using SharePoint Framework - Part Two
• Developing Web Parts Using SharePoint Framework - Part Three

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

• Customizing SharePoint Framework Web Part Properties - Part One
• Customizing SharePoint Framework Web Part Properties - Part Two
• Customizing SharePoint Framework Web Part Properties - Part Three
• Customizing SharePoint Framework Web Part Properties - Part Four
• Customizing SharePoint Framework Web Part Properties - Part Five. 

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.