How to implement a full-page property pane in SPFX webpart

Question

Hi,I am trying to create an SPFX webpart to allow users to edit list items in multiple lists across multiple sites. To do this I need a lot of configuration info (i.e. users need to select the lists, and then for each list, select the columns to be edited) I am envisioning doing this configuration in a grid control, but this obviously won’t fit in the property pane. Is there a recommended way to do this?&nbsp;I created a grid component to do the configuration and added it to my app using react Router. Can I directly set the ‘Properties’ property of the BaseClientSideWebPart in my component. How would I get it to persist? Can I change the behavior of the ‘edit webpart’ icon (the pencil) to route to my component in the react router somehow?

russell gove · Answer

thanks john, that helped,me out.in case it helps anyone else, an example of full page property panes can be found in the react-multilist-grid sample app at&nbsp;https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-multilist-grid&nbsp;

john_sanders · Answer

Currently the property pane is a fixed size for our initial implementation. In the future we have discussed allowing this pane to resize, but haven't yet implemented that...
&nbsp;
We understand that you may need to make&nbsp;content that is wider, available for your web parts, so you can build your own panel. For your scenario, I'd use the office ui fabric panel size = large http://dev.office.com/fabric#/components/panel#Overview&nbsp;
&nbsp;
The fabric-react code visualized on dev.office.com/fabric is a bit behind the github repository https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react&nbsp;
&nbsp;
Hope that helps.

russell gove · Answer

Thanks John , I'm not sure what you mean by 'Build your own panel?

Is there a way to have spfx load a custom panel when I click the prncil? Or are you just saying Build the editing of properties directly in the UI of my App?

If I build th eUI in my APP What Api would I use to update the properties of the webpart. If I just set the 'Properties' Property of the BaseClientSideWebpartm will it be automatically persisted?

Forum Discussion

How to implement a full-page property pane in SPFX webpart

Related Content

Retrieve Full Page Body of SharePoint News Page with Power Automate

SP page with List fully visible (full width)

Is Export-StartLayout no longer implemented?

Drive Properties Access Denied | BitLocker Access Denied

Section does not go full width of page

Recent Discussions

Is there a way around running a custom script before all scripts on any web page

Is there a way around running a custom script before all scripts on any web page

Column formatting not showing in SP2019

Curious: Are SPFx Extensions Supported in OneDrive?

Thumbnails Not Displaying for MPEG Files in SharePoint