SPFX WebPart - Passing variable to Property Pane

Question

I'm in the process of creating a WebPart that has similar functionality as the QuickLinks WebPart.

like QuickLinks, I have got the properties pane to display fields depending on whether the webpart edit is clicked or the add or edit link button is clicked.

Next I want to send the link ID to the Property Pane (if edit), which will display the properties from an array/object or, if no id generate new id / link.

then I want to return a updated link or add a new link.

I have tried calling a function defined in the properties pane, it calls the function but the value is undefined. using:-

in the webpart .tsx

this.props.editLinkItem("test-id"); // called when edit button clicked

in the props

export interface IJLinksProps {
  editLinkItem:Function;
}

in the property pane .ts

public render(): void {
    const element: React.ReactElement<IJLinksProps> = React.createElement(
      jLinks,
      {
        propPaneHandle: this.context.propertyPane,
        linkItems: this.properties.linkItems,
        editLinkItem: (id:string)=>{
          console.log(id)
        }
      
    }
    );
    ReactDom.render(element, this.domElement);
}

any ideas why its undefined?

Another option is setting the id in a State, then how would I get that in the properties?

or has anyone any other ideas. Thanks

Answer 1

for anyone who is interested!

I have resolved this

in the props I changed

editLinkItem:Function;

to

editLinkItem:(id: string) => void;

Answer 2

You have to do that with getPropertyPanelConfiguration(). Accordingly you had to import the corresponding PropertyPane type from '@microsoft/sp-property-pane' by simply adding it to the import here:

import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField, 
//PropertyPaneButton, PropertyPaneDropdown, PropertyPaneLink, etc.
} from '@microsoft/sp-property-pane';

and add it to the getPropertyPaneConfiguration() function under the groupFields:

groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel,
                }),
                PropertyPaneTextField('configuration', {
                  label: 'Config',
                  value: this.config
                }),
 /*example:*/   PropertyPaneButton('Finish', {
                 label: 'Finish
                ])
             ]

To get the values of the text fields or the buttons you have to use the variable above at:

export interface [youWebPart]Props{
 description: string,
 configuration: string,
 final: bool,
}

or visit Here to Check how you get the Valu