SPFx Series: Webonderdeeleigenschappen

Webonderdeeleigenschappen zijn eigenschappen die kunnen worden gedefinieerd voor een SharePoint Framework (SPFx)-webonderdeel. Deze eigenschappen kunnen worden gebruikt om de configuratie van een webonderdeel te beheren, zoals de titel of de grootte van een afbeelding. Deze eigenschappen kunnen worden gedefinieerd in het webonderdeel-manifest en kunnen worden weergegeven in de gebruikersinterface voor het configureren van het webonderdeel. De waarden van de eigenschappen kunnen worden opgeslagen in het SharePoint-objectmodel en kunnen worden gebruikt om de weergave van het webonderdeel te bepalen.

Ga naar het .ts-bestand in de map van je webonderdeel (src\webparts{webPartName})

In dit .ts-bestand vind je de methode getPropertyPaneConfiguration onderaan.

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

Deze methode bestaat uit de volgende sleutelelementen:

• pages: een array waaraan je een of meer IPropertyPanePage-objecten kunt toewijzen. displayGroupsAsAccordion: optionele boolean waarmee je kunt aangeven of de groepen als accordeon moeten worden weergegeven of niet. header: optionele parameter waaraan je een IPropertyPanePageHeader kunt toevoegen. Description: verplichte string die behoort tot het IPropertyPanePageHeader-object. Image: optionele string waar je een URL kunt invoeren voor de achtergrondafbeelding.
• groups: verplichte parameter waaraan je een of meer groepen van objecten kunt toewijzen (IPropertyPaneGroup of IPropertyPaneConditionalGroup). groupName: optionele string-parameter waarbij je de groep een naam kunt geven. Het wordt aanbevolen deze uniek te maken. isGroupNameHidden: optionele boolean om op te geven of de groepsnaam moet worden weergegeven in de webonderdeeleigenschappen. isCollapsed: optionele boolean om op te geven of de groep standaard samengevouwen moet zijn of niet.
• groupFields: Welke velden in deze groep zichtbaar moeten zijn. Kan een of meer IPropertyPaneField-objecten zijn.

Een voorbeeld van een IPropertyPaneField is een PropertyPaneTextField

                  PropertyPaneTextField('description', {
                    label: strings.DescriptionFieldLabel
                  }

Het is belangrijk om te weten dat de eerste waarde die je opgeeft de targetProperty is. Dit betekent dat je de waarde kunt ophalen via this.properties gevolgd door de waarde die je invoert als targetProperty. In het bovenstaande geval kun je de waarde die is ingevoerd in het tekstveld ‘description’ ophalen met this.properties.description. Je kunt deze waarde vervolgens doorgeven aan je onderliggende React-component en je webonderdeel aansturen op basis van de waarde van deze eigenschap.

    public render(): void {
      const element: React.ReactElement<IHelloWorldProps> = React.createElement(
         HelloWorld,
         {
           description: this.properties.description
         }
      );

      ReactDom.render(element, this.domElement);
    }

Wanneer het webonderdeel is geïmplementeerd in SharePoint, kan iedereen die rechten heeft om de pagina te bewerken ook de webonderdeeleigenschappen van het webonderdeel (dat op die pagina staat) wijzigen. Voor het webonderdeel dat we zojuist hebben gemaakt, zien deze er in productie als volgt uit: