Verbinden Ihres clientseitigen Webparts mit SharePoint („Hello World“ Teil 2)

  • Artikel

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.

Sie können diese Schritte auch ausführen, indem Sie sich dieses Video auf dem YouTube-Kanal der Microsoft 365 Platform Community (PnP) ansehen:

Hinweis

In diesem Artikel bauen wir das HelloWorld-Webpart weiter aus, das Sie im vorherigen Artikel Erstellen Ihres ersten Webparts erstellt haben.

Ausführen von „gulp serve“

Stellen Sie sicher, dass der Befehl gulp serve ausgeführt wird. Sollte er noch nicht ausgeführt werden, wechseln Sie ins Projektverzeichnis helloworld-webpart, und führen Sie die folgenden Befehle aus.

cd helloworld-webpart
gulp serve

Zugreifen auf den Seitenkontext

Die gehostete Workbench in SharePoint ermöglicht den Zugriff auf den Seitenkontext, der z. B. die folgenden wichtigen Eigenschaften verfügbar macht:

  • Webtitel
  • Absolute Web-URL
  • Relative Webserver-URL
  • Anmeldename des Benutzers

So erhalten Sie Zugriff auf den Seitenkontext

Um auf Kontextinformationen in Ihrem Webpart zuzugreifen, verwenden Sie das folgende Objekt in Ihrem Code:

this.context.pageContext

  1. Suchen Sie & in Visual Studio Code nach .\src\webparts\helloWorld\HelloWorldWebPart.ts.

  2. Ersetzen Sie in der render() -Methode den innerHTML Codeblock durch Folgendes:

    this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
