Vereinfachen des Hinzufügens von Webparts mit vorkonfigurierten Einträgen

Komplexere clientseitige SharePoint-Framework-Webparts haben oft zahlreiche Eigenschaften, die von den Benutzern konfiguriert werden müssen. Sie können sie dabei unterstützen, indem Sie für bestimmte Szenarien vorkonfigurierte Eigenschafteneinträge hinzufügen. Ein vorkonfigurierter Eintrag initialisiert das Webpart mit vordefinierten Werten.

Hinweis

Bevor Sie die Schritte in diesem Artikel ausführen, müssen Sie die Entwicklungsumgebung für Ihr clientseitiges SharePoint-Webpart einrichten.

Warnung

SPFx-Lösungen für SharePoint Server 2016 sind darauf beschränkt, nur eine einzelne Webparteigenschaft als vorkonfigurierten Eintrag festzulegen. Weitere Informationen finden Sie unter Problem #5260.

Vorkonfigurierte Einträge für Webparts

Jedes clientseitige SharePoint-Framework-Webpart besteht aus zwei Komponenten:

  • Dem Manifest, das das Webpart beschreibt
  • Dem Webpartcode

Eine der im Webpartmanifest definierten Eigenschaften ist die Eigenschaft 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"
    }
  }]
}

Die Eigenschaft preconfiguredEntries enthält Informationen zu Ihrem Webpart zur Verwendung in der Webpart-Toolbox. Wenn Benutzer Webparts zu der Seite hinzufügen, werden die Informationen aus der Eigenschaft preconfiguredEntries verwendet, um das Webpart in der Toolbox anzuzeigen und seine Standardeinstellungen zu definieren, wenn es zu der Seite hinzugefügt wird.

Wenn Sie klassische Webparts mit vollständig vertrauenswürdigen Lösungen erstellt haben, können Sie sich jeden Eintrag im Array vorstellen, der preconfiguredEntries einer *.webpart-Datei entspricht. Genau wie eine *.webpart-Datei ist jeder Eintrag in der preconfiguredEntries Eigenschaft mit dem Webpartcode verknüpft und gibt grundlegende Informationen zum Webpart an, z. B. titel oder beschreibung, sowie Standardwerte für seine Eigenschaften.

Eigenschaften eines preconfiguredEntries-Arrayelements

Jedes Element im preconfiguredEntries-Array umfasst mehrere Eigenschaften. In der folgenden Tabelle wird der Zweck jeder Eigenschaft erläutert.

Eigenschaftsname Werttyp Erforderlich Zweck Beispielwert
title ILocalizedString ja Der Webparttitel, der in der Toolbox angezeigt wird. "title": { "default": "Weather", "nl-nl": "Weerbericht" }
description ILocalizedString ja Die Webpartbeschreibung, die in den Toolbox-QuickInfos angezeigt wird. "description": { "default": "Shows weather in the given location", "nl-nl": "Toont weerbericht voor de opgegeven locatie" }
officeFabricIconFontName string nein Das Symbol für das Webpart, das in der Toolbox angezeigt wird. Der Wert für die Eigenschaft muss einer der Office UI Fabric-Symbolnamen sein. Ist für diese Eigenschaft ein Wert gesetzt, wird die Eigenschaft iconImageUrl ignoriert. "officeFabricIconFontName": "Sunny"
iconImageUrl string nein Das Symbol für das Webpart, das in der Toolbox angezeigt wird. Es wird als Bild-URL angegeben. Das unter der URL abrufbare Bild muss genau 40 × 28 px groß sein. Für diese Eigenschaft muss ein Wert angegeben werden, wenn für die Eigenschaft officeFabricIconName kein Wert angegeben ist. "iconImageUrl": "https://cdn.contoso.com/weather.png"
groupId string Ja Die Gruppen-ID, die festlegt, in welcher modernen Gruppe auf einer modernen Website das Webpart enthalten sein soll. Das SharePoint-Framework reserviert Gruppen-IDs für vordefinierte Gruppen. Der Entwickler kann eine dieser Gruppen auswählen. Wenn der Entwickler eine ID angibt, die nicht zu den vordefinierten Gruppen gehört, wird automatisch die Gruppe Sonstiges gewählt. "groupId": "1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489"
group ILocalizedString Nein Der Name der Gruppe in der Webpartauswahl einer klassischen Seite, in der das Webpart enthalten sein soll. Wird kein Wert angegeben, wird das Webpart in der Gruppe Sonstiges aufgeführt. "group": { "default": "Content", "nl-nl": "Inhoud" }
properties TProperties Ja Gibt ein Schlüssel-Wert-Paar-Objekt mit Standardwerten für Webparteigenschaften an. "properties": { "location": "Redmond", "numberOfDays": 3, "showIcon": true }

