Verbinden Ihres clientseitigen Webparts mit SharePoint („Hello World“ Teil 2)Connect your client-side web part to SharePoint (Hello World part 2)

Wenn Sie Ihr Webpart mit SharePoint verbinden, haben Sie Zugriff auf SharePoint-Funktionalitäten und -Daten und können Endbenutzern eine stärker integrierte Erfahrung bieten.Connect your web part to SharePoint to access functionality and data in SharePoint and provide a more integrated experience for end users. In diesem Artikel bauen wir das HelloWorld-Webpart weiter aus, das Sie im vorherigen Artikel Erstellen Ihres ersten Webparts erstellt haben.This article continues building the Hello World web part built in the previous article Build your first web part.

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:

Ausführen von „gulp serve“Run gulp serve

Stellen Sie sicher, dass der Befehl gulp serve ausgeführt wird.Ensure that you have the gulp serve command running. Sollte er noch nicht ausgeführt werden, wechseln Sie ins Projektverzeichnis helloworld-webpart, und führen Sie die folgenden Befehle aus:If it is not already running, go to the helloworld-webpart project directory and run it by using the following commands.

cd helloworld-webpart
gulp serve

Zugreifen auf den SeitenkontextGet access to page context

Wird Workbench lokal gehostet, befinden Sie sich nicht im Kontext einer SharePoint-Seite.When the Workbench is hosted locally, you do not have the SharePoint page context. Sie haben aber auch dann viele verschiedene Möglichkeiten, Ihr Webpart zu testen.You can still test your web part in many different ways. Beispielsweise können Sie sich auf die Webpart-UX konzentrieren und mithilfe simulierter Daten eine Interaktion mit SharePoint simulieren, wenn Sie sich nicht im SharePoint-Kontext bewegen.For example, you can concentrate on building the web part's UX and use mock data to simulate SharePoint interaction when you don't have the SharePoint context.

Wenn Sie die Workbench jedoch in SharePoint hosten, haben Sie Zugang zum Seitenkontext, der wiederum verschiedene Schlüsseleigenschaften bereitstellt, darunter:However, when the Workbench is hosted in SharePoint, you get access to the page context, which provides various key properties such as:

  • WebtitelWeb title
  • Absolute Web-URLWeb absolute URL
  • Relative Webserver-URLWeb server-relative URL
  • Anmeldename des BenutzersUser sign-in name

So erhalten Sie Zugriff auf den SeitenkontextTo get access to the page context

Um auf Kontextinformationen in Ihrem Webpart zuzugreifen, verwenden Sie das folgende Objekt in Ihrem Code:To access contextual information in your web part, you'll be using the following object in your code:

this.context.pageContext
  1. Wechseln Sie zu Visual Studio Code (oder Ihrer bevorzugten IDE), und öffnen Sie src\webparts\helloWorld\HelloWorldWebPart.ts.Switch to Visual Studio code (or your preferred IDE) and open src\webparts\helloWorld\HelloWorldWebPart.ts.

  2. Ersetzen Sie in der Methode render den Codeblock innerHTML durch den folgenden Code:Inside the render method, replace the innerHTML code block with the following code:

    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>
              <p class="${ styles.description }">${escape(this.properties.test)}</p>
              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
    
  3. Dabei wird ${ } verwendet, um den Variablenwert im HTML-Block auszugeben.Notice how ${ } is used to output the variable's value in the HTML block. Ein zusätzlicher per p codierter HTML-Abschnitt wird zur Anzeige von this.context.pageContext.web.title verwendet.An extra HTML p is used to display this.context.pageContext.web.title. Da dieses Webpart aus der lokalen Umgebung geladen wird, lautet der Titel Local Workbench.Because this web part loads from the local environment, the title is Local Workbench.

  4. Speichern Sie die Datei.Save the file. Der noch in der Konsole laufende Befehl gulp serve erkennt diesen Speichervorgang und:The gulp serve running in your console detects this save operation and:

    • Erstellt und bündelt den aktualisierten Code automatisch.Builds and bundles the updated code automatically.
    • Aktualisiert die Seite in der lokalen Workbench (da der Webpart-Code neu geladen werden muss).Refreshes your local Workbench page (as the web part code needs to be reloaded).

    Hinweis

    Zeigen Sie das Konsolenfenster und Visual Studio Code nebeneinander an, um mitzuverfolgen, wie gulp beim Speichern von Änderungen in Visual Studio Code automatisch kompiliert.Keep the console window and Visual Studio Code side-by-side to see gulp automatically compile as you save changes in Visual Studio Code.

  5. Wechseln Sie in Ihrem Browser zur lokalen Registerkarte SharePoint Workbench. Wenn Sie die Registerkarte bereits geschlossen haben, lautet die URL https://localhost:4321/temp/workbench.html.In your browser, switch to the local SharePoint Workbench tab. If you have already closed the tab, the URL is https://localhost:4321/temp/workbench.html.

    Im Webpart sollte jetzt Folgendes zu sehen sein:You should see the following in the web part:

    SharePoint-Seitenkontext unter „localhost“

  6. Navigieren Sie zu der in SharePoint gehosteten SharePoint Workbench.Navigate to the SharePoint Workbench hosted in SharePoint. Die vollständige URL lautet https://your-sharepoint-site-url/_layouts/workbench.aspx.The full URL is https://your-sharepoint-site-url/_layouts/workbench.aspx. Beachten Sie, dass Sie auf der SharePoint Online-Seite die Seiten aktualisieren müssen, um die Änderungen zu sehen.Notice that on the SharePoint Online side, you need to refresh the page to see the changes.

    Der Seitenkontext ist jetzt für das Webpart verfügbar, und der Seitentitel Ihrer SharePoint-Website sollte im Webpart zu sehen sein.You should now see your SharePoint site title in the web part now that page context is available to the web part.

    SharePoint-Seitenkontext auf der SharePoint-Website

