Erstellen Ihres ersten clientseitigen SharePoint-Webparts („Hello World“ Teil 1)Build your first SharePoint client-side web part (Hello World part 1)

Clientseitige Webparts sind clientseitige Komponenten, die im Kontext einer SharePoint-Website ausgeführt werden. Clientseitige Webparts lassen sich auf SharePoint Online bereitstellen und auch mithilfe aktueller JavaScript-Tools und -Bibliotheken erstellen.Client-side web parts are client-side components that run inside the context of a SharePoint page. Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

Clientseitige Webparts unterstützen:Client-side web parts support:

  • Die Erstellung mit HTML und JavaScriptBuilding with HTML and JavaScript.
  • SharePoint-Onlineumgebungen und lokale SharePoint-UmgebungenBoth SharePoint Online and on-premises environments.

Hinweis

Bevor Sie die Schritte in diesem Artikel durchführen, müssen Sie Ihre Entwicklungsumgebung einrichten.Before following the steps in this article, be sure to Set up your development environment.

Sie können die nachfolgend beschriebene Anleitung auch anhand dieses Videos in unserem YouTube-Kanal „SharePoint Patterns & Practices“ nachvollziehen:You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:



Erstellen eines neuen Webpart-ProjektsCreate a new web part project

Erstellen eines neuen Webpart-ProjektsTo create a new web part project

  1. Erstellen Sie an einem Speicherort Ihrer Wahl ein neues Projektverzeichnis:Create a new project directory in your favorite location.
md helloworld-webpart
  1. Wechseln Sie in das Projektverzeichnis:Go to the project directory.
cd helloworld-webpart
  1. Führen Sie den Yeoman-SharePoint-Generator aus, um ein neues HelloWorld-Webpart zu erstellen:Create a new HelloWorld web part by running the Yeoman SharePoint Generator.
yo @microsoft/sharepoint
  1. Es werden verschiedene Eingabeaufforderungen angezeigt. Gehen Sie wie folgt vor:When prompted:
  • Akzeptieren Sie den Standardnamen helloworld-webpart als Lösungsnamen, und drücken Sie die EINGABETASTE.Accept the default helloworld-webpart as your solution name, and then select Enter.
  • Wählen Sie SharePoint Online only (latest) aus, und drücken Sie die EINGABETASTE.Select SharePoint Online only (latest), and select Enter.
  • Wählen Sie die Option Use the current folder als Speicherort für die Dateien aus.Select Use the current folder for where to place the files.
  • Wählen Sie N aus, um zuzulassen, dass die Lösung sofort auf allen Websites bereitgestellt wird.Select N to allow solution to be deployed to all sites immediately.
  • Wählen Sie N auf die Frage aus, ob die Lösung eindeutige Berechtigungen enthält.Select N on the question if solution contains unique permissions.
  • Wählen Sie Webpart als den zu erstellenden Typ von clientseitiger Komponente aus.Select WebPart as the client-side component type to be created.
  1. Über die nächsten Eingabeaufforderungen werden spezifische Informationen zum Webpart abgefragt:The next set of prompts ask for specific information about your web part:
  • Akzeptieren Sie den Standardnamen HelloWorld als Namen für Ihr Webpart, und drücken Sie die EINGABETASTE.Accept the default HelloWorld as your web part name, and then select Enter.
  • Akzeptieren Sie die Standardbeschreibung HelloWorld description als Beschreibung für Ihr Webpart, und drücken Sie die EINGABETASTE.Accept the default HelloWorld description as your web part description, and then select Enter.
  • Akzeptieren Sie die Standardeinstellung No javaScript web framework als das zu verwendende Framework, und drücken Sie die EINGABETASTE.Accept the default No javascript web framework as the framework you would like to use, and then select Enter.

Eingabeaufforderungen im Yeoman-SharePoint-Generator zur Erstellung einer clientseitigen Webpart-Lösung

An diesem Punkt installiert Yeoman die erforderlichen Abhängigkeiten und erstellt ein Gerüst für die Lösungsdateien sowie das HelloWorld-Webpart.At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld web part. Das kann einige Minuten dauern.This might take a few minutes.

