How to Detect Text Change Event in SPFx Property Pane Text Field

Introduction

SharePoint Framework applications make the development of the web part much easier, we can do everything in the client-side. For every web part, properties are very important to do the configuration. It can be anything like user-specific configuration or data specific configuration or UI specific configuration.

Here we are going to see how to detect the onTextChange event in PropertyPaneTextField control and perform fill in other fields based on the value in the textfield.

Take some scenario to understand this better. Let’s have a text box in the Property field to fill in the “Site URL” and a cascading dropdown field which will list the Library names in the site. Cascading dropdowns are the one whose value depends on another field.

Let’s take a look at the step by step implementation for this.

Step 1

Create a new SharePoint Framework application, please take a look at my previous article to get started with SPFx web parts

Creating SharePoint Framework Webpart

Step 2

Go to the Webpart.ts file which you can find in the below location:

/src/webparts/{WebpartName}/{WebpartName}Webpart.ts

Step 3

Add the property variables in the webpart Property interface like below to hold the selected property value:

export interface IWebPartNameWebPartProps {
description: string;
listname: string;
SiteUrl: string;
}

Step 4

We are going to add two property here, a text field and dropdown field. So, we need to import the required packages at the top of your file like below:

import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDropdown,
IPropertyPaneDropdownOption
} from '@microsoft/sp-property-pane';

Step 5

Declare a public variable in the webpart class to store the dropdown options like below:

private dropdownOptions: IPropertyPaneDropdownOption[] = [];

Step 6

Look for the method called getPropertyPaneConfiguration where you can see default property called Description, if you want you can remove it.

Step 7

Add the text property pane field next to the description like below:

PropertyPaneTextField('SiteUrl', {
label: ‘Enter the Site URL’,
validateOnFocusOut: true,
onGetErrorMessage: this.bindLibraryNames.bind(this)
}),

We will define the bindLibraryNames method later in this article, let’s see remain attributes:

label – Label to display for this text box

validateOnFocusOut - This will tell the control to call validation on the textbox when the cursor leaves the control, which in turn triggering the OnBlur event.

onGerErrorMessage – this will be triggered when the cursor leaves the control it also helps to set the validation message and to perform any action based on the entered value. The latest value in the textbox will be passed as input to this method.

Step 8

Add the dropdown property pane field next to the text box field like below:

PropertyPaneDropdown('libraryname', {
label: 'Select Library',
options: this.dropdownOptions
}),

options – source for the list of dropdown values

Step 9

Now time to define the bindLibraryNames method. This method takes one input parameter, site URL value, which will be passed by onGetErrorMessage method of the textbox.

This method will return a string, if the returned string is not empty then field validation fails. If the returned string is empty then field validation passes.

In this method we will set or reset the value for the dropdownOptions variable we declare in Step 5.

After filling the values in dropdownOptions variable refresh the spfx property pane using below piece of code:

this.context.propertyPane.refresh();

Here is the full implementation of the method:

public bindLibraryNames1(value: string): string {
if (value && value.toLowerCase().includes("https://contoso.sharepoint.com")) {
this.context.spHttpClient.get(value + "/_api/web/lists?$filter=BaseTemplate eq 101 and Title ne 'Site Assets' and Title ne 'Style Library'", SPHttpClient.configurations.v1).then((response) => {
response.json().then((result) => {
this.dropdownOptions = [];
result.forEach((element, key) => {
this.dropdownOptions.push({
key: key,
text: element.Title
});
});
this.context.propertyPane.refresh();
}).catch(() => {
this.dropdownOptions = [];
this.context.propertyPane.refresh();
});
return "";
});
} else {
this.dropdownOptions = [];
this.context.propertyPane.refresh();
return "Please enter valid site url"
}
}

We are done with the implementation now run the webpart using workbench. Enter the site URL, and the library dropdown will be filled with values. If the URL entered is invalid, the text box will show a validation message.

Conclusion

I hope this article helps you to understand how to trigger the text change event in the SPFx property pane text field. If you have any questions/issues about this article, please let me know in the comments.