Create a new PropertyField type for a completely custom wp props UI

[mpowney]

Category

• [x] Enhancement
• [ ] Bug
• [ ] Question

Version

[ 1.17 ]

Expected / Desired Behavior / Question

It would be nice to have a property field that can present a panel, like PropertyFieldCollectionData - the idea is instead of the panel showing a list of array items, the panel contents is a custom react component. The dev will create the custom react component, and pass a reference to the component in to this new PropertyField's constructor method.

The custom react component props will inherit from an interface pre-defined in @pnp/spfx-property-controls. The interface will define a value: any property, and an updateValue(value: any) method. The updateValue method to be called whenever the dev's custom component has an update to provide back to the wp.

This PropertyField would be useful for developers who have complex wp property UI's to implement, it will provide the plumbing so they only need to create the UI.

I'd be happy to pick this up and submit a PR if we think it's a good idea?

Observed Behavior

There doesn't seem to be an easy way to create a custom / flexible wp props UI at the moment.

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[joelfmrodrigues]

@mpowney just trying to understand the details a little better. What are the main benefits that you see the control would add? Are you trying to solve a specific/common/repetitive problem with it?

On a side note, as this seems to be related, have you seen this package created by @AJIXuMuK ? https://www.npmjs.com/package/generator-spfx-proppane-control

[mpowney]

Hi @joelfmrodrigues, the idea is to allow dev's to provide a rich experience for content authors, where the available surface area of the OOTB property pane panel isn't large enough to express the UI they want. Think of where the PropertyFieldCollectionData is used - it offers a "richer" experience than other property fields, but it is restricted to only properties that are arrays.

It surely can be created by the developer themselves, I've implemented this already in solutions I'm delivering, but one of the benefits of having it here is to allow developers to skip the "plumbing" work and get on with developing the UI they want.

I proposed the option here because it is the go-to for community use of custom property fields, with the support of a great wide variety of experts.

I note the referenced npm package was last published two years ago.

[mpowney]

Any further thought / discussion on this? If not, I'll close the issue

[AJIXuMuK]

Hi @mpowney! Thank you for the suggestion! It would be great to see a PR from you. You mentioned that you've already implemented similar controls in your projects. So I believe you would provide a better thought-out component. Let us know it you're in!