Panel de propiedad personalizada SPFX
import { IPropertyPaneField, IPropertyPaneCustomFieldProps, PropertyPaneFieldType } from '@microsoft/sp-webpart-base';
Purple Team
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()
]
}
]
}
]
};
}// this is a simple structure of the custom control
private customProp() : IPropertyPaneField<IPropertyPaneCustomFieldProps>{
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);
}
}
}
}
}