Série SPFx : Propriétés des WebParts

Les propriétés des WebParts sont des propriétés qui peuvent être définies pour un WebPart SharePoint Framework (SPFx). Ces propriétés peuvent être utilisées pour gérer la configuration d’un WebPart, comme le titre ou la taille d’une image. Ces propriétés peuvent être définies dans le manifeste du WebPart et peuvent être affichées dans l’interface utilisateur pour la configuration du WebPart. Les valeurs des propriétés peuvent être stockées dans le modèle objet SharePoint et peuvent être utilisées pour déterminer la vue du WebPart.

Accédez au fichier .ts dans le dossier de votre WebPart (src\webparts{webPartName})

Dans ce fichier .ts, vous trouverez la méthode getPropertyPaneConfiguration en bas.

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

Cette méthode se compose des éléments clés suivants :

• pages : un tableau auquel vous pouvez assigner un ou plusieurs objets IPropertyPanePage displayGroupsAsAccordion : booléen optionnel qui vous permet de spécifier si les groupes doivent être affichés en accordéon ou non - header : paramètre optionnel auquel vous pouvez ajouter une description IPropertyPanePageHeader : chaîne obligatoire appartenant à l’objet IPropertyPanePageHeader - Image : chaîne optionnelle où vous pouvez entrer une URL pour l’image d’arrière-plan
• groups : paramètre obligatoire auquel vous pouvez assigner un ou plusieurs groupes d’objets (IPropertyPaneGroup ou IPropertyPaneConditionalGroup) groupName : paramètre de chaîne optionnel où vous pouvez donner un nom au groupe. Il est recommandé de le rendre unique. - isGroupNameHidden : booléen optionnel pour spécifier si le nom du groupe doit être affiché dans les propriétés du WebPart - isCollapsed : booléen optionnel pour spécifier si le groupe doit être réduit par défaut ou non
• groupFields : Quels champs dans ce groupe doivent être visibles. Peut être un ou plusieurs objets IPropertyPaneField.

Par exemple, un exemple d’IPropertyPaneField est un PropertyPaneTextField

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

Il est important de savoir que la première valeur que vous donnez est le targetProperty. Cela signifie que vous pouvez obtenir la valeur à partir de this.properties suivi de la valeur que vous saisissez comme targetProperty. Dans le cas ci-dessus, vous pourriez récupérer la valeur saisie dans le champ de texte ‘description’ avec this.properties.description. Vous pouvez ensuite transmettre cette valeur à votre composant React sous-jacent et ensuite configurer votre WebPart en fonction de la valeur de cette propriété.

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

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

Lorsque le WebPart est déployé sur SharePoint, toute personne ayant les droits de modifier la page peut également modifier les propriétés du WebPart (qui se trouve sur cette page). Pour le WebPart que nous venons de créer, en production elles ressemblent à ceci :