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

%3CLINGO-SUB%20id%3D%22lingo-sub-32270%22%20slang%3D%22en-US%22%3EHow%20to%20implement%20a%20full-page%20property%20pane%20in%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-32270%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20create%20an%20SPFX%20webpart%20to%20allow%20users%20to%20edit%20list%20items%20in%20multiple%20lists%20across%20multiple%20sites.%20To%20do%20this%20I%20need%20a%20lot%20of%20configuration%20info%20(i.e.%20users%20need%20to%20select%20the%20lists%2C%20and%20then%20for%20each%20list%2C%20select%20the%20columns%20to%20be%20edited)%20I%20am%20envisioning%20doing%20this%20configuration%20in%20a%20grid%20control%2C%20but%20this%20obviously%20won%E2%80%99t%20fit%20in%20the%20property%20pane.%20Is%20there%20a%20recommended%20way%20to%20do%20this%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20created%20a%20grid%20component%20to%20do%20the%20configuration%20and%20added%20it%20to%20my%20app%20using%20react%20Router.%20Can%20I%20directly%20set%20the%20%E2%80%98Properties%E2%80%99%20property%20of%20the%20BaseClientSideWebPart%20in%20my%20component.%20How%20would%20I%20get%20it%20to%20persist%3F%20Can%20I%20change%20the%20behavior%20of%20the%20%E2%80%98edit%20webpart%E2%80%99%20icon%20(the%20pencil)%20to%20route%20to%20my%20component%20in%20the%20react%20router%20somehow%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-48764%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20implement%20a%20full-page%20property%20pane%20in%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-48764%22%20slang%3D%22en-US%22%3E%3CP%3Ethanks%20john%2C%20that%20helped%2Cme%20out.%3C%2FP%3E%3CP%3Ein%20case%20it%20helps%20anyone%20else%2C%20an%20example%20of%20full%20page%20property%20panes%20can%20be%20found%20in%20the%20react-multilist-grid%20sample%20app%20at%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-multilist-grid%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-multilist-grid%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-33920%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20implement%20a%20full-page%20property%20pane%20in%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-33920%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20John%20%2C%20I'm%20not%20sure%20what%20you%20mean%20by%20'Build%20your%20own%20panel%3F%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20there%20a%20way%20to%20have%20spfx%20load%20a%20custom%20panel%20when%20I%20click%20the%20prncil%3F%20Or%20are%20you%20just%20saying%20Build%20the%20editing%20of%20properties%20directly%20in%20the%20UI%20of%20my%20App%3F%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20I%20build%20th%20eUI%20in%20my%20APP%20What%20Api%20would%20I%20use%20to%20update%20the%20properties%20of%20the%20webpart.%20%26nbsp%3BIf%20I%20just%20set%20the%20'Properties'%20Property%20of%20the%20BaseClientSideWebpartm%20will%20it%20be%20automatically%20persisted%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-32629%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20implement%20a%20full-page%20property%20pane%20in%20SPFX%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-32629%22%20slang%3D%22en-US%22%3E%3CP%3ECurrently%20the%20property%20pane%20is%20a%20fixed%20size%20for%20our%20initial%20implementation.%20In%20the%20future%20we%20have%20discussed%20allowing%20this%20pane%20to%20resize%2C%20but%20haven't%20yet%20implemented%20that...%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWe%20understand%20that%20you%20may%20need%20to%20make%26nbsp%3Bcontent%20that%20is%20wider%2C%20available%20for%20your%20web%20parts%2C%20so%20you%20can%20build%20your%20own%20panel.%20For%20your%20scenario%2C%20I'd%20use%20the%20office%20ui%20fabric%20panel%20size%20%3D%20large%20%3CA%20href%3D%22http%3A%2F%2Fdev.office.com%2Ffabric%23%2Fcomponents%2Fpanel%23Overview%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fdev.office.com%2Ffabric%23%2Fcomponents%2Fpanel%23Overview%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20fabric-react%20code%20visualized%20on%20dev.office.com%2Ffabric%20is%20a%20bit%20behind%20the%20github%20repository%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FOfficeDev%2Foffice-ui-fabric-react%2Ftree%2Fmaster%2Fpackages%2Foffice-ui-fabric-react%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FOfficeDev%2Foffice-ui-fabric-react%2Ftree%2Fmaster%2Fpackages%2Foffice-ui-fabric-react%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHope%20that%20helps.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

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?

 

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?

3 Replies
Highlighted

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...

 

We understand that you may need to make 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 

 

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 

 

Hope that helps.

Highlighted

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?

Highlighted

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 https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-multilist-grid