When building a SharePoint Framework web part - where are the property values of the property pane to be saved?

With add-ins and their tool pane, the options are: let SharePoint do it, use a hidden list, use a custom service (see Q&A here).

How is this supposed to be done with SharePoint Framework? Does SPO provide a means for saving and loading these properties?

2 Answers 2


So the framework and apps built on it handle that for you. As a web-part developer, you just need to make sure that the this.properties collection is correct.

By default, any edits done to the built in property pane controls will result in this being updated. If you are doing something extra on your own, you'll need to make sure the value is correct. In extreme cases, you can override the this.onBeforeSerialize() property.

  • This sounds good. Is there any detailed documentation on this mechanism, specifically in regard to renaming/replacing properties, changing types (e.g. from number to string) or even replacing web parts and how this is handled by the framework (values are lost/preserved/converted; any GUIDs involved?)? As a bonus some information about what's going on under the hood would be a really interesting read. A quick google for onBeforeSerialize hints that the web's property bag might be involved and that properties can be marked as searchable. Commented Mar 2, 2017 at 19:14
  • 1
    So, you are touching on a few things there. We have queued up a document that describes how a webpart developer can deal with "schema drift" of their data over time (so changing property X from string to number, for example). replacing webparts wouldn't really be covered there though, as that is pretty much destroy + create. There isn't any sort of preservation. Commented Mar 2, 2017 at 19:17
  • 1
    And that would be good to read in some "official" documentation. Glad to hear that this is queued and I'm really looking forward to it! Knowing the technical background would help inferring answers to questions like: "if the user adds a web part, configures it, deletes it, adds the same web part again - will the properties be preserved?", "when deleting webparts - is there piling up 'property garbage' somewhere that can lead to problems?", "does renaming webpart classes/interfaces/etc lead to property values being lost?", "can two webparts share a property value in the 'backend'"? ... Commented Mar 2, 2017 at 19:22
  • "can two webparts share a property value in the 'backend'"... now that would be useful!
    – RussGove
    Commented Mar 3, 2017 at 23:20
  • 1
    Sounds good. The immediate feature we would pursue is a new equivalent to the part-to-part communication feature, so that you can share events/data across webparts ('map was updated with location x,y' or 'user X was selected in the face pile'). Commented Mar 9, 2017 at 18:35

Saving and loading of custom web part properties is supported by the SharePoint Framework.

Override onBeforeSerialize and onAfterDeserialize in your web part class:

protected onBeforeSerialize(): void {
    // modify the web part's properties here - the modified version will be saved
    this.properties.description = "save me";

protected onAfterDeserialize(deserializedObject: any, dataVersion: Version): IEmbedConfluenceContentWebPartProps {
    // handle loaded data object here, modify/convert it if necessary
    return super.onAfterDeserialize(deserializedObject, dataVersion);

The rest is being taken care of by the framework. SharePoint Framework will call these methods when appropriate. (In my case onBeforeSerialize was called every second, so be prepared for this.)

Under the hood:

Properties are saved by the framework using the REST endpoint: /_api/sitepages/pages(number)/SavePage.

The actual data is stored in a page property CanvasContent1 and can be viewed with tools like SharePoint Online Client Browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.