“Pane de propriété personnalisée SPFX” Réponses codées

Pane de propriété personnalisée SPFX

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

Pane de propriété personnalisée SPFX

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

Pane de propriété personnalisée 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

Réponses similaires à “Pane de propriété personnalisée SPFX”

Questions similaires à “Pane de propriété personnalisée SPFX”

Plus de réponses similaires à “Pane de propriété personnalisée SPFX” dans TypeScript

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code