Customizing SharePoint Framework Web Part Properties - Part Two

Updated: Mar 21, 2019

Introduction 

In this article, you will learn how to add custom properties (check box options) to the SharePoint Framework web part.

In my previous article, I  introduced the custom properties on SharePoint Framework (SPFx).

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 this sample, you will see how to add check box options to the SPFx web part properties pane. The web part will render the items of a list with multiple columns based on the checked items.


The list column names are added as check box fields in the properties pane. The columns that are shown on the web part are Title, Created By, and Created Time. Title is the mandatory value shown, and we will see how to bind the other two values into web part.


Check box is rendered based on PropertyPaneCheckbox class. It contains three attributes. They are,

Text - contains the label for the check box item is Checked - boolean value, used to determine whether the item is selected.isEnabled - boolean value, item can be disabled or enabled.


The required interfaces are defined. The required data is imported from other files or libraries using import option. 


import {    

BaseClientSideWebPart,    

IPropertyPaneSettings,    

IWebPartContext,    

PropertyPaneTextField,    

PropertyPaneCheckbox  

from '@microsoft/sp-client-preview';  

import styles from './ListItemsForm.module.scss'; 

import * as strings from 'listItemsFormStrings';