Nach Abschluss der Gerüsterstellung sollte folgende Erfolgsmeldung angezeigt werden.When the scaffold is complete, you should see the following message indicating a successful scaffold.

Erfolgreiche Erstellung eines Gerüsts für die clientseitige SharePoint-Lösung

Details zur Behebung etwaiger Fehler finden Sie unter Known issues.For information about troubleshooting any errors, see Known issues.

Verwenden Ihres bevorzugten Code-EditorsUsing your favorite Code Editor

Da die clientseitige SharePoint-Lösung auf HTML/TypeScript basiert, können Sie zur Erstellung Ihres Webparts alle Code-Editoren verwenden, die clientseitige Entwicklung unterstützen, beispielsweise:Because the SharePoint client-side solution is HTML/TypeScript based, you can use any code editor that supports client-side development to build your web part, such as:

In der SharePoint Framework-Dokumentation wird Visual Studio Code in den Anleitungen und Beispielen verwendet.SharePoint Framework documentation uses Visual Studio code in the steps and examples. Visual Studio Code ist ein einfacher und dennoch leistungsfähiger Quellcode-Editor von Microsoft, der auf dem Desktop ausgeführt wird und für Windows, Mac und Linux verfügbar ist.Visual Studio Code is a lightweight but powerful source code editor from Microsoft that runs on your desktop and is available for Windows, Mac, and Linux. Er verfügt über integrierte Unterstützung für JavaScript, TypeScript und Node.js und bietet ein reichhaltiges Ökosystem von Erweiterungen für andere Sprachen (wie C++, C#, Python, PHP) und Laufzeiten.It comes with built-in support for JavaScript, TypeScript, and Node.js, and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

Anzeigen einer Webpart-VorschauPreview the web part

Um eine Vorschau Ihres Webparts anzuzeigen, erstellen Sie es und führen es auf einem lokalen Webserver aus.To preview your web part, build and run it on a local web server. Die clientseitige Toolkette verwendet standardmäßig HTTPS-Endpunkte.The client-side toolchain uses HTTPS endpoint by default. Diese Einstellung kann in der Datei serve.json im Ordner config konfiguriert werden, aber wir empfehlen, die Standardwerte zu verwenden.This setting can be configured in the serve.json file located in the config folder, but we do recommend using the default values.

Wechseln Sie zur Konsole, stellen Sie sicher, dass Sie sich noch im Verzeichnis Helloworld-Webpart befinden, und geben Sie dann den folgenden Befehl ein:Switch to your console, ensure that you are still in the helloworld-webpart directory, and then enter the following command:

Hinweis

Das Entwicklerzertifikat muss NUR EINMAL in Ihrer Entwicklungsumgebung installiert werden, daher können Sie diesen Schritt überspringen, wenn Sie dies in Ihrer Umgebung bereits getan haben.Developer certificate has to be installed ONLY once in your development environment, so you can skip this step, if you have already executed that in your environment.

gulp trust-dev-cert

Damit ist das Entwicklerzertifikat installiert. Nun geben Sie den folgenden Befehl in die Konsole ein, um das Webpart zu erstellen und die Vorschau aufzurufen:Now that we have installed the developer certificate, enter the following command in the console to build and preview your web part:

gulp serve

Dieser Befehl führt eine Reihe von gulp-Tasks aus, um einen lokalen, Node-basierten HTTPS-Server unter localhost:4321 zu erstellen und eine Vorschau des Webparts aus Ihrer lokalen Entwicklungsumgebung in Ihrem Standardbrowser anzuzeigen.This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and launches your default browser to preview web parts from your local dev environment.

Hinweis

Wenn im Browser Probleme mit dem Zertifikat auftreten, finden Sie Informationen zum Installieren eines Entwicklerzertifikats im Artikel Einrichten der Entwicklungsumgebung.If you are seeing issues with the certificate in browser, please see details on installing a developer certificate from the Set up your development environment article.

„gulp serve“ für das Webpart-Projekt

Die SharePoint-Tools für clientseitige Entwicklung verwenden gulp zur Ausführung von Tasks. Unter anderem bearbeitet gulp Buildtasks wie das:SharePoint client-side development tools use gulp as the task runner to handle build process tasks such as:

  • Bundling und Minimieren von JavaScript- und CSS-DateienBundling and minifying JavaScript and CSS files.
  • Ausführen von Tools zum Aufrufen der Bündelungs- und Minimierungstasks vor jedem BuildRunning tools to call the bundling and minification tasks before each build.
  • Kompilieren von SASS-Dateien in CSSCompiling SASS files to CSS.
  • Kompilieren von TypeScript-Dateien in JavaScriptCompiling TypeScript files to JavaScript.

Visual Studio Code bietet integrierte Unterstützung für gulp und andere Tools zur Taskausführung.Visual Studio Code provides built-in support for gulp and other task runners. Wählen Sie STRG + UMSCHALT + B unter Windows oder BEFEHL + UMSCHALT + B auf dem Mac, um Ihr Webpart zu debuggen und eine Vorschau anzuzeigen.Select Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to debug and preview your web part.

SharePoint Workbench ist eine Designoberfläche für Entwickler, mit der Sie schnell Webpart-Tests durchführen und eine Webpart-Vorschau anzeigen können, und zwar ohne die Webparts in SharePoint bereitstellen zu müssen.SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Workbench enthält die clientseitige Seite und das clientseitige Canvas. Hier können Sie Webparts während der Entwicklung hinzufügen, löschen und testen.SharePoint Workbench includes the client-side page and the client-side canvas in which you can add, delete, and test your web parts in development.

SharePoint Workbench, lokal ausgeführt

Verwenden von SharePoint Workbench zum Anzeigen einer Vorschau und Testen des WebpartsTo use SharePoint Workbench to preview and test your web part

  1. Wählen Sie das Symbol Hinzufügen (Dieses Symbol wird angezeigt, wenn Sie die Maus über einen Abschnitt bewegen, wie in der vorherigen Abbildung gezeigt), um das HelloWorld-Webpart hinzuzufügen.To add the HelloWorld web part, select the add icon (this icon appears when you mouse hovers over a section as shown in the previous image). Die Toolbox wird geöffnet. Hier sehen Sie eine Liste aller Webparts, die Sie hinzufügen können.This opens the toolbox where you can see a list of web parts available for you to add. In dieser Liste werden das HelloWorld-Webpart sowie andere Webparts aufgeführt, die lokal in Ihrer Entwicklungsumgebung verfügbar sind.The list includes the HelloWorld web part as well other web parts available locally in your development environment.

SharePoint Workbench-Toolbox unter „localhost“

  1. Wählen Sie HelloWorld aus, um das Webpart zur Seite hinzuzufügen:Select HelloWorld to add the web part to the page.

HelloWorld-Webpart in SharePoint Workbench

Ausgezeichnet! Sie haben Ihr erstes clientseitiges Webpart zu einer clientseitigen Seite hinzugefügt.Congratulations! You have just added your first client-side web part to a client-side page.

  1. Wählen Sie das Stiftsymbol links oben neben dem Webpart, um den Eigenschaftenbereich des Webparts anzuzeigen.Select the pencil icon on the far left of the web part to reveal the web part property pane.

Eigenschaftenbereich für das HelloWorld-Webpart

Im Eigenschaftenbereich können Sie Eigenschaften definieren und so Ihr Webpart anpassen. Der Bereich wird clientseitig gesteuert und ermöglicht SharePoint-übergreifend ein konsistentes Design.The property pane is where you can define properties to customize your web part. The property pane is client-side driven and provides a consistent design across SharePoint.

  1. Ändern Sie den Text im Textfeld Description in Clientseitige Webparts sind klasse!.Modify the text in the Description text box to Client-side web parts are awesome!

Noch während Sie tippen, verändert sich der Text im Webpart.Notice how the text in the web part also changes as you type.

Eine der neuen Funktionen für den Eigenschaftenbereich betrifft das Aktualisierungsverhalten. Es lässt sich jetzt entweder als „reactive“ oder als „non-reactive“ konfigurieren.One of the new capabilities available to the property pane is to configure its update behavior, which can be set to reactive or non-reactive. Standardmäßig ist das Aktualisierungsverhalten auf „reactive“ gesetzt. Änderungen können Sie dann bereits während der Bearbeitung der Eigenschaften sehen.By default, the update behavior is reactive and enables you to see the changes as you edit the properties. Wenn das Verhalten auf „reactive“ gesetzt ist, werden Änderungen sofort gespeichert.The changes are saved instantly when the behavior is reactive.

Webpart-ProjektstrukturWeb part project structure

Anzeigen der Webpart-Projektstruktur in Visual Studio CodeTo use Visual Studio Code to explore the web part project structure

  1. Unterbrechen Sie in der Konsole die Verarbeitung durch Wählen von STRG + C (unter Windows).In the console, break the processing by selecting Ctrl+C (in Windows).

  2. Geben Sie folgenden Befehl ein, um das Webpart-Projekt in Visual Studio Code (oder einem Editor Ihrer Wahl) zu öffnen:Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor):

code .

HelloWorld-Projektstruktur

Falls ein Fehler gemeldet wird, müssen Sie eventuell den Codebefehl in PATH installieren.If you get an error, you might need to install the code command in PATH.

TypeScript ist die primäre Sprache zur Erstellung von clientseitigen SharePoint-Webparts. Bei TypeScript handelt es sich um eine typisierte Obersprache zu JavaScript, die in einfaches JavaScript kompiliert. SharePoint-Tools für die clientseitige Entwicklung werden auf Basis von TypeScript-Klassen, -Modulen und -Schnittstellen erstellt. Das hilft Entwicklern, stabile clientseitige Webparts zu erstellen.TypeScript is the primary language for building SharePoint client-side web parts. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. SharePoint client-side development tools are built using TypeScript classes, modules, and interfaces to help developers build robust client-side web parts.

Nachfolgend beschreiben wir einige der wichtigsten Dateien eines Projekts.The following are some key files in the project.

Webpart-KlasseWeb part class

HelloWorldWebPart.ts in src\webparts\helloworld definiert den Haupteinstiegspunkt des Webparts.HelloWorldWebPart.ts in the src\webparts\helloworld folder defines the main entry point for the web part. Die Webpart-Klasse HelloWorldWebPart erweitert die Klasse BaseClientSideWebPart.The web part class HelloWorldWebPart extends the BaseClientSideWebPart. Jedes clientseitige Webpart muss die Klasse BaseClientSideWebPart erweitern, damit es als gültiges Webpart definiert wird.Any client-side web part should extend the BaseClientSideWebPart class to be defined as a valid web part.

