Update input based on a radio button selection in the properties pane

Question

I'm trying to update a input field value in the properties pane, based on a radio button selection, but its not changing.

I'm sure it'll be something simple-ish! I've looked about but can't find a solution, hence this post.

If I don't set a default value in the properties of manifest.json file, it sets when I select once but it doesn't change when I switch between the radio buttons.

here's an example of what I've tried:

if(this.properties.radioButton === "radio1"){
    textField = PropertyPaneTextField('linkLabel', {
              label: "Label",
              value: "radio1 selected"
    })
}
if(this.properties.radioButton === "radio2"){
    textField = PropertyPaneTextField('linkLabel', {
              label: "Label",
              value: "radio2 selected"
    })
}

 return {
  pages: [
    {
      groups: [
        {
          groupFields: [textField]
        }
      ]
    }
  ]
 };

Any help would be much appreciated Thanks

Answer 1

You want to use the onPropertyPaneFieldChanged method to detect changes to property pane field values. When the radio button value changes, you can change the value of the text field.

https://docs.microsoft.com/en-us/javascript/api/sp-webpart-base/basewebpart?view=sp-typescript-latest#@microsoft-sp-webpart-base-basewebpart-onpropertypanefieldchanged-member(1)

Here's some sample code.

export interface ISpfxPropertyChangeTestWebPartProps {
  radioButton: string;
  textField: string;
}

protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
  super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);

  if (propertyPath == "radioButton") {
    this.properties.textField = newValue;
  }
}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneChoiceGroup("radioButton", {
                label: "Radio",
                options: [
                  { key: "radio1", text: "One" },
                  { key: "radio2", text: "Two" }
                ]
              }),
              PropertyPaneTextField('textField', {
                label: "Label"
              })
            ]
          }
        ]
      }
    ]
  };
}