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.