SPFx and Property Pane
Tags: spfx, webpart
Published: 2023-12-26 09:34:03

---
title: SPFx and Property Pane
published: true
date: 2023-11-22 10:00:00 UTC
tags: SPFx,WebPart
canonical_url: 
---

One of the most useful features of SPFx is the **property pane** , which allows end-users to configure web parts with several properties.

The property pane has three key metadata: a page, an optional header, and at least one group.

_Pages_ provide you the flexibility to separate complex interactions and put them into one or more pages. Pages contain a header and groups.

_Headers_ allow you to define the title of the property pane page.

_Groups_ allow you to define the various sections or fields for the property pane through which you want to group your field sets.

In this blog post, we will explore how to use the property pane, as usual first let’s see the result and then the code.

This is the resulting not configured web part:

![](https://iamguidozamcode.files.wordpress.com/2023/10/image-21.png?w=255)

This is the the resulting situation with the web part and the property pane both open:

![](https://iamguidozamcode.files.wordpress.com/2023/10/image-22.png?w=1024)

The property pane in detail not configured and configured:

![](https://iamguidozamcode.files.wordpress.com/2023/10/image-25.png?w=329)

![](https://iamguidozamcode.files.wordpress.com/2023/10/image-24.png?w=338)

Configuring the entries in the property pane updates the properties in the web part:

![](https://iamguidozamcode.files.wordpress.com/2023/10/image-23.png?w=1024)

![](https://iamguidozam.blog/2023/11/22/spfx-and-property-pane/image/png;base64,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)Now that we have an idea of the resulting UI let’s see the code in detail.

## The code

After creating a web part solution using the Yeoman generator @microsoft/sharepoint you’ll have a web part with a default property `description` that can be configured in the property pane.

Following the already existing code we have to define the web part properties that we want to be configured in the property pane, in this sample named `PropertyPaneSample` (yep, no imagination) we have five different properties to show a few of the controls that can be used in the property pane, to do so in the `IPropertyPaneSampleWebPartProps` I defined the following:

```
export interface IPropertyPaneSampleWebPartProps {
  description: string;
  checkboxValue: boolean;
  dropdownValue: string;
  toggleValue: boolean;
  sliderValue: number;
}
```

To define the content of the property pane you have to use the method `getPropertyPaneConfiguration` inside of the `{Your web part name}WebPart.ts` file, in the sample the name is `PropertyPaneSampleWebPart.ts`. The `getPropertyPaneConfiguration` returns an object composed, as written in the post introduction, by an array of `pages` and each page is composed of a property `header` which contains the description of the page and a property `groups` which is an array of objects composed mainly of the `groupName` and `groupFields` properties.

```
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
	  description: strings.PropertyPaneDescription,
        },
	groups: [
	  {
            groupName: strings.BasicGroupName,
            groupFields: [
              // omitted for brevity
            ],
	  },
        ],
      },
    ],
  };
}
```

The `groupName` is fairly clear that is a string containing the group name.

The `groupFields` contains all the fields that we want to configure in the group.

In the sample the `groupFields` properties contains the various controls that we use to configure the web part, the content of the property is the following:

```
PropertyPaneTextField("description", {
	label: strings.DescriptionFieldLabel,
}),
PropertyPaneCheckbox("checkboxValue", {
	text: strings.CheckboxValueFieldLabel,
	checked: this.properties.checkboxValue,
}),
PropertyPaneDropdown("dropdownValue", {
	label: strings.DropdownValueFieldLabel,
	options: [
		{ key: "1", text: "One" },
		{ key: "2", text: "Two" },
		{ key: "3", text: "Three" },
		{ key: "4", text: "Four" },
		{ key: "5", text: "Five" },
	],
}),
PropertyPaneToggle("toggleValue", {
	label: strings.ToggleValueFieldLabel,
	onText: "On",
	offText: "Off",
	checked: this.properties.toggleValue,
}),
PropertyPaneSlider("sliderValue", {
	label: strings.SliderValueFieldLabel,
	min: 0,
	max: 100,
	step: 1,
	showValue: true,
	value: 50,
}),
```

As you can see we have some helper methods that create a specific control in our property pane, the names are esplicative but to be clear here is a clarification:

- `PropertyPaneTextField`: displays a text box.
- `PropertyPaneCheckbox`: displays a checkbox.
- `PropertyPaneDropdown`: displays a dropdown control where you have to define which are the possible selectable options.
- `PropertyPaneToggle`: displays a toggle where you can also define the labels for the on or off state.
- `PropertyPaneSlider`: displays a slider, you can specify properties such as the `min` and `max` supported values and also the `step` of the slider.

Once that you have set up your property pane you can now pass the configuration properties into the implementation of your web part control. In the sample solution I passed all the properties to the control class inside the render method of the `PropertyPaneSampleWebPart` class:

```
public render(): void {
  const element: React.ReactElement<IPropertyPaneSampleProps> =
  React.createElement(PropertyPaneSample, {
    description: this.properties.description,
    checkboxValue: this.properties.checkboxValue,
    dropdownValue: this.properties.dropdownValue,
    toggleValue: this.properties.toggleValue,
    sliderValue: this.properties.sliderValue,
  });

  ReactDom.render(element, this.domElement);
}
```

Inside the `PropertyPaneSample` control I simply display the values to have a visual representation of the changes.

So this is how to use the property pane to configure your web part!

If you want to discover more regarding the default property pane controls of SPFx you can check the official documentation [here](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane#property-pane-fields), it’s also worth mentioning that PnP have it’s own custom controls for the property pane, if you’re interested follow [this link](https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCodeEditor) to check the official documentation, I recommend to have a look at all the available controls to avoid writing a custom one that maybe already exists.

If you want to check the sample solution I made for this post you can check it [here](https://github.com/GuidoZam/blog-samples/tree/main/web%20parts/PropertyPaneSample).

Hope that helps!