There are 3 major Files which is responsible for Sharepoint SPFxWebpart Property Plan,
  • src/webparts/demo/loc/en-us.js
  • src/webparts/demo/loc/mystring.d.ts
  • src/webparts/demo/DemoWebPart.ts
In en-js all the strings are present and Modification in string constants can be found here,
"FirstPagePropertyPaneDescription": "Description 1",
"FirstPagePropertyPaneDescription" is the Property, and "Description 1" is the value of the property associated with it.
In Mystring.d.ts we are making the Properties as Constant, and returning it so that in the entire project it works as constant
So Moral of the story till now if we don't want to Hard Code the value of the string we need to use these two files. Which gives us the flexibility to work with string properties.
Now the main Story Begins,
Where we define all the Properties to show up, the webpart.ts file
in the webpart.ts file we have below mentionned function which is responcible for PropertyPane
  • protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration()
this function returns a Configuration JSON which renders in Property pane.
The Basic Structure of JSON is,
  1. pages: [{
  2. header: {
  3. description: strings.PropertyPaneDescription
  4. },
  5. groups: [{
  6. groupName: strings.BasicGroupName,
  7. groupFields: [
  8. PropertyPaneTextField('description', {
  9. label: strings.DescriptionFieldLabel,
  10. multiline: true,
  11. rows: 5
  12. })
  13. ]
  14. }]
  15. }, {
  16. header: {
  17. description: strings.PropertyPaneDescription
  18. },
  19. groups: [{
  20. groupName: strings.BasicGroupName,
  21. groupFields: [
  22. PropertyPaneTextField('description', {
  23. label: strings.DescriptionFieldLabel
  24. })
  25. ]
  26. }]
  27. }]
  28. };]
In the Pages Array we can put as pages we want it will. In the screenshot, I have made 2 pages it renders as follows
Header and displayGroupsAsAccordion are optional.
Where a group is a required field. That means we need to put groupFields inside group array.
Inside GroupFields we put all the textbox/Dropdown etc.
All the values we use are mapped in our property interface.
  1. export interface ICreateListWebPartProps {
  2. description: string;
  3. }
To use this property in any function we need to call
  1. this.properties.description
We need to very sure the value passed in first parameter of PropertyPaneTextField or any this kind of function should have an exact match with the property declaration.
Otherwise the value should not be available in the property object.