SharePoint Framework - Build Custom Controls For Web Part Property Pane

SharePoint Framework web parts support various predefined typed objects (e.g. textbox, checkbox, link, slider, etc.) to define properties for our SPFx web part. These predefined typed objects are sufficient in most cases; however, to meet certain business scenarios, we have to go beyond that and create our own custom controls. One classic example of this is list selection for the web part. We can have a simple textbox in web part property pane to allow the user to enter the SharePoint list name. However, listing all available SharePoint lists in a dropdown will give a more seamless experience to the end users.

Open the command prompt. Create a directory for SPFx solution.

Run the Yeoman SharePoint Generator to create the solution.

Yeoman generator will present you with the wizard by asking questions about the solution to be created.

Once the scaffolding is completed, lock down the version of project dependencies by running the below command.

On the command prompt, type this command to open the solution in a code editor of your choice.

Define Web Part Property

We are building a custom control to display the lists from the current SharePoint site. We will define a web part property for storing the user selected list from the web part property pane.

1. Open CustomPropertyPaneDemoWebPart.manifest.json under “\src\webparts\customPropertyPaneDemo” folder.
2. Rename the default description property to listName.
   
   
   
   
3. Open “src\webparts\customPropertyPaneDemo\components\ICustomPropertyPaneDemoProps.ts” and update it to use listName property.
   
   1. export interface ICustomPropertyPaneDemoProps {
   2. listName: string;
   3. }
4. In the “\src\webparts\customPropertyPaneDemo\CustomPropertyPaneDemoWebPart.ts”, update the render method to use listName property.
   
   1. public render(): void {
   2. const element: React.ReactElement<ICustomPropertyPaneDemoProps> = React.createElement(
   3. CustomPropertyPaneDemo,
   4. {
   5. listName: this.properties.listName
   6. }
   7. );
   9. ReactDom.render(element, this.domElement);
   10. }
5. Update getPropertyPaneConfiguration method.
   
   1. protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
   2. return {
   3. pages: [
   4. {
   5. header: {
   6. description: strings.PropertyPaneDescription
   7. },
   8. groups: [
   9. {
   10. groupName: strings.BasicGroupName,
   11. groupFields: [
   12. PropertyPaneTextField('listName', {
   13. label: strings.ListFieldLabel
   14. })
   15. ]
   16. }
   17. ]
   18. }
   19. ]
   20. };
   21. }
6. Update the interface at “src\webparts\customPropertyPaneDemo\loc\mystrings.d.ts”.
   
   1. declare interface ICustomPropertyPaneDemoWebPartStrings {
   2. PropertyPaneDescription: string;
   3. BasicGroupName: string;
   4. ListFieldLabel: string;
   5. }
7. In the “src\webparts\customPropertyPaneDemo\loc\en-us.js”, update definition as below.
   
   1. define([], function() {
   2. return {
   3. "PropertyPaneDescription": "Description",
   4. "BasicGroupName": "Group Name",
   5. "ListFieldLabel": "List"
   6. }
   7. });
8. In the “src\webparts\customPropertyPaneDemo\components\CustomPropertyPaneDemo.tsx”, update the render method to use listName property field.
   
   1. public render(): React.ReactElement<ICustomPropertyPaneDemoProps> {
   2. return (
   3. <div className={ styles.customPropertyPaneDemo }>
   4. <div className={ styles.container }>
   5. <div className={ styles.row }>
   6. <div className={ styles.column }>
   7. <span className={ styles.title }>Welcome to SharePoint!</span>
   8. <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
   9. <p className={ styles.description }>{escape(this.props.listName)}</p>
   10. <a href="https://aka.ms/spfx" className={ styles.button }>
   11. <span className={ styles.label }>Learn more</span>
   12. </a>
   13. </div>
   14. </div>
   15. </div>
   16. </div>
   17. );
   18. }
9. Update props at “src\webparts\customPropertyPaneDemo\components\ICustomPropertyPaneDemoProps.ts”.
   
   1. export interface ICustomPropertyPaneDemoProps {
   2. listName: string;
   3. }
10. On the command prompt, type “gulp server” to see the new web part property in action.