SharePoint framework web part property pane

In my earlier blogs we saw how to create a basic webpart and how to deploy it to a SharePoint online site. Now let’s see a bit more detailed about web part properties and how it can be configured/managed through code

I created a SharePoint framework webpart named ‘propertypanesettings’.

Its a default framework webpart not React.

The following field types are supported in web part property pane:

  • Button
  • Checkbox
  • Choice group
  • Dropdown
  • Horizontal rule
  • Label
  • Link
  • Slider
  • Textbox
  • Multi-line Textbox
  • Toggle
  • Custom

We will see how to add and use these fields into our webpart. Open the webpart code project using your Visual Studio code and get into the webpart.ts file mine is ‘PropertypanesettingsWebPart.ts’

Step 1: Add the field in import section

At the top import from ‘@microsoft/sp-property-pane’ is the section where we need to add these fields, so they get imported for further usage in code

After adding one by one start from ‘dropdown’, add ‘PropertyPaneDropdown’ into import as below

Step 2: Add the field into export section

Go to export interface and add ‘dropdown:string’

Step 3: Add the field into the page

Now to make this field visible in the webpart property pane we need to add the field property in the render method and some style for it, for time being I am going to use the style used for description

Step 4: Add some values to the dropdown field

‘IPropertyPaneConfiguration’ decides how and what needs to be in the field. Inside ‘GroupFields’ already description field is available we can insert the dropdown field below that

It will look like this

That’s all we are ready with adding the drop down field in the webpart property pane. To view this will go with

Gulp serve

Lunching the workbench where we can see the interactive drop down available

I am going to continue adding further ‘checkbox’,’slider’,’Toggle’,’Url’

Overall after adding the above fields it will look like this

Looks great isn’t it!!!

Grouping:

Microsoft also gives option to categorize a group fields in separate pages this allows us to have form a logical representation. Let’s split the added fields into two groups here you go.

The code will look like this

Save and go Gulp serve will launch the local workbench

Paging:

Sometimes more than groups its good to have pages for isolating some features on screen

Nothing different I just coping the first section Group 1, added inside ‘pages’ tag and modified the titles slightly to show some difference in content between pages

Finally, we made Page 1 and Page 2 with amazing pagination at bottom to move between pages

Thank you all. Hope this was useful to you.