BaseClientSideWebPart implementiert das Minimum an Funktionen, das für die Erstellung eines Webparts erforderlich ist.BaseClientSideWebPart implements the minimal functionality that is required to build a web part. Daneben bietet diese Klasse auch viele Parameter für die Überprüfung von und den Zugriff auf schreibgeschützte Eigenschaften wie displayMode, Webpart-Eigenschaften, Webpart-Kontext, die Webpart-instanceId, das Webpart-domElement und vieles mehr.This class also provides many parameters to validate and access read-only properties such as displayMode, web part properties, web part context, web part instanceId, the web part domElement, and much more.

Die Webpart-Klasse ist dabei so definiert, dass sie den Eigenschaftentyp IHelloWorldWebPartProps akzeptiert.Notice that the web part class is defined to accept a property type IHelloWorldWebPartProps.

Der Eigenschaftentyp ist als Schnittstelle vor der HelloWorldWebPart-Klasse in der Datei HelloWorldWebPart.ts definiert.The property type is defined as an interface before the HelloWorldWebPart class in the HelloWorldWebPart.ts file.

export interface IHelloWorldWebPartProps {
    description: string;
}

Anhand dieser Eigenschaftendefinition definieren Sie benutzerdefinierte Eigenschaftentypen für Ihr Webpart. Dazu mehr weiter unten im Abschnitt zum Eigenschaftenbereich.This property definition is used to define custom property types for your web part, which is described in the property pane section later.