Einige Webparteigenschaften weisen einen Wert vom Typ ILocalizedString auf. Dieser Typ ist ein Schlüssel-Wert-Paar-Objekt, mit dem Entwickler Zeichenfolgen für die unterschiedlichen Gebietsschemas angeben können. Mindestens ein Wert vom Typ ILocalizedString muss den default-Wert enthalten.

Optional können Entwickler zusätzlich die Übersetzungen dieses Werts in die unterschiedlichen Gebietsschemas bereitstellen, die ihr Webpart unterstützt. Wenn das Webpart auf einer Seite in einem Gebietsschema platziert wird, das nicht in der lokalisierten Zeichenfolge aufgeführt ist, wird stattdessen der Standardwert verwendet.

Gültige ILocalizedString-Werte:

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

Ein Wert des Typs ILocalizedString, der ungültig ist, weil der Schlüssel default fehlt:

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

Vordefinierte moderne Gruppen

Wie in der Tabelle unten ersichtlich, gibt es sieben vordefinierte Gruppen. Die jeweilige Gruppen-ID wird in der Eigenschaft groupId angegeben.

Name der Gruppe ID Umfang der Gruppe
Text, Medien und Inhalt cf066440-0614-43d6-98ae-0b31cf14c7c3 Webparts, die Text, Multimediainhalte, Dokumente, Informationen aus dem Web und andere formatierte Inhalte anzeigen
Suche 1edbd9a8-0bfb-4aa2-9afd-14b8c45dd489 Webparts, die Inhalte organisieren, gruppieren und filtern, um Benutzern bei der Suche nach Informationen zu helfen
Kommunikation und Zusammenarbeit 75e22ed5-fa14-4829-850a-c890608aca2d Webparts, die die Weitergabe von Informationen sowie die Teamarbeit und soziale Interaktionen vereinfachen
Planung und Durchführung 1bc7927e-4a5e-4520-b540-71305c79c20a Webparts, die Planungs- und Durchführungstools für höhere Teamproduktivität bereitstellen
Business und Intelligence 4aca9e90-eff5-4fa1-bac7-728f5f157b66 Webparts für das Nachverfolgen und Analysieren von Daten sowie für die Integration von Geschäftsabläufen in Seiten
Websitetools 070951d7-94da-4db8-b06e-9d581f1f55b1 Webparts mit Websiteinformationen und Tools zur Websiteverwaltung
Sonstiges 5c03119e-3074-46fd-976b-c60198311f70 Webparts, die in keine der anderen Gruppen passen

Gibt der Entwickler eine ID an, die nicht in dieser Liste aufgeführt ist, wird das Webpart automatisch der Gruppe Sonstiges zugeordnet.

Um anzuzeigen, wie Sie beim Erstellen von Webparts vorkonfigurierte Einträge verwenden können, erstellen Sie ein Beispiel-Katalog-Webpart. Benutzer können mithilfe mehrerer Eigenschaften dieses Webpart konfigurieren, um Elemente aus einer ausgewählten Liste auf eine bestimmte Weise anzuzeigen. Aus Platzgründen wird die eigentliche Implementierung der Webpartlogik ausgelassen, und Sie konzentrieren sich auf die Verwendung der preconfiguredEntries-Eigenschaft, um vorkonfigurierte Versionen des Katalog-Webparts bereitzustellen.

