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?
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.
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
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.
