Configure SharePoint Framework Properties and PreconfiguredEntries

When building SharePoint Framework (SPFx) web parts, we often add configurable settings (called web part properties) so users can customize how the web part works.

For example, instead of showing items from one fixed SharePoint list, you can let users choose which list to display, control sorting, or set the number of items to be shown in the web part.

To make this even easier, SPFx provides a feature called preconfiguredEntries, which lets you define default values for your web part before users add it to a page. This is especially useful when you want to offer multiple versions of the same webpart with different default settings for various scenarios.

In this article, I’ll explain how to configure SPFx web part properties and use preconfiguredEntries with practical examples.

SPFx Webpart preconfiguredEntries Property

The preconfiguredEntries property provides information about your SPFx web part. When users add a web part to a SharePoint site page, the information from the preconfiguredEntries property is used to display.

Additionally, it enables users to quickly add web parts with default settings, eliminating the need for manual configuration each time. This property is present in the manifest.json file, located in src/webparts/projectListViewer/projectListViewerWebpart.manifest.json.

Let’s quickly understand what properties this preconfiguredEntries array contains.

Property	Data Type	Purpose
groupId	string	Used to group similar web parts together in the toolbox.
group	ILocalizedString	The group name in the web part picker to contain the web part in the classic page. If no value is provided, the web part is displayed in the Miscellaneous group.
title	ILocalizedString	The name shown for the web part when adding it to a page.
description	ILocalizedString	The web part description is displayed in the toolbox tooltips.
officeFabricIconFontName	string	The icon shown for the web part.
properties	TProperties	These are the default settings that will be applied when the web part is added.

I built a sample SPFx web part with several properties to show how you can use preconfiguredEntries in SPFx. In the example below, you can see that the web part has default values for its properties on the right side pane.

Follow the sections below to achieve this!

How to Add SPFx Webpart Properties

I hope by this time you know how to set up the SPFx development environment. If not, follow this article: How to Set up SharePoint Framework development environment.

In this section, we will start by creating an SPFx web part and add some properties to it. Follow the steps below!

1. Open the Command Prompt and run the following commands to create a directory and navigate into it.

md react-preconfiguredentries
cd react-preconfiguredentries

2. Then, in the same directory, run the following command:

yo @microsoft/sharepoint

This will ask you the following questions. Answer them as mentioned below!

• What is your solution name? react-preconfiguredentries
• Which type of client-side component to create? WebPart
• Add a new Web part to the solution react-preconfiguredentries.
• What is your Web part name? ProjectListViewer
• Which template would you like to use? React

Then it will take some time to create the solution. 

3. Once it is created successfully! Run the code . to enter into the project.
4. Now, we’ll add properties to this web part, so open the manifest.json file present in src/webparts/projectListViewer/projectListViewerWebpart.manifest.json. Then update the properties object in the preconfiguredEntries array.

  "preconfiguredEntries": [{
    //......
    "properties": {     
      "webPartTitle": "",
      "projectList":"",
      "description": "",
      "maxItems":10,
      "groupByField":"",
      "showCompleted":false,
      "order": ""
    }
  }]

Here:

• webPartTitle = To display the web part name dynamically.