SPFX client-side web part with the WebPart Properties

Total visits : 2595

The Modern SharePoint Framework have a new WebPart Property pane.The property pane allows end users to configure the web part with a bunch of properties.

The property pane has three key metadata:

  1. Pages
    • Pages provide you the flexibility to separate complex interactions and put them into one or more pages. Pages then contain Header and Groups.
  2. Header
    • Header allows you to define the title of the property pane and Groups let you define the various sections for the property pane through which you want to group your field sets.
  3. Groups
    • A property pane should contain a page, an optional header, and at least one group.
    • Property fields are then defined inside a group
      • Supported PropertyFileds and Objects
        1. Label – PropertyPaneLabel
        2. Textbox – PropertyPaneTextField
        3. Multi-line Textbox – PropertyPaneTextField
        4. Checkbox –  PropertyPaneCheckbox
        5. Dropdown – PropertyPaneDropdown
        6. Link – PropertyPaneLink
        7. Slider – PropertyPaneSlider
        8. Toggle – PropertyPaneToggle
        9. ChoiceGroup – PropertyPaneChoiceGroup
        10. Button – PropertyPaneButton
        11. HorizontalRule – PropertyPaneHorizontalRule
        12. Custom

In this article I am showing how to use pages,Header, Group,and field in the webpart properties section.

Step 1: Create a new Solution Example: spfx-webpartproperties

  • Go to run –> cmd and change folder to where you want to create a  new project
  • Create new folder md spfx-webpartproperties
  • change to new folder cd spfx-webpartproperties

Step 2: Create a new Webpart

  • type yo @microsoft/sharepoint and enter
  • It will create a new SharePoint Framework Solution
  • give new webpart name : spfxpropertypane

Step 3: Using the Property Pane

  • Go to Visual Studio code – type code . it will open the visual code window

Open webpart file SpfxpropertypaneWebpart.ts name see the default – one page,header and description filed in the groups.

protected get propertyPaneSettings(): IPropertyPaneSettings {
 return {
 pages: [
 {
 header: {
 description: strings.PropertyPaneDescription
 },
 groups: [
 {
 groupName: strings.BasicGroupName,
 groupFields: [
 PropertyPaneTextField('description', {
 label: strings.DescriptionFieldLabel
 })
 ]
 }
 ]
 }
 ]
 };
 }

Step 4: In this article I added multiple pages with multiple groups and fields in Webpart Properties window

First Import all the field headers,it looks like below in the top of the webpart page

import {
  BaseClientSideWebPart,
  IPropertyPaneSettings,
  IWebPartContext,
  PropertyPaneTextField, // Textbox
  PropertyPaneCheckbox,// Checkbox
  PropertyPaneLabel,// Label
  PropertyPaneLink,//Link
  PropertyPaneSlider,//Slider
  PropertyPaneToggle,//Toggle
  PropertyPaneDropdown //Dropdown
} from ‘@microsoft/sp-client-preview’;

WebPart Property Page 1:

  • Create a Page with one group and two fields (Text Box and Multi line Text Box), here I can implement the validation as also

Code:

{ //Page 1
header: {
description: “Page 1 – one group and two fields ”
},
groups: [
{
groupName: “Group one”,
groupFields: [
PropertyPaneTextField(‘name’, {
label: “Name”,
multiline: false,
resizable: false,
onGetErrorMessage: this.simpleTextBoxValidationMethod,
errorMessage: “This is the error message”,
deferredValidationTime: 5000,
placeholder: “Please enter name”,”description”: “This is the Name”
}),
PropertyPaneTextField(‘description’, {
label: “Description”,
multiline: true,
resizable: true,
placeholder: “Please enter description”,”description”: “This is the description”
})
]
}
]
}

preperty1

Validation

private simpleTextBoxValidationMethod(value: string): string {
    if (value.length < 5) {
        return “Name must be more than 5 characters!”;
    } else {
      return “”;
    }
  }

preperty2

WebPart Property Page 2:

  • Create a Page with two groups and two fields each (Slider, Toggle, dropdown, and Checkbox)
  • Code

{ //Page 2
          header: {
            description: “Page 2 – two groups and two fields each”
          },
          groups: [
            {
              groupName: “Group one”,
              groupFields: [
                PropertyPaneSlider(‘Slider’, {
                  label:’Slider’,min:1,max:10
                }),
                PropertyPaneToggle(‘Toggle’, {
                label: ”
                })
              ]
            },
            {
              groupName: “Group Two”,
              groupFields: [
                PropertyPaneDropdown(‘dropdowm’, {
                  label:’Drop Down’,
                  options: [
                    { key: ‘Item1’, text: ‘Item 1’ },
                    { key: ‘Item2’, text: ‘Item 2’ },
                    { key: ‘Item3’, text: ‘Item 3’, isSelected: true }
                  ]
                }),
                PropertyPaneCheckbox(‘checkbox’,
                  { text: ‘Yes/No’, isChecked: true, isEnabled: true})
              ]
            }
          ]
        }

preperty3

WebPart Property Page 3:

  • Create a Page with one group and two fields (Link,  Label and TextBox )
  • Code

{ //Page 3
          header: {
            description: “One group and two fields “
          },
          groups: [
            {
              groupName: “Group One”,
              groupFields: [
                PropertyPaneLink(‘URL’,
                { text:”My Blog”, href:’http://www.jenkinsblogs.com’,target:’_blank’}),
                 PropertyPaneLabel(‘label’,
                { text:’Please Enter designation’,required:true}),
                 PropertyPaneTextField(‘textbox’,{})
              ]
            }
          ]
        }

preperty4

We can easily add the different controls in the WebPart properties,also we can add custom controls, I will explain how to add custom control in webpart properties in next article.

Step 5: How to use webpart properties values in the webpart.

  • Open ISpfxpropertypaneWebPartProps.ts file, you can able to see the default description property
  • Add the properties based on the control name
    • I have added all property names here

export interface ISpfxpropertypaneWebPartProps {
  name: string;
  description: string;
  Slider:string;
  Toggle:string;
  dropdowm:string;
  checkbox:string;
  URL:string;
  textbox:string;
}

Output below

preperty6

So that’s it, we can add a web part property controls

The web part property model in SPFx is quite powerful and extraordinary. Next article i will show how to access list data from webpart properties.