Definieren eines ListenmodellsDefine list model

Wenn Sie mit SharePoint-Listendaten arbeiten möchten, benötigen Sie ein Listenmodell. Zum Abrufen von Listen sind zwei Modelle erforderlich.You need a list model to start working with SharePoint list data. To retrieve the lists, you need two models.

  1. Wechseln Sie zu Visual Studio Code, und öffnen Sie src\webparts\helloWorld\HelloWorldWebPart.ts.Switch to Visual Studio Code and go to src\webparts\helloWorld\HelloWorldWebPart.ts.

  2. Definieren Sie die folgenden Modelle des Typs interface direkt oberhalb der Klasse HelloWorldWebPart:Define the following interface models just above the HelloWorldWebPart class:

    export interface ISPLists {
      value: ISPList[];
    }
    
    export interface ISPList {
      Title: string;
      Id: string;
    }
    

    Die Schnittstelle ISPList enthält die SharePoint-Listeninformationen, die Sie einbinden möchten.The ISPList interface holds the SharePoint list information that we are connecting to.

Abrufen von Listen aus einem simulierten SpeicherRetrieve lists from mock store

Für die Tests in der lokalen Workbench benötigen Sie einen simulierten Speicher, der simulierte Daten zurückgibt.To test in the local Workbench, you need a mock store that returns mock data.

So erstellen Sie einen simulierten InformationsspeicherTo create a mock store

  1. Erstellen Sie im Ordner src\webparts\helloWorld eine neue Datei mit dem Namen MockHttpClient.ts.Create a new file inside the src\webparts\helloWorld folder named MockHttpClient.ts.

  2. Kopieren Sie den folgenden Code in die Datei MockHttpClient.ts:Copy the following code into MockHttpClient.ts:

    import { ISPList } from './HelloWorldWebPart';
    
    export default class MockHttpClient  {
    
        private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },
                                            { Title: 'Mock List 2', Id: '2' },
                                            { Title: 'Mock List 3', Id: '3' }];
    
        public static get(): Promise<ISPList[]> {
        return new Promise<ISPList[]>((resolve) => {
                resolve(MockHttpClient._items);
            });
        }
    }
    

    Wichtige Hinweise zum Code:Things to note about the code:

    • Da es in HelloWorldWebPart.ts mehrere Exporte gibt, wird per { } festgelegt, welcher zu importieren ist.Because there are multiple exports in HelloWorldWebPart.ts, the specific one to import is specified by using { }. In diesem Fall ist nur das Datenmodell ISPList erforderlich.In this case, only the data model ISPList is required.
    • Die Eingabe der Dateierweiterung ist bei Importen aus dem Standardmodul nicht nötig. In unserem Beispiel ist das Standardmodul HelloWorldWebPart.You do not need to type the file extension when importing from the default module, which in this case is HelloWorldWebPart.
    • Der Code exportiert die Klasse MockHttpClient als Standardmodul, das sich anschließend in andere Dateien importieren lässt.It exports the MockHttpClient class as a default module so that it can be imported in other files.
    • Der Code erstellt das anfängliche simulierte Array ISPList und die simulierten Rückgaben.It builds the initial ISPList mock array and returns.
  3. Speichern Sie die Datei.Save the file.

