Sharepoint Framework Property Pane - building a dynamic property

%3CLINGO-SUB%20id%3D%22lingo-sub-195691%22%20slang%3D%22en-US%22%3ESharepoint%20Framework%20Property%20Pane%20-%20building%20a%20dynamic%20property%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-195691%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20attempting%20to%20build%20a%20dynamic%20property%20in%20the%20Property%20Pane%20of%20a%20React%20based%20Sharepoint%20Online%20Web%20Part.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20order%20to%20achieve%20this%20I%20wish%20to%20iterate%20through%20an%20array%20of%20data%20in%20the%20PP%2C%20to%20create%20multiple%20drop%20down%20fields.%20Currently%20I%20can%20only%20create%20drop%20down%20fields%20through%20individual%20variables%2C%20not%20arrays%20or%20objects%20(as%20these%20can%20not%20be%20iterated%20through%20in%20the%20PP%20render%20method).%20This%20means%20that%20I%20can%20only%20render%20a%20predefined%20number%20of%20drop%20down%20fields%20in%20the%20PP.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMicrosoft%20have%20already%20achieved%20this%20functionality%20on%20their%20'Highlighted%20Content'%20Web%20Part%2C%20but%20haven't%20published%20the%20source%20code%20for%20this%2C%20so%20I%20cannot%20see%20how%20they%20have%20achieved%20it.%20On%20this%20Web%20Part%20the%20user%20can%20add%20multiple%20PP%20drop%20down%20fields%20and%20remove%20these%20individually%20too%2C%20without%20limit%20(i.e.%20they%20are%20rendered%20fully%20dynamically).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20this%20possible%20to%20do%20or%20am%20I%20taking%20the%20wrong%20approach%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-195691%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-196854%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20Framework%20Property%20Pane%20-%20building%20a%20dynamic%20property%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-196854%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%2C%20this%20is%26nbsp%3Bsimilar%20but%20is%20not%20the%20same%20functionality%20of%20the%20highlighted%20content%20web%20part.%20How%20can%20we%20get%20the%20source%20code%20for%20the%20highlighted%20content%20web%20part%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-196581%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20Framework%20Property%20Pane%20-%20building%20a%20dynamic%20property%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-196581%22%20slang%3D%22en-US%22%3E%3CP%3EHere's%20a%20Custom%20SPFx%20webpart%20which%20lets%20you%20add%20unlimited%20number%20of%20filters.%20I'm%20not%20sure%20if%20it%20lets%20you%20delete%20them%20individually%20once%20added%20though.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fspplante%2Freact-content-query%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fspplante%2Freact-content-query%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

I'm attempting to build a dynamic property in the Property Pane of a React based Sharepoint Online Web Part.

 

In order to achieve this I wish to iterate through an array of data in the PP, to create multiple drop down fields. Currently I can only create drop down fields through individual variables, not arrays or objects (as these can not be iterated through in the PP render method). This means that I can only render a predefined number of drop down fields in the PP.

 

Microsoft have already achieved this functionality on their 'Highlighted Content' Web Part, but haven't published the source code for this, so I cannot see how they have achieved it. On this Web Part the user can add multiple PP drop down fields and remove these individually too, without limit (i.e. they are rendered fully dynamically).

 

Is this possible to do or am I taking the wrong approach?

2 Replies
Highlighted

Here's a Custom SPFx webpart which lets you add unlimited number of filters. I'm not sure if it lets you delete them individually once added though.

 

https://github.com/spplante/react-content-query

 

 

Highlighted

Thanks, this is similar but is not the same functionality of the highlighted content web part. How can we get the source code for the highlighted content web part?