Simplifier l’ajout de composants WebPart avec des entrées préconfigurées

Article
03/21/2023

Des composants WebPart côté client de SharePoint Framework plus complexes comportent probablement diverses propriétés que l’utilisateur doit configurer. Vous pouvez aider les utilisateurs en ajoutant des entrées de propriété préconfigurées pour des scénarios spécifiques. Une entrée préconfigurée initialise le composant WebPart avec des valeurs prédéfinies.

Remarque

Avant de suivre les étapes décrites dans cet article, n’oubliez pas de configurer votre environnement de développement de composant WebPart côté client SharePoint.

Avertissement

Les solutions SPFx ciblant SharePoint Server 2016 sont limitées à la définition d’une seule propriété de composant WebPart en tant qu’entrée préconfigurée. Si vous souhaitez en savoir plus, consultez la page concernant le problème #5260.

Entrées préconfigurées d’un composant WebPart

Chaque composant WebPart côté client de SharePoint Framework contient deux parties :

Le manifeste qui décrit le composant WebPart
Le code de composant WebPart

L’une des propriétés spécifiées dans le manifeste du composant WebPart est la propriété preconfiguredEntries.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",

  "id": "6737645a-4443-4210-a70e-e5e2a219133a",
  "alias": "GalleryWebPart",
  "componentType": "WebPart",
  "version": "0.0.1",
  "manifestVersion": 2,

  "preconfiguredEntries": [{
    "groupId": "1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489", // Discovery
    "group": { "default": "Under Development" },
    "title": { "default": "Gallery" },
    "description": { "default": "Shows items from the selected list" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "Gallery"
    }
  }]
}

La propriété preconfiguredEntries fournit des informations sur votre composant WebPart à utiliser dans la boîte à outils du composant WebPart. Lorsque les utilisateurs ajoutent des composants WebPart à la page, les informations de la propriété preconfiguredEntries sont utilisées pour afficher le composant WebPart dans la boîte à outils et définir ses paramètres par défaut lorsqu’il est ajouté à la page.

Si vous avez créé des composants WebPart classiques avec des solutions de confiance totale, vous pouvez considérer chaque entrée du preconfiguredEntries tableau comme correspondant à un fichier *.webpart . Tout comme un fichier *.webpart , chaque entrée de la preconfiguredEntries propriété est liée au code du composant WebPart et spécifie des informations de base sur le composant WebPart, telles que son titre ou sa description, ainsi que les valeurs par défaut de ses propriétés.

Propriétés d’un élément de tableau `preconfiguredEntries`

Chaque élément du tableau preconfiguredEntries se compose de plusieurs propriétés. Le tableau suivant décrit l’objectif de chaque propriété.

Nom de la propriété	Type de valeur	Requis	Objectif	Exemple de valeur
`title`	ILocalizedString	Oui	Titre du composant WebPart affiché dans la boîte à outils.	`"title": { "default": "Weather", "nl-nl": "Weerbericht" }`
`description`	ILocalizedString	Oui	Description du composant WebPart qui s’affiche dans les info-bulles de la boîte à outils.	`"description": { "default": "Shows weather in the given location", "nl-nl": "Toont weerbericht voor de opgegeven locatie" }`
`officeFabricIconFontName`	chaîne	Non	Icône du composant WebPart qui s’affiche dans la boîte à outils. Sa valeur doit être l’un des noms de la structure de l’interface utilisateur Office. Si cette propriété possède une valeur, la propriété `iconImageUrl` est ignorée.	`"officeFabricIconFontName": "Sunny"`
`iconImageUrl`	chaîne	Non	Icône du composant WebPart qui s’affiche dans la boîte à outils et est représentée par une URL d’image. L’image située dans l’URL doit être exactement de 40 x 28 px. Si la propriété `officeFabricIconName` n’a pas de valeur, cette propriété doit avoir une valeur.	`"iconImageUrl": "https://cdn.contoso.com/weather.png"`
`groupId`	chaîne	Oui	ID de groupe permettant de déterminer quel groupe moderne contient le composant WebPart dans une page du site moderne. SharePoint Framework réserve des ID de groupe pour les groupes prédéfinis. Le développeur peut choisir l’un de ces groupes. Si le développeur indique un ID qui n’est pas dans les groupes prédéfinis, il revient sur le groupe Autre.	`"groupId": "1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489"`
`group`	ILocalizedString	Non	Nom du groupe dans le sélecteur de composants Web Part qui contient le composant WebPart dans la page classique. Si aucune valeur n’est fournie, le composant WebPart s’affiche dans le groupe Divers.	`"group": { "default": "Content", "nl-nl": "Inhoud" }`
`properties`	TProperties	Oui	Objet de paire clé-valeur avec des valeurs par défaut pour les propriétés du composant WebPart.	`"properties": { "location": "Redmond", "numberOfDays": 3, "showIcon": true }`