Webpart-RendermethodeWeb part render method

Das DOM-Element, in dem das Webpart gerendert werden soll, wird in der Methode render spezifiziert. Mithilfe dieser Methode wird das Webpart in dem angegebenen DOM-Element gerendert. Im Webpart HelloWorld ist als DOM-Element ein DIV festgelegt. Zu den Parametern der Methode gehören der Anzeigemodus (entweder „Read“ oder „Edit“) sowie etwaige konfigurierte Webpart-Eigenschaften:The DOM element where the web part should be rendered is available in the render method. This method is used to render the web part inside that DOM element. In the HelloWorld web part, the DOM element is set to a DIV. The method parameters include the display mode (either Read or Edit) and the configured web part properties if any:

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }

Das Modell ist flexibel: Webparts können in jedem JavaScript-Framework erstellt und dann in das DOM-Element geladen werden.This model is flexible enough so that web parts can be built in any JavaScript framework and loaded into the DOM element.

Konfigurieren des Webpart-EigenschaftenbereichsConfigure the Web part property pane

Der Eigenschaftenbereich wird in der Klasse HelloWorldWebPart definiert, und zwar in der Eigenschaft getPropertyPaneConfiguration.The property pane is defined in the HelloWorldWebPart class. The getPropertyPaneConfiguration property is where you need to define the property pane.

Sobald Sie die gewünschten Eigenschaften definiert haben, können Sie sie per this.properties.<property-value> im Webpart aufrufen. Hier ein Beispiel dafür in der Methode render:When the properties are defined, you can access them in your web part by using this.properties.<property-value>, as shown in the render method:

<p class="${styles.description}">${escape(this.properties.description)}</p>

Beachten Sie, dass wir dem Wert der Eigenschaft ein HTML-Escapezeichen hinzufügen, damit die Zeichenfolge gültig ist.Notice that we are performing an HTML escape on the property's value to ensure a valid string. Im Artikel Machen Sie Ihr clientseitiges SharePoint-Webpart konfigurierbar erfahren Sie mehr über die Arbeit mit dem Eigenschaftenbereich sowie die verschiedenen Feldtypen im Eigenschaftbereich.To learn more about how to work with the property pane and property pane field types, see Make your SharePoint client-side web part configurable.

Fügen wir nun einige weitere Eigenschaften zum Eigenschaftenbereich hinzu: ein Kontrollkästchen, eine Dropdownliste und eine Umschaltfläche.Let's now add a few more properties to the property pane: a check box, a drop-down list, and a toggle. Zunächst importieren wir die jeweiligen Felder des Eigenschaftenbereichs aus dem Framework.We first start by importing the respective property pane fields from the framework.

  1. Scrollen Sie zum Anfang der Datei, und tragen Sie Folgendes in den Abschnitt für den Import aus @microsoft/sp-property-pane ein:Scroll to the top of the file and add the following to the import section from @microsoft/sp-property-pane:
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle

Der vollständige Importabschnitt sieht dann wie folgt aus:The complete import section looks like the following:

import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneCheckbox,
  PropertyPaneDropdown,
  PropertyPaneToggle
} from '@microsoft/sp-property-pane';
  1. Aktualisieren Sie die Webparteigenschaften um die neuen Eigenschaften.Update the web part properties to include the new properties. Dadurch werden die Felder typisierten Objekten zugeordnet.This maps the fields to typed objects.

  2. Ersetzen Sie die IHelloWorldWebPartProps-Schnittstelle mit dem folgenden Code.Replace the IHelloWorldWebPartProps interface with the following code.

