Setting Web Part Pane Properties On Button Click Event And When Other Web Part Properties Changes

Create client side Web part, using React Framework commands given below.

For this demo I have added a text field named WebpartTitle, button named ClickHere and a choicegroup field named ChoiceGroups.

Definitions for the fields are added in the getPropertyPaneConfiguration() method in LoadButtonpocwebpart.ts file.
1. protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
2. return {
3. pages: [
4. {
5. header: {
6. description: strings.PropertyPaneDescription
7. },
8. groups: [
9. {
10. groupName: "Web pane properties",
11. groupFields: [
13. PropertyPaneButton('ClickHere',
14. {
15. text: "ClickHere",
16. buttonType: PropertyPaneButtonType.Normal,
17. onClick: this.ButtonClick.bind(this)
18. }),
19. PropertyPaneTextField('WebpartTitle', {
20. label: "Web part Title"
21. }),
22. PropertyPaneChoiceGroup('ChoiceGroups', {
23. label: 'ChoiceGroups',
24. options: [
25. { key: 'dotnet', text: 'dotnet' },
26. { key: 'sharepoint', text: 'sharepoint' },
27. { key: 'java', text: 'java' }
28. ]
29. }),
30. ]
31. }
32. ]
33. }
34. ]
35. };
36. }
Using onclick attribute in propertypanebutton, we are binding onclick method Buttonclick.

We can call Buttonclick method with a parameter or without any parameter.
Pass ‘this’ parameter to get the context of the Web part, else use this.buttonlclick().

Here, I am setting the Web part title text field with a value called ‘updated’, when a button is clicked, so I am passing the Web part context to the onclick method.
1. private ButtonClick(oldVal: any): any {
2. this.properties.WebpartTitle="updated";
3. return "test"
4. }

In the similar way, when choicegroup field values changes, we can set the Web part title field. For this functionality, we need to add onPropertyFieldChanged.

Deploy and testing

Save the file -> run Gulp serve->add the Web part in workbench.html -> edit the Web part properties.

When click here button is clicked, the Web part title field value changes.

When choicegroups field value is selected as ‘dotnet’, same value is populated in the Web part title field.