How to let custom property pane fields enable the apply button in SharePoint Framework

August 30, 2017

Since the SharePoint Framework v1.2.0 release; it is now possible to let your custom property pane fields trigger the apply button in non-reactive property panes. Before this release, you had to implement your own logic to re-render the contents of your web part or use the reactive property pane.

So, what changed?

In the previous versions, the onRender method of your custom property pane field had two arguments:

  • The HTML element
  • Context
Old onRender method

Old onRender method

Since version 1.2.0 a new argument has been added:

  • Change callback function
onRender method since v1.2.0

onRender method since v1.2.0

This is a callback function which gets provided to your custom field by the property pane. You can make use of this to let the property pane know a change happened in one of your custom fields. If you use this in combination with a non-reactive property pane (that is the property pane with an apply button at the bottom) it will trigger the button to get enabled.

Show me the code

Code snippet of my onRender method:

Code snippet of my method where I store my new property value:


Example of a custom field that triggers the apply button

Example of a custom field that triggers the apply button

The sample code of this custom field can be found here: InsecurePasswordPropertyField.ts gist.

BTW: it is really not a good idea to store a password in the property pane. This is just created as an example to show that it is really a different field.