5

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?

4

So the framework and apps built on it handle that for you. As a webpart 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. – Heinrich Ulbricht Mar 2 '17 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. – PatMill_MSFT Mar 2 '17 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'"? ... – Heinrich Ulbricht Mar 2 '17 at 19:22
  • "can two webparts share a property value in the 'backend'"... now that would be useful! – russellg Mar 3 '17 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'). – PatMill_MSFT Mar 9 '17 at 18:35
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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