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.

• Open command prompt
• md LoadButtonpocwebpart
• cd LoadButtonpocwebpart
• yo @microsoft/sharepoint- choose react framework
• run code . to open Visual studio code

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

• Add the Web part custom properties for these fields in manifest.json file.
  
  1. {
  2. "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
  4. "id": "06cc821c-ca66-480a-aae2-33ae02f9c62f",
  5. "alias": "LoadbuttonpocWebPart",
  6. "componentType": "WebPart",
  7. "version": "0.0.1",
  8. "manifestVersion": 2,
  10. "preconfiguredEntries": [{
  11. "groupId": "06cc821c-ca66-480a-aae2-33ae02f9c62f",
  12. "group": { "default": "Under Development" },
  13. "title": { "default": "loadbuttonpoc" },
  14. "description": { "default": "test loading indicator functionality" },
  15. "officeFabricIconFontName": "Page",
  16. "properties": {
  17. "description": "loadbuttonpoc",
  18. "ClickHere":"java",
  19. "WebpartTitle":"test"
  21. }
  22. }]
  23. }

• Declare the properties in ts file.
  
  1. export interface ILoadbuttonpocWebPartProps
  2. {
  3. description: string;
  4. WebpartTitle:string;
  5. ChoiceGroups:string;
  6. }

• 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.

• When choicegroups field value changes, the Web part title field is set with the selected value.
  
  1. protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
  2. if (propertyPath === 'ChoiceGroups' && newValue) {
  3. this.properties.WebpartTitle=newValue;
  4. }
  5. }

Deploy and testing

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

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