Certaines propriétés du composant WebPart ont une valeur de type ILocalizedString. Ce type est un objet de paire clé-valeur qui permet aux développeurs de spécifier des chaînes pour les différents paramètres régionaux. Au minimum, une valeur de type ILocalizedString doit contenir la valeur default .

Les développeurs peuvent également fournir les traductions de cette valeur dans différents paramètres régionaux pris en charge par leur composant WebPart. Si le composant WebPart est placé sur une page utilisant des paramètres régionaux qui ne figurent pas dans la chaîne localisée, la valeur par défaut est utilisée à la place.

Valeurs ILocalizedString valides :

"title": {
  "default": "Weather",
  "nl-nl": "Weerbericht"
}

"title": {
  "default": "Weather"
}

Valeur ILocalizedString qui non valide car la clé default est manquante :

"title": {
  "en-us": "Weather"
}

Groupes modernes prédéfinis

Il existe sept groupes prêts à l’emploi comme indiqué dans le tableau suivant. Utilisez l’ID de groupe dans la propriété groupId.

Nom du groupe	ID	Le groupe inclut...
Texte, média et contenu	`cf066440-0614-43d6-98ae-0b31cf14c7c3`	Composants WebPart qui affichent du texte, du contenu multimédia, des documents, des informations issues du web et d’autres textes enrichis.
Découverte	`1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489`	Composants WebPart qui organisent, regroupent et filtrent le contenu pour aider les utilisateurs à découvrir des informations.
Communication et collaboration	`75e22ed5-fa14-4829-850a-c890608aca2d`	Composants WebPart qui facilitent le partage d’informations, le travail d’équipe et les interactions sociales.
Planification et processus	`1bc7927e-4a5e-4520-b540-71305c79c20a`	Composants WebPart qui prennent en charge la productivité des équipes à l’aide d’outils de planification et de processus.
Entreprises et aide à la décision	`4aca9e90-eff5-4fa1-bac7-728f5f157b66`	Composants WebPart pour le suivi et l’analyse des données et pour l’intégration du flux d’activité aux pages.
Outils du site	`070951d7-94da-4db8-b06e-9d581f1f55b1`	Composants WebPart pour les informations relatives au site et à sa gestion.
Autre	`5c03119e-3074-46fd-976b-c60198311f70`	Composants WebPart ne figurant pas dans d’autres groupes.

Si le développeur indique un ID qui ne figure pas dans la liste ci-dessus, le composant WebPart revient sur le groupe Autre.

Pour voir comment vous pouvez utiliser les entrées préconfigurées lors de la génération de composants WebPart, vous allez créer un composant WebPart de galerie échantillon. À l’aide de plusieurs propriétés, les utilisateurs peuvent configurer ce composant WebPart pour afficher les éléments d’une liste sélectionnée d’une façon spécifique. Pour des raisons de concision, vous omettez l’implémentation réelle de la logique du composant WebPart et portez votre attention sur l’utilisation de la propriété preconfiguredEntries afin de fournir des versions préconfigurées du composant WebPart de galerie.

Volet de propriétés du composant WebPart indiquant aux utilisateurs les différentes propriétés qu’ils doivent configurer pour que le composant WebPart fonctionne

Création d’un projet de composant WebPart

Commencez par créer un nouveau dossier pour votre projet.
```
md react-preconfiguredentries
```
Accédez au dossier du projet.
```
cd react-preconfiguredentries
```
Créez un nouveau projet en exécutant le Yeoman Microsoft Office SharePoint Online Generator à partir du nouveau répertoire que vous avez créé :
```
yo @microsoft/sharepoint
```
Le Yeoman Microsoft Office SharePoint Online Generator vous posera une série de questions. Pour toutes les questions, acceptez les options par défaut à l'exception des questions suivantes :
- Quel type de composant côté client créer? Composant WebPart
- Quel est le nom de votre composant WebPart ? Galerie
- Quel modèle souhaitez-vous utiliser ? Réagir
Ensuite, ouvrez le dossier de votre projet dans votre éditeur de code. Dans cet article, Visual Studio Code est utilisé dans les étapes et les captures d’écran, mais vous pouvez utiliser un autre éditeur si vous le souhaitez.

