I am trying to achieve something very similar with Quick links webpart. So I would add new link buttons when in edit mode and some general properties like title but have a separate property bag for each button with each link. You can see the Quick Links webpart below, showing

Quick Links webpart showing button for link customization

And the property pane only for Titulo 2:

Property Pane for Titulo 2 link

Is it possible to imitate this kind of functionality, but where I would have full control of UI and properties available? Maybe nested webparts?

1 Answer 1


You can use something like the Fluent UI Panel to build your own reusable configuration component for your other components, then in the root web part file you create a parameters to pass the values back to the web part configuration.

Short example:

Create an interface:

export interface IComponentConfiguration {
  somevalue: number;
  othervalue: number;

Update your root component render function:

const element: React.ReactElement<IMyWebPartProps> = React.createElement(
    updateProperty: (value: IComponentConfiguration) => {
      this.properties.componentconfig = value;

Add the same to your components property interface:

import { IComponentConfiguration} from '../IComponentConfiguration';

export interface IComponentUpdaterProps {
  updateProperty: (value: IComponentConfiguration);

And then finally you update the configuration from your component like so:

this.props.updateProperty({ somevalue: 2, othervalue: 3 });

In your components you can set it to open this configuration panel if the web parts DisplayMode === DisplayMode.Edit

A more detailed example on how to pass configuration values back to the root web part can be found here, in @pnp/spfx-controls-react.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.