Post
Ask Question

Customizing SharePoint Framework Web Part Properties - Part One

Introduction
 
In this article you will learn about custom web part properties. The custom web part properties can be added to the SharePoint framework (SPFx) web part.
 
In my previous articles, you have seen about SPFx introduction, prerequisites, steps for setting up the environment, and developing and testing the web parts using the local environments.
Web Part Properties 
 
The web part properties pane can contains multiple pages. Each page in turn can contain multiple properties. The properties can be grouped using group names.
 
The basic hello world web part project contains a page along with the description property. The following snippet shows the basic structure of the web part properties. This method will be defined in the class of web part file.
  1. protected get propertyPaneSettings(): IPropertyPaneSettings {  
  2.   return {  
  3.     pages: [  
  4.       {  
  5.         header: {  
  6.           description: strings.PropertyPaneDescription  
  7.         },  
  8.         groups: [  
  9.           {  
  10.             groupName: strings.BasicGroupName,  
  11.             groupFields: [  
  12.               PropertyPaneTextField('description', {  
  13.                 label: strings.DescriptionFieldLabel  
  14.               })  
  15.             ]  
  16.           },  
  17.           {  
  18.             groupName: "Check Box",  
  19.             groupFields: [  
  20.               PropertyPaneCheckbox('checkboxProperty1',{  
  21.                 isChecked:false,  
  22.                 text: this.checkboxProperty1  
  23.               })  
  24.             ]  
  25.           }  
  26.         ]  
  27.       }  
  28.     ]  
  29.   };  
  30. }  
Note

Above snippet includes text field and check box properties. Each group has one property declared.
 
The basic structure is defined using the method called propertyPaneSettings, which inherits IPropertyPaneSettings function. It returns the collections of pages. Here only one page is defined. Each page has a header and groups. The group is a collection of properties. So multiple properties can be combined under one group. Each group has a group name and group fields which contain the properties.
 
The list of properties (property fields) that can be added to a web part are,
  • Label
  • Text box
  • Multi line text box
  • Check box
  • Drop down
  • Link
  • Slider
  • Toggle
  • Custom
Note

You will learn about all the above properties in my future articles.
 
Importing Properties
 
The properties are available as functions under the platform modules. They need to be imported into the web part file before use. The same can be imported using '@microsoft/sp-client-preview'.
 
For example to use the text field property, PropertyPaneTextField property function should be imported from the library into the web part file. Similarly, to use the check box properties, PropertyPaneCheckbox property function should be imported from the library. For other properties, respective functions should be imported into the web part file.
 
The following snippet shows the components imported, which includes the above mentioned web part properties.
  1. import {  
  2.   BaseClientSideWebPart,  
  3.   IPropertyPaneSettings,  
  4.   IWebPartContext,  
  5.   PropertyPaneTextField,  
  6.   PropertyPaneCheckbox  
  7. } from '@microsoft/sp-client-preview';   
Declare Properties
 
The properties needs to define the variables, variable types, group names, description, etc. The same can be defined directly or by using the standard definition files.
 
The standard files available are mystrings.d.ts, en-us.js, IListItemsFormWebPartProps.ts, etc. These files will be available already as part of SPFx web part project.
  • Static variables are stored in mystrings.d.ts file and the corresponding values are available in en-us.js file.
  • The web part properties are defined in the IListItemsFormWebPartProps.ts file using interface. 
mystrings.d.ts File
  1. declare interface IListItemsFormStrings {  
  2.   PropertyPaneDescription: string;  
  3.   BasicGroupName: string;  
  4.   DescriptionFieldLabel: string;  
  5. }  
  6.   
  7. declare module 'listItemsFormStrings' {  
  8.   const strings: IListItemsFormStrings;  
  9.   export = strings;  
  10. }  
en-us.js file
  1. define([], function() {  
  2.   return {  
  3.     "PropertyPaneDescription": "Description",  
  4.     "BasicGroupName": "Group Name",  
  5.     "DescriptionFieldLabel": "Description Field"  
  6.   }  
  7. });  
IListItemsFormWebPartProps.ts File
  1. export interface IListItemsFormWebPartProps {  
  2.   description: string;  
  3.   checkboxProperty1: string;  
  4. }  
Note

In the above basic structure properties sample, group name of text box property is referred from the definition file whereas the group name of check box is defined on the spot.
 
Later the above components are imported to the web part file (ListItemsFormWebPart.ts) for implementation. The following code snippet shows the same.
  1. import * as strings from 'listItemsFormStrings';  
  2. import { IListItemsFormWebPartProps } from './IListItemsFormWebPartProps';  
Note

The web part class file sample is available in my previous article. 
 
Summary
 
In the next articles you will learn more about adding the different type of available custom properties to the SPFx web parts.


Similar Articles