Ajouter des propriétés de composant WebPart

Dans le manifeste du composant WebPart, ajoutez des propriétés du composant WebPart afin que les utilisateurs puissent configurer le composant WebPart de galerie.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/GalleryWebPart.manifest.json.
Remplacez la section properties par le contenu JSON suivant :
```
{
  //...
  "preconfiguredEntries": [{
    //...
    "properties": {
      "listName": "",
      "order": "",
      "numberOfItems": 10,
      "style": ""
    }
  }]
}
```
Tenez compte des informations suivantes à propos de ce code :
- listName : spécifie le nom de la liste dont les éléments doivent être affichés.
- order : spécifie l’ordre dans lequel les éléments doivent être affichés, à savoir l’ordre chronologique ou chronologique inverse.
- numberOfItems : spécifie le nombre d’éléments à afficher.
- style : indique la façon dont les éléments doivent être affichés, par exemple sous forme de miniatures, ce qui est utile pour afficher des images, ou sous forme de liste, ce qui convient mieux aux documents.
Les propriétés du composant WebPart spécifiées dans le manifeste doivent également être ajoutées à l’interface de propriétés du composant WebPart.
Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/IGalleryWebPartProps.ts. Remplacez son code par :
```
export interface IGalleryWebPartProps {
  listName: string;
  order: string;
  numberOfItems: number;
  style: string;
}
```
Lors de la génération des composants WebPart côté client de l’infrastructure SharePoint à l’aide de React, suite à la modification de l’interface de propriétés du composant WebPart, vous devez mettre à jour la méthode render() du composant WebPart qui utilise cette interface pour créer une instance du composant React principal.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/GalleryWebPart.ts. Remplacez la méthode render() du composant WebPart par :