export interface IHelloWorldWebPartProps {
    description: string;
    test: string;
    test1: boolean;
    test2: string;
    test3: boolean;
}
  1. Speichern Sie die Datei.Save the file.

  2. Ersetzen Sie die Methode getPropertyPaneConfiguration durch den folgenden Code, der die neuen Felder des Eigenschaftenbereichs hinzufügt und den jeweiligen typisierten Objekten zuordnet.Replace the getPropertyPaneConfiguration method with the following code, which adds the new property pane fields and maps them to their respective typed objects.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
            PropertyPaneTextField('description', {
              label: 'Description'
            }),
            PropertyPaneTextField('test', {
              label: 'Multi-line Text Field',
              multiline: true
            }),
            PropertyPaneCheckbox('test1', {
              text: 'Checkbox'
            }),
            PropertyPaneDropdown('test2', {
              label: 'Dropdown',
              options: [
                { key: '1', text: 'One' },
                { key: '2', text: 'Two' },
                { key: '3', text: 'Three' },
                { key: '4', text: 'Four' }
              ]}),
            PropertyPaneToggle('test3', {
              label: 'Toggle',
              onText: 'On',
              offText: 'Off'
            })
          ]
          }
        ]
      }
    ]
  };
}
  1. Nachdem Sie die Eigenschaften zu den Webpart-Eigenschaften hinzugefügt haben, können Sie nun genauso auf sie zugreifen, wie Sie zuvor auf die description-Eigenschaft zugegriffen haben:After you add your properties to the web part properties, you can now access the properties in the same way you accessed the description property earlier:
<p class="${ styles.description }">${escape(this.properties.test)}</p>

Zur Festlegung des Standardwerts für die Eigenschaften müssen Sie den Eigenschaftenbehälter properties im Webpart-Manifest aktualisieren:To set the default value for the properties, you need to update the web part manifest's properties property bag.

  1. Öffnen Sie HelloWorldWebPart.manifest.json, und ändern Sie properties wie folgt:Open HelloWorldWebPart.manifest.json and modify the properties to:
"properties": {
  "description": "HelloWorld",
  "test": "Multi-line text field",
  "test1": true,
  "test2": "2",
  "test3": true
}

Der Webpart-Eigenschaftenbereich weist jetzt diese Standardwerte für die betreffenden Eigenschaften auf.The web part property pane now has these default values for those properties.

Webpart-ManifestWeb part manifest

Die Datei HelloWorldWebPart.manifest.json definiert die Webpart-Metadaten, beispielsweise die Version, die ID, den Anzeigenamen, das Symbol und die Beschreibung.The HelloWorldWebPart.manifest.json file defines the web part metadata such as version, id, display name, icon, and description. Jedes Webpart muss ein solches Manifest enthalten.Every web part must contain this manifest.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "fbcf2c6a-7df9-414c-b3f5-37cab6bb1280",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld",
      "test": "Multi-line text field",
      "test1": true,
      "test2": "2",
      "test3": true
    }
  }]
}


Da wir nun neue Eigenschaften eingeführt haben, müssen Sie sicherstellen, dass Sie das Webpart wieder aus der lokalen Entwicklungsumgebung hosten, indem Sie den folgenden Befehl ausführen.Now that we have introduced new properties, ensure that you are again hosting the web part from the local development environment by executing the following command. Dadurch wird auch sichergestellt, dass die vorherigen Änderungen ordnungsgemäß angewendet wurden.This also ensures that the previous changes were correctly applied.

gulp serve

Anzeigen der Webpart-Vorschau in SharePointPreview the web part in SharePoint

SharePoint Workbench lässt sich auch in SharePoint hosten, um während der Entwicklung lokaler Webparts eine Webpart-Vorschau anzuzeigen und Tests durchzuführen.SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. Der entscheidende Vorteil: Sie führen Ihr Webpart dann im SharePoint-Kontext aus und können mit SharePoint-Daten interagieren.The key advantage is that now you are running in SharePoint context and you are able to interact with SharePoint data.

  1. Navigieren Sie zur folgenden URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspxGo to the following URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx

Hinweis