Jetzt können Sie die Klasse MockHttpClient in der Klasse HelloWorldWebPart verwenden. Zunächst müssen Sie das Modul MockHttpClient importieren.You can now use the MockHttpClient class in the HelloWorldWebPart class. You first need to import the MockHttpClient module.

So importieren Sie das Modul MockHttpClient importieren.To import the MockHttpClient module

  1. Öffnen Sie die Datei HelloWorldWebPart.ts.Open the HelloWorldWebPart.ts file.

  2. Kopieren Sie den folgenden Code, und fügen Sie ihn direkt unter import * as strings from 'HelloWorldWebPartStrings'; ein.Copy and paste the following code just under import * as strings from 'HelloWorldWebPartStrings';.

    import MockHttpClient from './MockHttpClient';
    
  3. Fügen Sie die folgende private Methode in der Klasse HelloWorldWebPart hinzu, um den Listenabruf zu simulieren:Add the following private method that mocks the list retrieval inside the HelloWorldWebPart class.

    private _getMockListData(): Promise<ISPLists> {
      return MockHttpClient.get()
        .then((data: ISPList[]) => {
          var listData: ISPLists = { value: data };
          return listData;
        }) as Promise<ISPLists>;
    }
    
  4. Speichern Sie die Datei.Save the file.

Abrufen von Listen von einer SharePoint-WebsiteRetrieve lists from SharePoint site

Als Nächstes müssen Sie Listen von der aktuellen Website abrufen. Zum Abrufen der Listen von der Website verwenden Sie die SharePoint-REST-APIs, die unter „https://yourtenantprefix.sharepoint.com/_api/web/lists“ liegen.Next you need to retrieve lists from the current site. You will use SharePoint REST APIs to retrieve the lists from the site, which are located at https://yourtenantprefix.sharepoint.com/_api/web/lists.

SharePoint Framework umfasst die Hilfsklasse spHttpClient, um REST-API-Anforderungen in SharePoint auszuführen. Es fügt Standardkopfzeilen hinzu, verwaltet den für Schreibvorgänge erforderlichen Digest und sammelt Telemetrie, die dem Dienst hilft, die Leistung einer Anwendung zu überwachen.SharePoint Framework includes a helper class spHttpClient to execute REST API requests against SharePoint. It adds default headers, manages the digest needed for writes, and collects telemetry that helps the service to monitor the performance of an application.

Um diese Hilfsklasse zu verwenden, müssen Sie diese aus dem @microsoft/sp-http-Modul importieren.To use this helper class, import them from the @microsoft/sp-http module

  1. Führen Sie einen Bildlauf an den Anfang der Datei HelloWorldWebPart.ts aus.Scroll to the top of the HelloWorldWebPart.ts file.

  2. Kopieren Sie den folgenden Code, und fügen Sie ihn direkt unter import MockHttpClient from './MockHttpClient'; ein:Copy and paste the following code just under import MockHttpClient from './MockHttpClient';:

    import {
      SPHttpClient,
      SPHttpClientResponse
    } from '@microsoft/sp-http';
    
  3. Fügen Sie die folgende private Methode in der Klasse HelloWorldWebPart hinzu, um Listen von SharePoint abzurufen.Add the following private method to retrieve lists from SharePoint inside the HelloWorldWebPart class.

    private _getListData(): Promise<ISPLists> {
      return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
        .then((response: SPHttpClientResponse) => {
          return response.json();
        });
    }
    

    Die Methode verwendet die Hilfsklasse spHttpClient und gibt eine get-Anforderung aus. Sie verwendet das Modell ISPLists und implementiert einen Filter, der den Abruf versteckter Listen verhindert.The method uses the spHttpClient helper class and issues a get request. It uses the ISPLists model and also applies a filter to not retrieve hidden lists.

  4. Speichern Sie die Datei.Save the file.

  5. Wechseln Sie in das Konsolenfenster, in dem gulp serve ausgeführt wird, und schauen Sie nach, ob Fehler gemeldet wurden.Switch to the console window that is running gulp serve and check if there are any errors. gulp meldet alle Fehler in der Konsole. Sie müssen sie dann zuerst beheben, bevor Sie fortfahren können.If there are errors, gulp reports them in the console, and you need to fix them before proceeding.

