Adding Custom Properties To SPFx Web Part Properties Pane - Part Two

Introduction

In this article, you will learn how to define and add custom properties to SPFx eb part properties pane.


In my previous previous article, you will have gained a basic understanding of developing custom pane property.

In this article, you will see the custom pane property definition, React components to render the property and property declaration in the Web part file. In the sample, you will learn how to define and render the message bar as property pane in SPFx Web part properties pane.


In SPFx project, create a folder to hold the property definition file and React component file.



Property Definition File


Import interfaces/objects

Import the necessary data/objects from Cloud, other modules or other files. Here, React files from React module, custom properties from the Web part module and custom interface from custom React file are being imported. Interfaces

Lets see the interfaces defined.

  • IPropertyFieldMessageBarProps.

  • IPropertyFieldMessageBarPropsInternal: IPropertyFieldMessageBarPropsInternal interface inherits from. IPropertyPaneCustomFieldProps interface. Custom interface is defined (IPropertyFieldMessageBarPropsInternal), which inherits the properties/methods from the standard interface (IPropertyPaneCustomFieldProps).


Class

Then the class is defined. The class holds the private and public variables, constructor, render and other custom methods defined.


Function

Then the function is defined. The function builds the property required for rendering the data. The property collection is created using the internal interface created above. And then the class is instantiated, which in turn calls the render method. (Remember Render method invokes React file methods to display the data.)


The code snippet given below shows the property definition file. Some components use export component, since those components are referred in the other files/sections.

  1. import * as React from 'react';  

  2. import * as ReactDom from 'react-dom';  

  3. import PropertyFieldMessageBarHost from '../spfxcustomproperties/spfxcustomprop';  

  4. import {    

  5. IPropertyPaneCustomFieldProps,    

  6. IPropertyPaneField,    

  7. PropertyPaneFieldType  } from '@microsoft/sp-webpart-base';  

  8. export interface IPropertyFieldMessageBarProps {    

  9. label: string;   

  10.  onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;    

  11. properties: any;    

  12. key?: string;  }  

  13. export interface IPropertyFieldMessageBarPropsInternal extends IPropertyPaneCustomFieldProps {    

  14. label: string;     

  15. targetProperty: string;    

  16. onRender(elem: HTMLElement): void

  17. // Method to render data (in this case reactjs is used)   

  18. onDispose(elem: HTMLElement): void

  19. // Method to delete the object   

  20. onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;    

  21. properties: any; 

  22. // set of properties (holds values of property collection defined using IPropertyFieldMessageBarProps)   

  23. key: string;  }  

  24. export class PropertyFieldMessageBarBuilder implements IPropertyPaneField<IPropertyFieldMessageBarPropsInternal> {  

  25. //Properties defined by IPropertyPaneField

  26. public properties: IPropertyFieldMessageBarPropsInternal;  

  27. public targetProperty: string;  

  28. public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;  

  29. //Custom properties

  30. private label: string;  

  31. private onPropertyChange: (propertyPath: string, oldValue: any, newValue: any) => void;  

  32. private customProperties: any;  

  33. private key: string;  

  34. // Initializes the variables or methods

  35. public constructor(usertargetProperty: string, userproperties: IPropertyFieldMessageBarPropsInternal) {  

  36. this.render = this.render.bind(this);  

  37. this.targetProperty = userproperties.targetProperty;  

  38. this. properties = userproperties;  

  39. this.label = userproperties.label;  

  40. this.properties.onDispose = this.dispose;  

  41. this.properties.onRender = this.render;  

  42. this.onPropertyChange = userproperties.onPropertyChange;  

  43. this.customProperties = userproperties.properties;  

  44. this.key = userproperties.key;    }  

  45. // Renders the data

  46. private render(elem: HTMLElement): void 

  47. {  

  48. const element: React.ReactElement<IPropertyFieldMessageBarPropsInternal> = React.createElement(PropertyFieldMessageBarHost, {        

  49. label: this.label,        

  50. targetProperty: this.targetProperty,        

  51. onDispose: null,        

  52. onRender: null,        

  53. onPropertyChange: this.onPropertyChange,        

  54. properties: this.customProperties,        

  55. key: this.key      

  56. });       

  57. ReactDom.render(element, elem);    

  58. }  

  59. private dispose(elem: HTMLElement): void {     }  

  60. }  

  61. export function PropertyPaneMessageBar(targetProperty: string, properties: 

  62. IPropertyFieldMessageBarProps): IPropertyPaneField<IPropertyFieldMessageBarPropsInternal> 

  63. {  

  64. // Builds the property based on the custom data

  65. var newProperties: IPropertyFieldMessageBarPropsInternal = {        

  66. label: properties.label,        

  67. targetProperty: targetProperty,        

  68. onPropertyChange: properties.onPropertyChange,        

  69. properties: properties.properties,        

  70. onDispose: null,        

  71. onRender: null,        

  72. key: properties.key      

  73. };  

  74. // Initialize and render the properties

  75. return new PropertyFieldMessageBarBuilder(targetProperty, newProperties);  

  76. }  


React file For Rendering

Import interfaces/objects

  • Import the necessary objects/interfaces. 

  • The internal interface created in the definition file are being imported. 

  • Import the React message bar component from the office site.

Class

Define the class file, which has constructor and Render method to create and display the message bar element with the custom message. The code snippet given below shows React file code to render the pane property on SPFx properties pane.

  1. import * as React from 'react';  

  2. import { IPropertyFieldMessageBarPropsInternal } from './spfxpropdefinition';  

  3. import { MessageBar,MessageBarType} from 'office-ui-fabric-react/lib/MessageBar';  

  4. export default

  5. class PropertyFieldMessageBarHost extends React.Component<IPropertyFieldMessageBarPropsInternal, {}> {     

  6. constructor(props: IPropertyFieldMessageBarPropsInternal) {  

  7. super(props);     

  8. }  

  9. public render(): JSX.Element {  

  10. return (        

  11. <div>                     

  12. <MessageBar ref="alert" messageBarType={ MessageBarType.info } >

  13. {this.props.label}</MessageBar>        

  14. </div>     

  15.  );    

  16. }  }  


Web part file

From the default Web part file available, import the message bar property from the property definition file and then declare the message bar property inside the getPropertyPaneConfiguration() method. The code snippet given below shows how property definition is being imported.

  1. import {PropertyPaneMessageBar} from './spfxcustomproperties/spfxpropdefinition';  

The code snippet given below shows the Web part property definition in the Web parts file.

  1. protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {  

  2. return {      

  3. pages: [        {          

  4. header: {            

  5. description: strings.PropertyPaneDescription          

  6. },          

  7. groups: [            {              

  8. groupName: strings.BasicGroupName,              

  9. groupFields: [                 

  10. PropertyPaneMessageBar('msgbar',{                  

  11. label:"Message to be displayed on SPfx properties pane",                  

  12. onPropertyChange: this.onPropertyPaneFieldChanged,                  

  13. properties: this. properties  

  14. // other user defined props                                               

  15. })               

  16. ]            

  17. }          

  18. ]        

  19. }      

  20. ]    

  21. };  

  22. }  


Run/Deploy the project

The screenshot given below shows the Web part with the message bar property.



Summary

Thus, you have learned about developing/defining SPFx custom pane property and adding it to the SPFx Web part properties pane.


To Learn More

In my previous articles, you can learn about adding the existing properties to SPFx Web part properties pane