How to use the webpart's property pane to edit data in read mode using openDetails()?

Question

Let's say I have a modern O365 SPFX WebPart that displays some data in a DetailsList in a SharePoint Online environment. Now, I want to use the same property pane that is used to edit the webpart's own properties to edit the items in my DetailList.

I found this great article that demonstrates how this can be done. However, when my WebPart is published online, the property pane will not work (no output in the console), until I have edited the WebPart itself. At this point it's obvious to me that SharePoint will lazy-load the property pane when I attempt to edit the WebPart in edit mode, thus the call this.context.propertyPane.open() will fail, until the property pane was loaded at least once in edit mode.

After playing around with the problem I discovered that SharePoint will allow me to initialize and open the same property pane using this.context.propertyPane.openDetails() at any time, so I don't have to trigger the loading beforehand.

At that moment I realized that this is the right function I should use, instead, but the property pane is empty, it just displays a string saying there are no options to edit. The function wants a context: any from me.

I was searching for any sample code online to understand how to work with this function, without luck, though. I'm pretty sure this is the function Microsoft uses to display, for instance, file attributes when editing files in the DetailList of the document library WebPart. I want a similar experience, I want to do it the Microsoft-way, I don't want to use my own side-drawer component or something like that.

How can I use this function to display my own options in the property pane? I'm thankful for any hint, advice and insight.

EDIT: It seems I can use my current solution by doing:

this.context.propertyPane.openDetails();
this.context.propertyPane.open();

but I still want to know how to use openDetails() the correct way. This is just a hack I'm doing here.

Answer 1

SPFX web part properties cannot be changed from a page that is in read mode. Otherwise, it would be a security hole.

From a technical perspective, SPFX web part properties are stored in the hidden CanvasContent1 column in Pages library. That is why a user must checkout a page to edit a web part properties (regardless of whether it's a custom or out-of-the-box web part). Then, web part properties are persisted into the column upon page publishing.

It means that even if you find a way to render property pane in page read mode, SharePoint won't be persisting the changes.

Answer 2

Have you looked into the Panel component from FluentUI? https://developer.microsoft.com/en-us/fluentui#/controls/web/panel