Sharepoint - SharePoint Framework: How/where to save web part property pane values?

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.


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 {
    super.onBeforeSerialize();
    // 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
    console.log(JSON.stringify(deserializedObject));
    console.log(JSON.stringify(dataVersion));
    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.