Hinzufügen neuer StileAdd new styles

Das SharePoint Framework verwendet Sass als CSS-Präprozessor und arbeitet insbesondere mit der SCSS-Syntax, die vollständig konform mit der normalen CSS-Syntax ist.The SharePoint Framework uses Sass as the CSS pre-processor, and specifically uses the SCSS syntax, which is fully compliant with normal CSS syntax. Sass erweitert die CSS-Sprache und ermöglicht den Einsatz von Features wie Variablen, geschachtelten Regeln und Inline-Importen zur Organisation und Erstellung effizienter Stylesheets für Webparts.Sass extends the CSS language and allows you to use features such as variables, nested rules, and inline imports to organize and create efficient style sheets for your web parts. In das SharePoint Framework ist bereits ein SCSS-Compiler integriert, der Sass-Dateien in normale CSS-Dateien konvertiert und eine typisierte Version bereitstellt, die Sie während der Entwicklung verwenden können.The SharePoint Framework already comes with a SCSS compiler that converts your Sass files to normal CSS files, and also provides a typed version to use during development.

So fügen Sie neue Stile hinzuTo add new styles

  1. Öffnen Sie HelloWorldWebPart.module.scss.Open HelloWorldWebPart.module.scss. Dies ist die SCSS-Datei, in der Sie Ihre Stile definieren.This is the SCSS file where you define your styles.

    Standardmäßig sind die Stile auf das Webpart beschränkt.By default, the styles are scoped to your web part. Das können Sie daran erkennen, dass die Stile unter .helloWorld definiert werden.You can see that as the styles are defined under .helloWorld.

  2. Fügen Sie die folgenden Formate nach dem .button-Stil, aber immer noch innerhalb des Bereichs des .helloWorld-Hauptstils hinzu.Add the following styles after the .button style, but still inside the main .helloWorld style section:

    .list {
      color: #333333;
      font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      box-sizing: border-box;
      margin: 10;
      padding: 10;
      line-height: 50px;
      list-style-type: none;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    }
    
    .listItem {
      color: #333333;
      vertical-align: center;
      font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
      font-size: 14px;
      font-weight: normal;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      box-shadow: none;
      *zoom: 1;
      padding: 9px 28px 3px;
      position: relative;
    }
    
  3. Speichern Sie die Datei.Save the file.

    Gulp erstellt den Code in der Konsole neu, sobald Sie die Datei speichern.Gulp rebuilds the code in the console as soon as you save the file. Dadurch werden die entsprechenden Typisierungen in der Datei HelloWorldWebPart.module.scss.ts generiert.This generates the corresponding typings in the HelloWorldWebPart.module.scss.ts file. Nach der Kompilierung in TypeScript können Sie diese Stile importieren und in Ihrem Webpart-Code referenzieren.After compiled to TypeScript, you can then import and reference these styles in your web part code.

    Ein Beispiel dafür sehen Sie in der render-Methode des Webparts:You can see that in the render method of the web part:

    <div class="${styles.row}">
    

Rendern von ListeninformationenRender lists information

Öffnen Sie die Klasse HelloWorldWebPart.Open the HelloWorldWebPart class.

SharePoint Workbench bietet Ihnen die Möglichkeit, Webparts entweder in Ihrer lokalen Umgebung oder auf einer SharePoint-Website zu testen. SharePoint Framework unterstützt diese Funktion mit dem Modul EnvironmentType, das anzeigt, in welcher Umgebung das Webpart gerade ausgeführt wird.SharePoint Workbench gives you the flexibility to test web parts in your local environment and from a SharePoint site. SharePoint Framework aids this capability by helping you understand which environment your web part is running from by using the EnvironmentType module.

