0

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

1 Answer 1

0

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"
              })
            ]
          }
        ]
      }
    ]
  };
}
2
  • That worked at treat, thank you
    – ajl80
    Mar 16 at 13:12
  • Glad I could help Mar 16 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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