Wenn Sie das SPFx-Entwicklerzertifikat noch nicht installiert haben, meldet Workbench, dass das Laden von Skripts von „localhost“ nicht konfiguriert ist.If you do not have the SPFx developer certificate installed, Workbench notifies you that it is configured not to load scripts from localhost. Beenden Sie den Prozess, der derzeit im Konsolenfenster ausgeführt wird, führen Sie den Befehl gulp trust-dev-cert im Projektverzeichnis aus, um das Entwicklerzertifikat zu installieren, und führen Sie dann den Befehl gulp serve erneut aus.Stop the currently running process in the console window, and execute the gulp trust-dev-cert command in your project directory console to install the developer certificate before running the gulp servecommand again. Informationen zum Installieren eines Entwicklerzertifikats finden Sie im Artikel Einrichten der Entwicklungsumgebung.See details on installing a developer certificate from the Set up your development environment article.

SharePoint Workbench, ausgeführt auf einer SharePoint Online-Website

  1. In SharePoint Workbench wird jetzt die Navigationsleiste der Office 365 Suite angezeigt.Notice that the SharePoint Workbench now has the Office 365 Suite navigation bar.

  2. Wählen Sie im Canvas das Symbol zum Hinzufügen, um die Toolbox aufzurufen.Select the add icon in the canvas to reveal the toolbox. In der Toolbox finden Sie jetzt die Webparts, die auf der Website verfügbar sind, auf der SharePoint Workbench gehostet wird, sowie HelloWorldWebPart.The toolbox now shows the web parts available on the site where the SharePoint Workbench is hosted along with your HelloWorldWebPart.

Toolbox in SharePoint Workbench, ausgeführt auf einer SharePoint Online-Website

  1. Fügen Sie HelloWorld aus der Toolbox hinzu.Add HelloWorld from the toolbox. Das Webpart wird jetzt auf einer in SharePoint gehosteten Website ausgeführt.Now you're running your web part in a page hosted in SharePoint!

HelloWorld-Webpart, ausgeführt in SharePoint Workbench auf einer SharePoint Online-Website

Hinweis

Die Farbe des Webparts hängt von den Farben der Website ab.The color of the web part depends on the colors of the site. Standardmäßig erben Webparts die grundlegenden Farben von der Website, indem dynamisch auf die auf der Website verwendeten Office-UI-Fabric Core-Formatvorlagen verwiesen wird, auf der das Webpart gehostet wird.By default, web parts inherit the core colors from the site by dynamically referencing Office UI Fabric Core styles used in the site where the web part is hosted.

Da die Entwicklung und die Tests Ihres Webparts noch nicht abgeschlossen sind, müssen Sie es weder packen noch auf SharePoint bereitstellen.Because you are still developing and testing your web part, there is no need to package and deploy your web part to SharePoint.

Nächste SchritteNext steps

Herzlichen Glückwunsch! Ihr erstes HelloWorld-Webpart läuft.Congratulations on getting your first Hello World web part running!

Jetzt können Sie das HelloWorld-Webpart weiter ausbauen. Wie das funktioniert, erfahren Sie im nächsten Artikel Verbinden des Webparts mit SharePoint.Now that your web part is running, you can continue building out your Hello World web part in the next topic, Connect your web part to SharePoint. Dort verwenden Sie dasselbe HelloWorld-Webpart-Projekt und ergänzen es um eine Funktion zur Interaktion mit REST-APIs für SharePoint-Listen.You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. Ihnen wird bereits aufgefallen sein, dass der Befehl gulp serve immer noch im Konsolenfenster ausgeführt wird (oder in Visual Studio Code, falls Sie den Editor verwenden).Notice that the gulp serve command is still running in your console window (or in Visual Studio Code if you are using that as editor). Sie können ihn einfach weiterlaufen lassen und zum nächsten Artikel wechseln.You can continue to let it run while you go to the next article.

Hinweis

Wenn Sie einen Fehler in der Dokumentation oder im SharePoint-Framework finden, melden Sie ihn bitte an das SharePoint Engineering unter Verwendung der Fehlerliste im sp-dev-docs-Repository, oder fügen Sie einen Kommentar zu diesem Artikel hinzu.If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the issue list at the sp-dev-docs repository or by adding a comment to this article. Vielen Dank im Voraus für Ihr Feedback.Thanks for your input in advance.