Sharepoint Framework Property Pane

What is the SharePoint framework property pane?

First, we dive into the SharePoint property pane. We need to know what the Sharepoint framework is.

What is SharePoint Framework?

SPFx (SharePoint framework ) is a webpage or web part model that provides full support for client-side Sharepoint development.

Key Features

  • Integrated with modern web technologies
  • Seamless integration with SharePoint data.
  • Support various javascript frameworks like react and others also.

What is the SharePoint property pane?

The property pane is a configurable setting pane of the web part in SharePoint. It provides a UI for users to customize web parts settings. It also enhances the user experience by allowing to user dynamically update the settings of the web part based on user input.

What is the property pane in the SharePoint web part?

The property pane in SharePoint is a panel that slides out from the right side of the page, and it contains controls like text box, buttons, dropdowns, checkboxes, etc. It enhances the customization of web part as per user need and makes its content update dynamically based on user input.

Advanced property pane Customization
 

Custom property pane controls

If default property pane controls do not match our needs, we can create our custom control to fulfill our need for customization.

Some custom controls are = color picker, Date picker, etc.

Dynamic property pane fields

Suppose that the user wants to add or remove a text field on checked off the check box, so we can do that field based on other property values.

Use this. context. property pane. refresh() to update the pane dynamically.

Testing and Deployment

After the completion of web part development, we need to test that web part and then package it and deploy it to the app catalog in SharePoint. What we need to do is use “ gulp serve ” to run the web part on the local Sharepoint workbench if testing is successful then.

Use “ gulp bundle –ship ” and “ gulp package-solution --ship ” to build a package solution for our web part and then upload the package into the app catalog and deploy.

Conclusion

The Property Pane in SPFx allows for powerful customization and configuration of web parts. Using React, you can create dynamic and user-friendly property panes.