Webpart-Eigenschaftenbereich mit den verschiedenen Eigenschaften, die Benutzer konfigurieren müssen, damit das Webpart funktioniert

Erstellen eines neuen Webpart-Projekts

  1. Erstellen Sie zunächst einen neuen Ordner für Ihr Projekt.

    md react-preconfiguredentries
    
  2. Wechseln Sie zum Projektordner.

    cd react-preconfiguredentries
    
  3. Erstellen Sie ein neues Projekt, indem Sie den Yeoman SharePoint-Generator in dem neuen Verzeichnis ausführen, das Sie erstellt haben:

    yo @microsoft/sharepoint
    

    Der Yeoman SharePoint-Generator zeigt eine Reihe von Fragen an. Akzeptieren Sie für alle Fragen die Standardoptionen mit Ausnahme der folgenden Fragen:

    • Welchen Typ von clientseitiger Komponente möchten Sie erstellen? WebPart
    • Wie lautet der Name Ihres Webparts? Katalog
    • Welche Vorlage möchten Sie verwenden? React
  4. Öffnen Sie den Projektordner in einem Code-Editor. In diesem Artikel wird Visual Studio Code in den Schritten und Screenshots verwendet, Sie können jedoch einen beliebigen Editor verwenden.

Hinzufügen von Webparteigenschaften

Fügen Sie im Webpartmanifest Webparteigenschaften hinzu, damit Benutzer das Katalog-Webpart konfigurieren können.

  1. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/GalleryWebPart.manifest.json.

  2. Ersetzen Sie den Abschnitt properties durch den folgenden JSON-Code:

    {
      //...
      "preconfiguredEntries": [{
        //...
        "properties": {
          "listName": "",
          "order": "",
          "numberOfItems": 10,
          "style": ""
        }
      }]
    }
    

    Zu diesem Code ist Folgendes anzumerken:

    • listName: Gibt den Namen der Liste an, deren Listenelemente angezeigt werden sollen.
    • order: Gibt die Reihenfolge an, in der Elemente angezeigt werden sollen, z. B. chronologisch oder umgekehrt chronologisch.
    • numberOfItems: Gibt an, wie viele Elemente angezeigt werden sollen.
    • style: Gibt an, wie die Elemente angezeigt werden sollen, ob z. B. als Miniaturansichten (geeignet zum Anzeigen von Bildern) oder als Liste (geeignet zum Anzeigen von Dokumenten).

    Im Manifest angegebene Webparteigenschaften müssen außerdem der Webparteigenschaften-Schnittstelle hinzugefügt werden.

  3. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/IGalleryWebPartProps.ts. Ändern Sie deren Code in Folgendes:

    export interface IGalleryWebPartProps {
      listName: string;
      order: string;
      numberOfItems: number;
      style: string;
    }
    

    Beim Erstellen von clientseitigen SharePoint-Framework-Webparts mithilfe von React müssen Sie nach dem Ändern der Webparteigenschaften-Schnittstelle die Methode render() des Webparts aktualisieren. Sie verwendet diese Schnittstelle zur Erstellung einer Instanz der React-Hauptkomponente.

  4. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/galleryWebPart.ts. Ändern Sie die Methode render() des Webparts wie folgt:

    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);
      }
      // ...
    }
    
  5. Aktualisieren Sie die React-Hauptkomponente so, dass die Werte der Eigenschaften angezeigt werden. Wenn das Webpart nicht konfiguriert wurde, soll der standardmäßige Webpart-Platzhalter angezeigt werden. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/components/Gallery.tsx, und ändern Sie den in der Datei enthaltenen Code wie folgt:

    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;
      }
    }
    
  6. Aktualisieren Sie die Schnittstelle der React-Hauptkomponente so, dass sie der Webparteigenschaften-Schnittstelle entspricht. Dies ist notwendig, da sämtliche Webparteigenschaften an diese Komponente übergeben werden. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/components/IGalleryProps.ts, und ändern Sie den in der Datei enthaltenen Code wie folgt:

    import { IGalleryWebPartProps } from '../IGalleryWebPartProps';
    
    export interface IGalleryProps extends IGalleryWebPartProps { }
    