Verwenden Sie das EnvironmentType-ModulTo use the EnvironmentType module

  1. Importieren Sie die Module Umgebung und Umgebungstyp aus dem Paket @microsoft/sp-core-library.Import the Environment and the EnvironmentType modules from the @microsoft/sp-core-library bundle. Fügen Sie es zum Abschnitt import oben auf der Seite hinzu, wie im folgenden Code dargestellt:Add it to the import section at the top as shown in the following code:

    import {
      Environment,
      EnvironmentType
    } from '@microsoft/sp-core-library';
    
  2. Fügen Sie die folgende private Methode in der Klasse HelloWorldWebPart hinzu:Add the following private method inside the HelloWorldWebPart class:

    private _renderList(items: ISPList[]): void {
      let html: string = '';
      items.forEach((item: ISPList) => {
        html += `
      <ul class="${styles.list}">
        <li class="${styles.listItem}">
          <span class="ms-font-l">${item.Title}</span>
        </li>
      </ul>`;
      });
    
      const listContainer: Element = this.domElement.querySelector('#spListContainer');
      listContainer.innerHTML = html;
    }
    

    Diese Methode verweist auf die neuen CSS-Formate, die zuvor mithilfe der styles-Variable hinzugefügt wurden, und die verwendet werden, um Listeninformationen zu rendern, die von der REST-API empfangen werden.This method references the new CSS styles added earlier by using the styles variable and is used to render list information which will be received from REST API.

  3. Speichern Sie die Datei.Save the file.

  4. Fügen Sie die folgende private Methode in der Klasse HelloWorldWebPart hinzu, um die entsprechenden Methoden zum Abrufen der Listendaten aufzurufen:Add the following private method inside the HelloWorldWebPart class to call the respective methods to retrieve list data:

    private _renderListAsync(): void {
      // Local environment
      if (Environment.type === EnvironmentType.Local) {
        this._getMockListData().then((response) => {
          this._renderList(response.value);
        });
      }
      else if (Environment.type == EnvironmentType.SharePoint ||
                Environment.type == EnvironmentType.ClassicSharePoint) {
        this._getListData()
          .then((response) => {
            this._renderList(response.value);
          });
      }
    }
    

    Wichtige Hinweise zu „hostType“ in der Methode _renderListAsync:Things to note about hostType in the _renderListAsync method:

    • Die Eigenschaft Environment.type hilft Ihnen, zu überprüfen, ob Sie in einer lokalen Umgebung arbeiten oder in einer SharePoint-Umgebung.The Environment.type property helps you check if you are in a local or SharePoint environment.
    • Je nachdem, wo Workbench gehostet wird, wird die jeweils korrekte Methode aufgerufen.The correct method is called depending on where your Workbench is hosted.
  5. Speichern Sie die Datei.Save the file.

Abrufen von ListendatenRetrieve list data

  1. Navigieren Sie zur render-Methode, und ersetzen Sie den Code in der Methode durch den folgenden Code:Navigate to the render method, and replace the code inside the method with the following code:

    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>
              <p class="${ styles.description }">${escape(this.properties.test)}</p>
              <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
          <div id="spListContainer" />
        </div>
      </div>`;
    
    this._renderListAsync();
    
  2. Speichern Sie die Datei.Save the file.

    Im Konsolenfenster, in dem gulp serve ausgeführt wird, wird der Code neu erstellt. Vergewissern Sie sich, dass keine Fehler gemeldet wurden.Notice in the gulp serve console window that it rebuilds the code. Make sure you don't see any errors.

  3. Wechseln Sie zur lokalen Workbench, und fügen Sie das HelloWorld-Webpart hinzu.Switch to your local Workbench and add the HelloWorld web part.

    Nun sollten die simulierten Daten zurückgegeben werden.You should see the mock data returned.

    Rendern von Listendaten von „localhost“

  4. Wechseln Sie zur in SharePoint gehosteten Workbench.Switch to the Workbench hosted in SharePoint. Aktualisieren Sie die Seite, und fügen Sie das HelloWorld-Webpart hinzu.Refresh the page and add the HelloWorld web part.

    Es sollten nun Listen von der aktuellen Website zurückgegeben werden.You should see lists returned from the current site.

    Rendern von Listendaten aus SharePoint

  5. Jetzt können Sie den Server stoppen.Now you can stop the server from running. Wechseln Sie zur Konsole, und stoppen Sie gulp serve.Switch to the console and stop gulp serve. Wählen Sie Strg+c, um die Gulp-Aufgabe zu beenden.Select ctrl+c to terminate the gulp task.

Nächste SchritteNext steps

Sehr gut! Sie haben Ihren Webpart jetzt an die SharePoint-Listendaten angebunden.Congratulations on connecting your web part to SharePoint list data!

Im nächsten Artikel, Bereitstellen Ihres Webparts auf einer SharePoint-Seite, können Sie Ihren HelloWorld-Webpart weiter ausbauen.You can continue building out your Hello World web part in the next topic Deploy your web part to a SharePoint page. Dort erfahren Sie, wie Sie den HelloWorld-Webpart auf einer SharePoint-Seite bereitstellen und eine Vorschau anzeigen können.You will learn how to deploy and preview the Hello World web part in a SharePoint page.

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.