custom property pane spfx
import { IPropertyPaneField, IPropertyPaneCustomFieldProps, PropertyPaneFieldType } from '@microsoft/sp-webpart-base';custom property pane spfx
import { IPropertyPaneField, IPropertyPaneCustomFieldProps, PropertyPaneFieldType } from '@microsoft/sp-webpart-base';custom property pane spfx
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
}),
this.customProp()
]
}
]
}
]
};
}custom property pane spfx
// 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);
}
}
}
}
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
