Property pane(bag) per component instance like Quick links webpart

Question

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

And the property pane only for Titulo 2:

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

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(
  MyWebPart,
  {
    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.