Rendern von Webparteigenschaften im Eigenschaftenbereich

Damit Benutzer die neu definierten Eigenschaft verwenden können, um das Webpart zu konfigurieren, müssen die Eigenschaften im Webpart-Eigenschaftenbereich angezeigt werden.

  1. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/galleryWebPart.ts. Ändern Sie im oberen Abschnitt der Datei die Importanweisung @microsoft/sp-webpart-base wie folgt:

    import {
      BaseClientSideWebPart
    } from '@microsoft/sp-webpart-base';
    import {
      IPropertyPaneConfiguration,
      PropertyPaneDropdown,
      PropertyPaneSlider,
      PropertyPaneChoiceGroup
    } from '@microsoft/sp-property-pane';
    
  2. Ändern Sie die Eigenschaft propertyPaneSettings in:

    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
                      }]
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }
    

In einem realen Szenario würden Sie die Liste der Listen von der aktuellen SharePoint-Website abrufen. Aus Platzgründen verwenden Sie in diesem Beispiel stattdessen eine Liste mit fixer Elementanzahl.

Hinzufügen von Lokalisierungsbezeichnungen

  1. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/loc/mystrings.d.ts. Ändern Sie deren Code in Folgendes:

    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;
    }
    
  2. Fügen Sie die fehlenden Ressourcenzeichenfolgen hinzu. Öffnen Sie dazu im Code-Editor die Datei ./src/webparts/gallery/loc/en-us.js, und ändern Sie den in ihr enthaltenen Code wie folgt:

    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"
      }
    });
    
  3. Vergewissern Sie sich mithilfe des folgenden Befehls, dass das Projekt erstellt wird:

    gulp serve
    
  4. Fügen Sie das Webpart im Webbrowser zur Canvas hinzu, und öffnen Sie den Eigenschaftenbereich des Webparts. Es sollten alle Eigenschaften angezeigt werden, die Benutzer konfigurieren können.

    Webpart-Eigenschaftenbereich mit den verschiedenen Eigenschaften, die Benutzer konfigurieren müssen, damit das Webpart funktioniert

Da Sie für das Webpart keine Standardwerte angegeben haben, müssen Benutzer das Webpart immer zuerst konfigurieren, wenn sie es der Seite hinzufügen. Sie können die Benutzererfahrung einfacher gestalten, indem Sie für die gängigsten Szenarien Standardwerte angeben.

Angeben von Standardwerten für das Webpart

Nehmen wir an, Ihre Benutzer verwenden häufig das Katalog-Webpart, um die fünf zuletzt hinzugefügten Bilder anzuzeigen. Statt von den Benutzern zu verlangen, dass sie das Webpart jedes Mal manuell konfigurieren, könnten Sie ihnen eine vorkonfigurierte Version mit den korrekten Einstellungen bereitstellen.

  1. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/GalleryWebPart.manifest.json. Ändern Sie den vorhandenen Eintrag in der Eigenschaft preconfiguredEntries in Folgendes:

    {
      // ...
      "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"
        }
      }]
    }
    
  2. Starten Sie das Debuggen des Projekts, indem Sie den folgenden Befehl ausführen:

    gulp serve
    

    Hinweis

    Falls das Debuggen bereits läuft: Stoppen Sie den Prozess, und starten Sie ihn erneut. Änderungen am Webpartmanifest werden beim Debuggen nicht automatisch in die Workbench übernommen. Sie müssen das Projekt neu erstellen, um sie sehen zu können.

  3. Sobald Sie die Webpart-Toolbox öffnen, um das Webpart zur Canvas hinzuzufügen, werden Sie sehen, dass sich Name und Symbol geändert haben. Sie entsprechen nun den vorkonfigurierten Einstellungen.

    Webpart-Toolbox mit der vorkonfigurierten Version des Webparts

  4. Sobald das Webpart zur Seite hinzugefügt wird, funktioniert es unmittelbar und verwendet die vorkonfigurierten Einstellungen.

    Vorkonfiguriertes Webpart, das sofort funktioniert, wenn es der Seite hinzugefügt wird

