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:


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

2 Answers 2


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.

  • Unfortunately, we are not on the same track, because I don't want to edit the properties of the webpart in read mode. I want to use the property pane to display my own options in read mode. Have you checked the article I link to? Please also have a look at the document library webpart from Microsoft that does the same I'd like to archive. Jun 9, 2020 at 8:35

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

  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review Dec 18, 2021 at 3:53

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.