Customizing SharePoint Framework Web Part Properties

Introduction

In this article, you will learn how to add the dropdown field, bind the values dynamically to SharePoint Framework Web part properties pane, and load the Web part based on the dropdown value selected.

In my previous articles, I have introduced the custom properties, explained check box field properties samples and managing multiple pages on the properties pane of SharePoint Framework (SPFx) Web part.

In my SPFx article series, you can learn about SPFx introduction, prerequisites, steps for setting up the environment, and developing and testing the Web parts, using the local environments.

In my previous article, you will have seen how to add a dropdown field to the Web part property pane.

In this article, you will see how to bind the values dynamically to the dropdown field of the Web part properties and load the Web part when a dropdown is selected with the code samples.

Drop down Property Declaration/Definition

The values appended to the dropdown field are of type IPropertyPaneDropdownOption. The variable "dropDownOptions" of the same type is declared inside the class.

private dropDownOptions: IPropertyPaneDropdownOption[] =[];

The properties are defined, using propertyPaneSettings method. The snippet given below shows the defined properties. As you can see, the values are not appended directly to the options, rather variable "dropDownOptions" of type IPropertyPaneDropdownOption is assigned.

protected get propertyPaneSettings(): IPropertyPaneSettings {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription,
},
groups: [
{
groupName:"Lists",
groupFields:[
PropertyPaneDropdown('DropDownProp',{
label: "Select List To Display on the page",
options:this.dropDownOptions,
isDisabled: false
})
]
}
]
}
]
};
}

Load/Add Values To Drop Down Property

Now, we need to load the list names on to the drop down field dynamically. Basically it means, the variable this.dropDownOptions should be loaded with necessary values (list names as values). To load the values, either onInit() or onPropertyPaneConfigurationStart() methods can be used.

onInit() method is executed whenever the page loads.
onPropertyPaneConfigurationStart() loads only when the web part property pane is opened.

In this sample, onPropertyPaneConfigurationStart() method will be used.

The snippet given below shows the method. The custom function is written to load SharePoint list names into the dropdown property. Here, this.dropDownOptions property is loaded with the list names.

protected onPropertyPaneConfigurationStart(): void {
// Stops execution, if the list values already exists
if(this.dropDownOptions.length>0) return;
// Calls function to append the list names to dropdown
this.GetLists();
}
private GetLists():void{
// REST API to pull the list names
let listresturl: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists?$select=Id,Title";
this.LoadLists(listresturl).then((response)=>{
// Render the data in the web part
this.LoadDropDownValues(response.value);
});
}
private LoadLists(listresturl:string): Promise<spLists>{
return this.context.httpClient.get(listresturl).then((response: Response)=>{
return response.json();
});
}
private LoadDropDownValues(lists: spList[]): void{
lists.forEach((list:spList)=>{
// Loads the drop down values
this.dropDownOptions.push({key:list.Title,text:list.Title});
});
}

Display data on the Web part

The data displayed on the Web part is rendered, using render() method. The corresponding custom functions are written and called to display the data on the Web part, which is based on the dropdown value selected. I have explained the same in my previous article (The code can be found the below section). The render() method is called, whenever dropdown property (this.properties.DropDownProp) is changed.

Entire Code

The entire code snippets given below shows the changes made to the various files in the basic Web part project.

IListItemsFormWebPartProps.ts File

export interface IListItemsFormWebPartProps {
DropDownProp: string;
}

ListItemsFormWebPart.ts File

import {
BaseClientSideWebPart,
IPropertyPaneSettings,
IWebPartContext,
PropertyPaneDropdown,
IPropertyPaneDropdownOption
} from '@microsoft/sp-client-preview';
import styles from './ListItemsForm.module.scss';
import * as strings from 'listItemsFormStrings';
import { IListItemsFormWebPartProps } from './IListItemsFormWebPartProps';
export interface spListItems{
value: spListItem[];
}
export interface spListItem{
Title: string;
id: string;
Created: string;
Author: {
Title: string;
};
}
export interface spList{
Title:string;
id: string;
}
export interface spLists{
value: spList[];
}
export default class ListItemsFormWebPart extends BaseClientSideWebPart<IListItemsFormWebPartProps> {
private dropDownOptions: IPropertyPaneDropdownOption[] =[];
public constructor(context: IWebPartContext) {
super(context);
}
public render(): void {
// Render the items in tabular format
this.domElement.innerHTML = `
<div class="${styles.listItemsForm}">
<div class="${styles.Table}">
<div class="${styles.Heading}">
<div class="${styles.Cell}">Title</div>
<div class="${styles.Cell}">Created</div>
<div class="${styles.Cell}">Author</div>
</div>
</div>
</div>`;
console.log("Render");
this.LoadData();
}
private LoadData(): void{
if(this.properties.DropDownProp != undefined){
let url: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('"+this.properties.DropDownProp+"')/items?$select=Title,Created,Author/Title&$expand=Author";
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.httpClient.get(url).then((response: Response)=>{
return response.json();
});
}
private RenderListData(listItems: spListItem[]): void{
let itemsHtml: string = "";
// 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;
}
protected onPropertyPaneConfigurationStart(): void {
// Stops execution, if the list values already exists
if(this.dropDownOptions.length>0) return;
// Calls function to append the list names to dropdown
this.GetLists();
}
private GetLists():void{
// REST API to pull the list names
let listresturl: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists?$select=Id,Title";
this.LoadLists(listresturl).then((response)=>{
// Render the data in the web part
this.LoadDropDownValues(response.value);
});
}
private LoadLists(listresturl:string): Promise<spLists>{
return this.context.httpClient.get(listresturl).then((response: Response)=>{
return response.json();
});
}
private LoadDropDownValues(lists: spList[]): void{
lists.forEach((list:spList)=>{
// Loads the drop down values
this.dropDownOptions.push({key:list.Title,text:list.Title});
});
}
protected get propertyPaneSettings(): IPropertyPaneSettings {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription,
},
groups: [
{
groupName:"Lists",
groupFields:[
PropertyPaneDropdown('DropDownProp',{
label: "Select List To Display on the page",
options:this.dropDownOptions,
isDisabled: false
})
]
}
]
}
]
};
}
}

ListItemsForm.module.scss File

.listItemsForm {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
padding: 20px;
}
.listItem {
max-width: 715px;
margin: 5px auto 5px auto;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.button {
text-decoration: none;
}
.listItemTitle{
font-size: large;
color: darkblue;
}
.listItemProps{
font-size: small;
}
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
}

mystrings.d.ts File

declare interface IListItemsFormStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
TitleFieldLabel: string;
BasicInfo: string;
}
declare module 'listItemsFormStrings' {
const strings: IListItemsFormStrings;
export = strings;
}

en-us.js File

define([], function() {
return {
"PropertyPaneDescription": "Config Web Part",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field",
"BasicInfo": "Basic Information"
}
});

Summary

Thus, you have learned how to add dropdown field to the Web part property pane, bind dropdown values dynamically and load the Web part, which is based on the selected dropdown property.