Post
Ask Question

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",  
    3.   
    4.   "id": "06cc821c-ca66-480a-aae2-33ae02f9c62f",  
    5.   "alias": "LoadbuttonpocWebPart",  
    6.   "componentType": "WebPart",  
    7.   "version": "0.0.1",  
    8.   "manifestVersion": 2,  
    9.   
    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"  
    20.   
    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: [  
    12.                 
    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 click here button is clicked, the Web part title field value changes.

 

  1. ‘Updated’  
  2. this.properties.WebpartTitle=”updated”  



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