custom property pane spfx custom property pane spfx custom property pane spfx

The solution for “custom property pane spfx custom property pane spfx custom property pane spfx” can be found here. The following code will assist you in solving the problem.

// this is a simple structure of the custom control
private customProp() : IPropertyPaneField{
return {
targetProperty : “myTargetProperty”,
type : PropertyPaneFieldType.Custom,
properties: {
key: “myCustomProp”,
onRender: (element:HTMLElement, context:any, changeCallback:(targetProperty:string, newValue:any)=>void)=>{
// draw your control here by replacing the element’s html. Add logics to change the property and use the callback
let currentValue : number = this.properties[“myTargetProperty”] || 0;
element.innerHTML = “click me: ” + currentValue;
element.onclick = ()=>{
let newValue : number = currentValue + 1;
changeCallback(“myTargetProperty”, newValue);
}
}
}
}
}import { IPropertyPaneField, IPropertyPaneCustomFieldProps, PropertyPaneFieldType } from ‘@microsoft/sp-webpart-base’;protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField(‘description’, {
label: strings.DescriptionFieldLabel
}),
this.customProp()
]
}
]
}
]
};
}

Thank you for using DeclareCode; We hope you were able to resolve the issue.

More questions on [categories-list]

0
inline scripts encapsulated in