</section>`;

  3. Dabei wird ${ } verwendet, um den Variablenwert im HTML-Block auszugeben. Ein zusätzlicher per div codierter HTML-Abschnitt wird zur Anzeige von this.context.pageContext.web.title verwendet.

  4. Speichern Sie die Datei. Der noch in der Konsole laufende Befehl gulp serve erkennt diesen Speichervorgang und:

    • Erstellt und bündelt den aktualisierten Code automatisch.

    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.

  5. Navigieren Sie zur gehosteten Workbench Ihrer SharePoint-Website. Die vollständige URL lautet https://your-sharepoint-site-url/_layouts/workbench.aspx. Aktualisieren Sie die gehostete Workbench, um die Änderungen aus dem neu erstellten Codebundle zu übernehmen.

    Der Seitenkontext ist jetzt für das Webpart verfügbar, und der Seitentitel Ihrer SharePoint-Website sollte im Webpart zu sehen sein.

    SharePoint-Seitenkontext auf der SharePoint-Website

Definieren eines Listenmodells

Wenn Sie mit SharePoint-Listendaten arbeiten möchten, benötigen Sie ein Listenmodell. Zum Abrufen von Listen sind zwei Modelle erforderlich.

  1. Suchen Sie in Visual Studio Code src\webparts\helloWorld\HelloWorldWebPart.ts, und öffnen Sie es.

  2. Definieren Sie die folgenden Schnittstellen unmittelbar vor der HelloWorldWebPart Klassendeklaration:

    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.

Abrufen von Listen von einer SharePoint-Website

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.

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.

Um diese Hilfsklasse zu verwenden, importieren Sie sie aus dem @microsoft/sp-http Modul.

  1. Führen Sie einen Bildlauf an den Anfang der Datei HelloWorldWebPart.ts aus.

  2. Suchen Sie die Zeile import * as strings from 'HelloWorldWebPartStrings';, und fügen Sie den folgenden Code unmittelbar danach hinzu:

    import {
  SPHttpClient,
  SPHttpClientResponse
} from '@microsoft/sp-http';

  3. Fügen Sie die folgende Methode in der Klasse HelloWorldWebPart hinzu, um Listen von SharePoint abzurufen.

    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();
    })
    .catch(() => {});
}

    Die Methode verwendet die Hilfsklasse spHttpClient und gibt eine HTTP GET-Anforderung aus. Sie verwendet die Schnittstelle ISPLists und implementiert einen Filter, der den Abruf versteckter Listen verhindert.

  4. Speichern Sie die Datei.

  5. Wechseln Sie in das Konsolenfenster, in dem gulp serve ausgeführt wird, und schauen Sie nach, ob Fehler gemeldet wurden. gulp meldet alle Fehler in der Konsole. Sie müssen sie dann zuerst beheben, bevor Sie fortfahren können.

Hinzufügen neuer Stile

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. 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. Die SharePoint-Framework enthält bereits einen SCSS-Compiler, der Ihre Sass-Dateien in normale CSS-Dateien konvertiert, und stellt auch eine typisierte Version bereit, die während der Entwicklung verwendet werden kann.

So fügen Sie neue Stile hinzu

  1. Öffnen Sie HelloWorldWebPart.module.scss. Dies ist die SCSS-Datei, in der Sie Ihre Stile definieren.

    Standardmäßig sind die Stile auf das Webpart beschränkt. Das können Sie daran erkennen, dass die Stile unter .helloWorld definiert werden.

  2. Fügen Sie folgende Stile unter dem Stil .links hinzu:

    .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.

    Gulp erstellt den Code in der Konsole neu, sobald Sie die Datei speichern. Dadurch werden die entsprechenden Typisierungen in der Datei HelloWorldWebPart.module.scss.ts generiert. Nach der Kompilierung in TypeScript können Sie diese Stile importieren und in Ihrem Webpart-Code referenzieren.

    Tipp

    Diese Datei wird dynamisch generiert, wenn das Projekt erstellt wird. Sie wird in der Explorer-Ansicht von VS Code mithilfe der Datei .vscode/settings.json ausgeblendet.

    Ein Beispiel dafür sehen Sie in der render()-Methode des Webparts:

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

Rendern von Listeninformationen

Öffnen Sie die HelloWorldWebPart-Klasse.

Hinweis

SharePoint-Framework bietet Ihnen Optionen zum Erkennen von Umgebungsdetails und Hostspeicherorten mithilfe der isServedFromLocalhost Eigenschaft oder mit EnvironmentType-Details. In diesem Fall konzentrieren wir uns darauf, eine Verbindung zu den Daten auf der Site herzustellen, die die Online-Workbench hostet.

  1. Fügen Sie die folgende private Methode in der Klasse HelloWorldWebPart hinzu:

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

  if(this.domElement.querySelector('#spListContainer') != null) {
    this.domElement.querySelector('#spListContainer')!.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.

  2. Speichern Sie die Datei.

  3. Fügen Sie die folgende private Methode innerhalb der HelloWorldWebPartKlasse hinzu, um die Methode zum Abrufen von Listendaten aufzurufen:

    private _renderListAsync(): void {
  this._getListData()
    .then((response) => {
      this._renderList(response.value);
    })
    .catch(() => {});
}

  4. Speichern Sie die Datei.

Abrufen von Listendaten

  1. Navigieren Sie zur render()-Methode, und ersetzen Sie den Code in der Methode durch den folgenden Code:

    this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
  <div id="spListContainer" />
</section>`;

this._renderListAsync();

  2. Speichern Sie die Datei.

    Im Konsolenfenster, in dem gulp serve ausgeführt wird, wird der Code neu erstellt. Vergewissern Sie sich, dass keine Fehler gemeldet wurden.

  3. Wenn Sie SharePoint-Framework v1.12.1 oder früher, z. B. eine lokale SharePoint Server-Instanz, verwenden, wechseln Sie zu Ihrer lokalen Workbench, und fügen Sie das HelloWorld-Webpart hinzu.

    Sie sollten die zurückgegebenen Listendaten sehen.

    Rendern von Listendaten von „localhost“

  4. Jetzt können Sie den Server stoppen. Wechseln Sie zur Konsole, und stoppen Sie gulp serve. Wählen Sie CTRL+C aus, um die gulp-Aufgabe zu beenden.

Nächste Schritte

Sehr gut! Sie haben Ihren Webpart jetzt an die SharePoint-Listendaten angebunden.

Im nächsten Artikel Bereitstellen Ihres Webparts auf einer SharePoint-Seite können Sie ihre Hallo Welt Webparts weiter entwickeln. Dort erfahren Sie, wie Sie den Hello World-Webpart auf einer SharePoint-Seite bereitstellen und eine Vorschau anzeigen können.