“Panel de propiedad personalizada SPFX” Código de respuesta

Panel de propiedad personalizada SPFX

import { IPropertyPaneField, IPropertyPaneCustomFieldProps, PropertyPaneFieldType } from '@microsoft/sp-webpart-base';
Purple Team

Panel de propiedad personalizada SPFX

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                this.customProp()               
              ]
            }
          ]
        }
      ]
    };
  }
Purple Team

Panel de propiedad personalizada 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);
        }                 
      }
    }
  }
}
Purple Team

Respuestas similares a “Panel de propiedad personalizada SPFX”

Preguntas similares a “Panel de propiedad personalizada SPFX”

Más respuestas relacionadas con “Panel de propiedad personalizada SPFX” en TypeScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código