export default class GalleryWebPart extends BaseClientSideWebPart<IGalleryWebPartProps> {
  // ...
  public render(): void {
    const element: React.ReactElement<IGalleryProps> = React.createElement(Gallery, {
      listName: this.properties.listName,
      order: this.properties.order,
      numberOfItems: this.properties.numberOfItems,
      style: this.properties.style
    });

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

Mettez à jour le composant React principal pour afficher les valeurs des propriétés. Si le composant WebPart n’a pas été configuré, affichez l’espace réservé au composant WebPart standard. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/components/Gallery.tsx et remplacez son code par :

import * as React from 'react';
import styles from './Gallery.module.scss';
import { IGalleryProps } from './IGalleryProps';

export default class Gallery extends React.Component<IGalleryProps, void> {
  public render(): JSX.Element {
    if (this.needsConfiguration()) {
      return <div className="ms-Grid" style={{ color: "#666", backgroundColor: "#f4f4f4", padding: "80px 0", alignItems: "center", boxAlign: "center" }}>
        <div className="ms-Grid-row" style={{ color: "#333" }}>
          <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
          <div className="ms-Grid-col ms-u-sm12 ms-u-md6" style={{ height: "100%", whiteSpace: "nowrap", textAlign: "center" }}>
            <i className="ms-fontSize-su ms-Icon ms-Icon--ThumbnailView" style={{ display: "inline-block", verticalAlign: "middle", whiteSpace: "normal" }}></i><span className="ms-fontWeight-light ms-fontSize-xxl" style={{ paddingLeft: "20px", display: "inline-block", verticalAlign: "middle", whiteSpace: "normal" }}>Gallery</span>
          </div>
          <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
        </div>
        <div className="ms-Grid-row" style={{ width: "65%", verticalAlign: "middle", margin: "0 auto", textAlign: "center" }}>
          <span style={{ color: "#666", fontSize: "17px", display: "inline-block", margin: "24px 0", fontWeight: 100 }}>Show items from the selected list</span>
        </div>
        <div className="ms-Grid-row"></div>
      </div>;
    }
    else {
      return (
        <div className={styles.gallery}>
          <div className={styles.container}>
            <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
              <div className='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>
                <span className="ms-font-xl ms-fontColor-white">
                  Welcome to SharePoint!
                </span>
                <p className='ms-font-l ms-fontColor-white'>
                  Customize SharePoint experiences using web parts.
                </p>
                <p className='ms-font-l ms-fontColor-white'>
                  List: {this.props.listName}<br />
                  Order: {this.props.order}<br />
                  Number of items: {this.props.numberOfItems}<br />
                  Style: {this.props.style}
                </p>
                <a href="https://aka.ms/spfx" className={styles.button}>
                  <span className={styles.label}>Learn more</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }

  private needsConfiguration(): boolean {
    return Gallery.isEmpty(this.props.listName) ||
      Gallery.isEmpty(this.props.order) ||
      Gallery.isEmpty(this.props.style);
  }

  private static isEmpty(value: string): boolean {
    return value === undefined ||
      value === null ||
      value.length === 0;
  }
}

Mettez à jour l’interface du composant React principal en fonction de l’interface de la propriété du composant WebPart, car nous contournons toutes les propriétés du composant WebPart dans ce composant. Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/components/IGalleryProps.ts et remplacez son code par :
```
import { IGalleryWebPartProps } from '../IGalleryWebPartProps';

export interface IGalleryProps extends IGalleryWebPartProps { }
```

Afficher les propriétés du composant WebPart dans le volet de propriétés

Pour qu’un utilisateur utilise les propriétés nouvellement définies pour configurer le composant WebPart, les propriétés doivent être affichées dans le volet de propriétés du composant WebPart.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/GalleryWebPart.ts. Dans la partie supérieure du fichier, remplacez l’instruction d’importation @microsoft/sp-webpart-base par :

import {
  BaseClientSideWebPart
} from '@microsoft/sp-webpart-base';
import {
  IPropertyPaneConfiguration,
  PropertyPaneDropdown,
  PropertyPaneSlider,
  PropertyPaneChoiceGroup
} from '@microsoft/sp-property-pane';

Modifiez le propertyPaneSettings en :

export default class GalleryWebPart extends BaseClientSideWebPart<IGalleryWebPartProps> {
  // ...
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneDropdown('listName', {
                  label: strings.ListNameFieldLabel,
                  options: [{
                    key: 'Documents',
                    text: 'Documents'
                  },
                  {
                    key: 'Images',
                    text: 'Images'
                  }]
                }),
                PropertyPaneChoiceGroup('order', {
                  label: strings.OrderFieldLabel,
                  options: [{
                    key: 'chronological',
                    text: strings.OrderFieldChronologicalOptionLabel
                  },
                  {
                    key: 'reversed',
                    text: strings.OrderFieldReversedOptionLabel
                  }]
                }),
                PropertyPaneSlider('numberOfItems', {
                  label: strings.NumberOfItemsFieldLabel,
                  min: 1,
                  max: 10,
                  step: 1
                }),
                PropertyPaneChoiceGroup('style', {
                  label: strings.StyleFieldLabel,
                  options: [{
                    key: 'thumbnails',
                    text: strings.StyleFieldThumbnailsOptionLabel
                  },
                  {
                    key: 'list',
                    text: strings.StyleFieldListOptionLabel
                  }]
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Dans un scénario réel, vous récupéreriez la liste des listes à partir du site SharePoint en cours. Pour des raisons de concision, dans cet exemple, vous utilisez plutôt une liste fixe.

Ajouter des étiquettes de localisation

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/loc/mystrings.d.ts. Remplacez son code par :

declare interface IGalleryStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  ListNameFieldLabel: string;
  OrderFieldLabel: string;
  OrderFieldChronologicalOptionLabel: string;
  OrderFieldReversedOptionLabel: string;
  NumberOfItemsFieldLabel: string;
  StyleFieldLabel: string;
  StyleFieldThumbnailsOptionLabel: string;
  StyleFieldListOptionLabel: string;
}

declare module 'galleryStrings' {
  const strings: IGalleryStrings;
  export = strings;
}

Ajoutez les chaînes de ressources manquantes en ouvrant le fichier ./src/webparts/gallery/loc/en-us.js et en remplaçant son code par :

define([], function() {
  return {
    "PropertyPaneDescription": "Description",
    "BasicGroupName": "Group Name",
    "ListNameFieldLabel": "List",
    "OrderFieldLabel": "Items order",
    "OrderFieldChronologicalOptionLabel": "chronological",
    "OrderFieldReversedOptionLabel": "reversed chronological",
    "NumberOfItemsFieldLabel": "Number of items to show",
    "StyleFieldLabel": "Items display style",
    "StyleFieldThumbnailsOptionLabel": "thumbnails",
    "StyleFieldListOptionLabel": "list"
  }
});

Vérifiez que le projet est en cours de création en exécutant la commande suivante :
```
gulp serve
```
Dans le navigateur web, ajoutez le composant WebPart dans la zone de dessin, puis ouvrez son volet de propriétés. Vous devriez voir toutes les propriétés disponibles que les utilisateurs peuvent configurer.

Étant donné que vous n’avez pas spécifié de valeurs par défaut pour le composant WebPart, chaque fois que les utilisateurs ajoutent le composant WebPart à la page, ils doivent le configurer en premier. Vous pouvez simplifier cette expérience en fournissant des valeurs par défaut pour les scénarios les plus courants.

Spécifier des valeurs par défaut pour le composant WebPart

Imaginez que les utilisateurs utilisent souvent le composant WebPart de galerie pour afficher les cinq images récemment ajoutées. Plutôt que de demander aux utilisateurs de configurer manuellement le composant WebPart à chaque fois, vous pouvez leur fournir une version préconfigurée à l’aide de paramètres corrects.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/GalleryWebPart.manifest.json. Remplacez l’entrée existante dans la propriété preconfiguredEntries par :

{
  // ...
  "preconfiguredEntries": [{
    "groupId": "6737645a-4443-4210-a70e-e5e2a219133a",
    "group": { "default": "Content" },
    "title": { "default": "Recent images" },
    "description": { "default": "Shows 5 most recent images" },
    "officeFabricIconFontName": "Picture",
    "properties": {
      "listName": "Images",
      "order": "reversed",
      "numberOfItems": 5,
      "style": "thumbnails"
    }
  }]
}

Commencez à déboguer le projet en exécutant la commande suivante :
```
gulp serve
```
Remarque

si vous aviez débogué le projet précédemment, arrêtez le débogage et redémarrez le programme. Les modifications apportées au manifeste du composant WebPart ne sont pas répercutées dans l’instance Workbench automatiquement pendant le débogage, et vous devez recréer le projet pour les afficher.
Lorsque vous ouvrez la boîte à outils du composant WebPart pour ajouter le composant WebPart à la zone de dessin, vous pouvez voir que son nom et son icône ont été modifiés pour refléter les paramètres prédéfinis.
Une fois ajouté à la page, le composant WebPart fonctionne immédiatement à l’aide des paramètres préconfigurés.

Spécifier plusieurs entrées de composant WebPart préconfigurées

Imaginez qu’un autre groupe d’utilisateurs utilise souvent votre composant WebPart de galerie pour afficher les documents récemment ajoutés à leur site. Pour les aider à utiliser votre composant WebPart, vous pouvez ajouter un autre jeu de présélections qui répond à leurs besoins de configuration.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/GalleryWebPart.manifest.json. Remplacez la propriété preconfiguredEntries par :

{
  // ...
  "preconfiguredEntries": [{
    "groupId": "6737645a-4443-4210-a70e-e5e2a219133a",
    "group": { "default": "Content" },
    "title": { "default": "Recent images" },
    "description": { "default": "Shows 5 most recent images" },
    "officeFabricIconFontName": "Picture",
    "properties": {
      "listName": "Images",
      "order": "reversed",
      "numberOfItems": 5,
      "style": "thumbnails"
    }
  },
  {
    "groupId": "6737645a-4443-4210-a70e-e5e2a219133a",
    "group": { "default": "Content" },
    "title": { "default": "Recent documents" },
    "description": { "default": "Shows 10 most recent documents" },
    "officeFabricIconFontName": "Documentation",
    "properties": {
      "listName": "Documents",
      "order": "reversed",
      "numberOfItems": 10,
      "style": "list"
    }
  }]
}

Vous pouvez remarquer qu’il est possible de conserver l’entrée précédemment préconfigurée intacte et en ajouter une autre à côté en utilisant des valeurs différentes pour les propriétés.
Pour afficher le résultat, commencez à déboguer le projet en exécutant la commande suivante :
```
gulp serve
```
Lorsque vous ouvrez la boîte à outils du composant WebPart pour ajouter le composant WebPart à la zone de dessin, vous voyez que vous ne pouvez choisir qu’entre deux composants WebPart.
Une fois ajouté à la page, le composant WebPart Documents récents fonctionne immédiatement à l’aide de ses paramètres préconfigurés spécifiques.

Spécifier une instance non configurée du composant WebPart

Lors de la génération de composants WebPart, il existe souvent des scénarios spécifiques que le composant WebPart doit prendre en charge. Proposer des entrées préconfigurées pour ces scénarios facilite l’utilisation du composant WebPart.

Selon la façon dont vous créez votre composant WebPart, il est possible qu’il puisse prendre en charge d’autres scénarios imprévus. Si vous ne fournissez que des entrées préconfigurées spécifiques, les utilisateurs ne se rendront peut-être pas compte qu’ils peuvent utiliser votre composant WebPart pour un autre scénario. Il peut être judicieux de fournir une variante non configurée générique de votre composant WebPart.

Dans l’éditeur de code, ouvrez le fichier ./src/webparts/gallery/GalleryWebPart.manifest.json. Remplacez la propriété preconfiguredEntries par :

{
  // ...
  "preconfiguredEntries": [{
    "groupId": "6737645a-4443-4210-a70e-e5e2a219133a",
    "group": { "default": "Content" },
    "title": { "default": "Recent images" },
  "description": { "default": "Shows 5 most recent images" },
    "officeFabricIconFontName": "Picture",
    "properties": {
      "listName": "Images",
      "order": "reversed",
      "numberOfItems": 5,
      "style": "thumbnails"
    }
  },
  {
    "groupId": "6737645a-4443-4210-a70e-e5e2a219133a",
    "group": { "default": "Content" },
    "title": { "default": "Recent documents" },
    "description": { "default": "Shows 10 most recent documents" },
    "officeFabricIconFontName": "Documentation",
    "properties": {
      "listName": "Documents",
      "order": "reversed",
      "numberOfItems": 10,
      "style": "list"
    }
  },
  {
    "groupId": "6737645a-4443-4210-a70e-e5e2a219133a",
    "group": { "default": "Content" },
    "title": { "default": "Gallery" },
    "description": { "default": "Shows items from the selected list" },
    "officeFabricIconFontName": "CustomList",
    "properties": {
      "listName": "",
      "order": "",
      "numberOfItems": 5,
      "style": ""
    }
  }]
}

Notez que la version non configurée générique du composant WebPart est ajoutée à côté des configurations qui ciblent des scénarios spécifiques. De cette façon, s’il n’existe aucune configuration spécifique répondant aux besoins des utilisateurs, ils peuvent toujours utiliser la version générique et la configurer en fonction de leurs besoins.
Pour afficher le résultat, commencez à déboguer le projet en exécutant la commande suivante :
```
gulp serve
```
Lorsque vous ouvrez la boîte à outils du composant WebPart pour ajouter le composant WebPart à la zone de dessin, vous voyez qu’il existe désormais trois composants WebPart parmi lesquels les utilisateurs peuvent choisir.

Partager via

Simplifier l’ajout de composants WebPart avec des entrées préconfigurées

Entrées préconfigurées d’un composant WebPart

Propriétés d’un élément de tableau `preconfiguredEntries`

Groupes modernes prédéfinis

Création d’un projet de composant WebPart

Ajouter des propriétés de composant WebPart

Afficher les propriétés du composant WebPart dans le volet de propriétés

Ajouter des étiquettes de localisation

Spécifier des valeurs par défaut pour le composant WebPart

Spécifier plusieurs entrées de composant WebPart préconfigurées

Spécifier une instance non configurée du composant WebPart

Ressources supplémentaires

Partager via

Simplifier l’ajout de composants WebPart avec des entrées préconfigurées

Entrées préconfigurées d’un composant WebPart

Propriétés d’un élément de tableau preconfiguredEntries

Groupes modernes prédéfinis

Création d’un projet de composant WebPart

Ajouter des propriétés de composant WebPart

Afficher les propriétés du composant WebPart dans le volet de propriétés

Ajouter des étiquettes de localisation

Spécifier des valeurs par défaut pour le composant WebPart

Spécifier plusieurs entrées de composant WebPart préconfigurées

Spécifier une instance non configurée du composant WebPart

Ressources supplémentaires

Propriétés d’un élément de tableau `preconfiguredEntries`