Building a Complete Native Property Pane Showcase in SharePoint Framework (SPFx)

Introduction

Throughout this series, we explored the most important native Property Pane controls available in the SharePoint Framework (SPFx).

Instead of learning each control in isolation forever, the next logical step is to combine them into a single Web Part that demonstrates how they work together in a real-world scenario.

This article builds a Property Pane Showcase, a Web Part that uses all the native controls covered so far.

Rather than serving as another simple example, this project becomes a reusable reference that can be consulted whenever you need to design a Property Pane for a production SPFx solution.

Why Build a Showcase?

During development, it is common to forget:

• which control stores a string;
• which one stores a boolean;
• which controls execute commands;
• which controls only display information.

Having one Web Part containing every native control makes experimentation much easier.

Instead of creating dozens of test projects, you simply open one Web Part and see every control working together.

Controls Included

Our showcase contains the following native controls.

Configuration Controls

These controls store values inside this.properties.

• PropertyPaneTextField
• PropertyPaneTextField (Multiline)
• PropertyPaneCheckbox
• PropertyPaneToggle
• PropertyPaneDropdown
• PropertyPaneChoiceGroup
• PropertyPaneSlider

Command Controls

These controls execute actions.

• PropertyPaneButton

Informational Controls

These controls provide information to the user.

• PropertyPaneLabel
• PropertyPaneLink

Layout Controls

These controls improve Property Pane organization.

• PropertyPaneHorizontalRule

Property Model

The Web Part stores the following configuration.

export interface IPropertyPaneShowcaseWpWebPartProps {
  title: string;
  description: string;
  showTitle: boolean;
  enableFeature: boolean;
  selectedColor: string;
  selectedTheme: string;
  maxItems: number;
}

Notice how the interface contains multiple data types.

This is exactly how real SharePoint Web Parts are built.

React Component

The React component receives exactly the same properties.

export interface IPropertyPaneShowcaseWpProps {
  title: string;
  description: string;
  showTitle: boolean;
  enableFeature: boolean;
  selectedColor: string;
  selectedTheme: string;
  maxItems: number;
}

The React component remains completely independent from the Property Pane.

It only receives values.

Passing the Properties

The bridge between SPFx and React happens inside render().

PropertyPaneShowcaseWp,
{
    title: this.properties.title,
    description: this.properties.description,
    showTitle: this.properties.showTitle,
    enableFeature: this.properties.enableFeature,
    selectedColor: this.properties.selectedColor,
    selectedTheme: this.properties.selectedTheme,
    maxItems: this.properties.maxItems
}

Every Property Pane control eventually ends here.

Initializing Default Values

When the Web Part is added for the first time, several properties do not yet exist.

To avoid undefined values, initialize them during onInit().

this.properties.title ??= 'Native Property Pane Showcase';
this.properties.description ??=
'Example using native SPFx Property Pane controls.';
this.properties.showTitle ??= true;
this.properties.enableFeature ??= true;
this.properties.selectedColor ??= 'blue';
this.properties.selectedTheme ??= 'light';
this.properties.maxItems ??= 10;

Using the nullish assignment operator (??=) guarantees that existing values are preserved.

Organizing the Property Pane

Instead of placing every control one after another, the Property Pane is organized into logical sections.

General Settings
Title
Description
────────────────────────────
Display Settings
Show Title
Enable Feature
Color
Theme
Maximum Items
────────────────────────────
Help
Open SPFx Documentation
────────────────────────────
Reset Settings

This organization makes the configuration much easier to understand.

General Settings

The first section contains the basic information.

• PropertyPaneLabel
• PropertyPaneTextField
• PropertyPaneTextField (Multiline)

Display Settings

The display section demonstrates several configuration controls.

• Checkbox
• Toggle
• Dropdown
• ChoiceGroup
• Slider

Together, they cover the majority of configuration scenarios found in real SPFx projects.

Help Section

Documentation is made available through

PropertyPaneLink(...)

which opens the official SharePoint Framework documentation.

This keeps the Property Pane clean while still providing quick access to additional information.

Reset Button

One particularly useful feature is the Reset button.

Instead of requiring users to manually restore every configuration value, a single button executes:

private _resetSettings(): void

This method restores every default value and refreshes both the Property Pane and the React component.

this.context.propertyPane.refresh();
this.render();

This demonstrates one of the most common real-world uses of PropertyPaneButton.

Data Flow

The complete architecture now becomes very clear.

Property Pane
↓
Native Controls
↓
this.properties
↓
render()
↓
React Props
↓
React Component

Every configuration control follows exactly this architecture.

The only exceptions are:

• Button
• Label
• Link
• HorizontalRule

because they do not store configuration values.

Classification of Native Controls

After completing this showcase, we can classify every native Property Pane control.

Configuration Controls

Store values.

• PropertyPaneTextField
• PropertyPaneCheckbox
• PropertyPaneToggle
• PropertyPaneDropdown
• PropertyPaneChoiceGroup
• PropertyPaneSlider

Command Controls

Execute actions.

• PropertyPaneButton

Informational Controls

Provide guidance.

• PropertyPaneLabel
• PropertyPaneLink

Layout Controls

Improve organization.

• PropertyPaneHorizontalRule

This classification makes it much easier to choose the appropriate control when designing a Property Pane.

Best Practices

When designing a Property Pane:

• Group related settings together.
• Use Labels to explain sections.
• Separate groups with Horizontal Rules.
• Prefer Toggles for enable/disable scenarios.
• Use Dropdowns for longer option lists.
• Use Choice Groups when there are only a few options.
• Use Sliders for numeric ranges.
• Provide links to documentation.
• Offer a Reset button whenever appropriate.

These simple practices greatly improve the user experience.

What Comes Next?

With the native Property Pane controls complete, the next step is exploring the PnP Property Controls.

Unlike the native controls, the PnP library provides advanced controls such as:

• Color Picker
• File Picker
• Folder Picker
• List Picker
• Site Picker
• People Picker
• Term Picker
• Collection Data
• Markdown Editor
• Date Time Picker

The good news is that everything learned in this series still applies.

The PnP controls use exactly the same Property Pane architecture, making them much easier to understand once the native controls are mastered.

Conclusion

Building a complete Property Pane Showcase is an excellent way to consolidate everything learned about the SharePoint Framework Property Pane.

Rather than viewing each control in isolation, this project demonstrates how they work together to create a professional configuration experience.

By understanding the relationship between the Property Pane, this.properties, the Web Part lifecycle, and the React component, you now have a strong foundation for building maintainable and user-friendly SPFx solutions.

This showcase can also serve as a permanent reference project for future SharePoint Framework developments.

Official References

SharePoint Framework Overview

Build Your First SharePoint Framework Web Part

Integrate with the Property Pane

Property Pane API Reference

React Documentation

Series Completed ✅

You have now completed the Native SPFx Property Pane series:

• ✅ PropertyPaneTextField
• ✅ PropertyPaneTextField (Multiline)
• ✅ PropertyPaneCheckbox
• ✅ PropertyPaneDropdown
• ✅ PropertyPaneChoiceGroup
• ✅ PropertyPaneToggle
• ✅ PropertyPaneSlider
• ✅ PropertyPaneButton
• ✅ PropertyPaneLabel
• ✅ PropertyPaneLink
• ✅ PropertyPaneHorizontalRule
• ✅ Native Property Pane Showcase

This provides a solid foundation before moving on to the PnP SPFx Property Controls, where you’ll explore richer controls while applying the same concepts learned throughout this series.