Eingeben mehrerer vorkonfigurierter Webparteinträge

Stellen Sie sich vor, dass eine andere Gruppe von Benutzern häufig Ihr Katalog-Webpart verwendet, um Dokumente anzuzeigen, die kürzlich ihrer Website hinzugefügt wurden. Damit diese Ihr Webpart verwenden können, können Sie einen weiteren Satz von Voreinstellungen hinzufügen, die deren Konfigurationsanforderungen entsprechen.

  1. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/GalleryWebPart.manifest.json. Ändern Sie die Eigenschaft preconfiguredEntries in:

    {
      // ...
      "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"
        }
      }]
    }
    
  2. Wie Sie sehen, behalten Sie den bisherigen vorkonfigurierten Eintrag bei und fügen einen weiteren hinzu, mit anderen Werten für die Eigenschaften.

  3. Starten Sie mit dem folgenden Befehl das Debuggen des Projekts, um das Ergebnis zu sehen:

    gulp serve
    
  4. Sobald Sie die Webpart-Toolbox öffnen, um das Webpart der Canvas hinzuzufügen, werden zwei Webparts zur Auswahl angezeigt.

    Webpart-Toolbox mit der vorkonfigurierten Version von zwei Webparts

  5. Das Webpart Zuletzt verwendete Dokumente funktioniert sofort, wenn es der Seite hinzugefügt wird, und arbeitet dabei mit den festgelegten vorkonfigurierten Einstellungen.

    Vorkonfiguriertes Webpart „Zuletzt verwendete Dokumente“, das sofort funktioniert, wenn es der Seite hinzugefügt wird

Angeben einer nicht konfigurierten Instanz des Webparts

Beim Erstellen von Webparts gibt es häufig spezielle Szenarien, die das Webpart unterstützen soll. Das Bereitstellen vorkonfigurierter Einträge für diese Szenarien erleichtert Benutzern die Arbeit mit dem Webpart.

Je nachdem, wie Sie das Webpart erstellen, könnte es möglicherweise auch andere Szenarien unterstützen, die Sie nicht vorab eingeplant haben. Wenn Sie nur ganz bestimmte vorkonfigurierte Einträge bereitstellen, ist für Benutzer möglicherweise nicht klar, dass sie Ihr Webpart für ein anderes Szenario verwenden können. Es bietet sich an, auch eine allgemeine, nicht konfigurierte Variante Ihres Webparts bereitzustellen.

  1. Öffnen Sie im Code-Editor die Datei ./src/webparts/gallery/GalleryWebPart.manifest.json. Ändern Sie die Eigenschaft preconfiguredEntries in:

    {
      // ...
      "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": ""
        }
      }]
    }
    
  2. Wie Sie sehen, wird die allgemeine, nicht konfigurierte Version des Webparts zusätzlich zu den Konfigurationen hinzugefügt, die auf bestimmte Szenarien abzielen. Wenn keine spezifische Konfiguration vorhanden ist, die die Anforderungen der Benutzer erfüllt, können diese immer die generische Version verwenden und entsprechend ihren Anforderungen konfigurieren.

  3. Starten Sie mit dem folgenden Befehl das Debuggen des Projekts, um das Ergebnis zu sehen:

    gulp serve
    
  4. Sobald Sie die Webpart-Toolbox öffnen, um das Webpart der Canvas hinzuzufügen, werden drei Webparts angezeigt, aus denen die Benutzer wählen können.

    Webpart-Toolbox mit der vorkonfigurierten Version von drei Webparts