Freigeben über

Erstellen eines SharePoint-Webparts mit dem Microsoft Graph-Toolkit

Dieses Thema behandelt die Verwendung der Microsoft Graph-Toolkit-Komponenten in einem clientseitigen SharePoint-Webpart. Um damit zu beginnen, sind die folgenden Schritte erforderlich:

  1. Richten Sie Ihre Entwicklungsumgebung ein und erstellen Sie ein Webpart.
  2. Fügen Sie das SharePoint-Framework-Paket des Microsoft Graph-Toolkit hinzu.
  3. Fügen Sie den SharePoint-Anbieter hinzu.
  4. Fügen Sie Komponenten hinzu.
  5. Konfigurieren Sie Berechtigungen.
  6. Stellen Sie das SharePoint-Framework-Paket von Microsoft Graph-Toolkit bereit.
  7. Erstellen Sie Ihr Webpart und stellen Sie es bereit.
  8. Testen Sie Ihr Webpart.

Einrichten Ihrer SharePoint-Framework-Entwicklungsumgebung und Erstellen eines neuen Webparts

Folgend Sie den Schritten zum Einrichten Ihrer SharePoint-Framework-Entwicklungsumgebung, und dann Erstellen Sie ein neues Webpart.

Hinzufügen des SharePoint-Framework-Pakets von Microsoft Graph-Toolkit

Um zu verhindern, dass mehrere SharePoint-Framework-Komponenten ihren eigenen Satz von Microsoft Graph-Toolkit-Komponenten auf der Seite registrieren, sollten Sie das SharePoint-Framework-Paket von Microsoft Graph-Toolkit auf Ihrem Mandanten bereitstellen und die Microsoft Graph-Toolkit-Komponenten, die Sie in Ihrer Lösung verwenden, aus diesem Paket referenzieren.

Das SharePoint-Framework-Paket von Microsoft Graph-Toolkit enthält eine SharePoint-Framework-Bibliothek, die eine einzelne Instanz der Microsoft Graph-Toolkit-Komponenten in SharePoint registriert.

Installieren Sie das npm-Paket des SharePoint-Framework von Microsoft Graph-Toolkit mittels dem folgenden Befehl:

npm install @microsoft/mgt-spfx

Hinzufügen des SharePoint-Anbieters

Die Microsoft Graph-Toolkit-Anbieter ermöglichen die Authentifizierung und den Zugriff auf Microsoft Graph für die Komponenten. Weitere Informationen finden Sie unter Verwendung der Anbieter. SharePoint-Webparts existieren immer in einem authentifizierten Kontext, da sich der Benutzer bereits anmelden musste, um auf die Seite zu gelangen, die Ihr Webpart hostet. Verwenden Sie diesen Kontext, um den SharePoint-Anbieter zu initialisieren.

Fügen Sie zuerst den Anbieter zu Ihrem Webpart hinzu. Suchen Sie die src\webparts\<your-project>\<your-web-part>.ts-Datei in Ihrem Projektordner, und fügen Sie die folgende Zeile zuoberst in Ihrer Datei ein, direkt unter den vorhandenen import-Anweisungen:

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

Initialisieren Sie als nächstes den Anbieter mit dem authentifizierten Kontext innerhalb der onInit()-Methode Ihres Webparts. Fügen Sie in der gleichen Datei den folgenden Code direkt vor der public render(): void {-Zeile hinzu:

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
}

Komponenten hinzufügen

Jetzt können Sie beginnen, Komponenten zu Ihrem Webpart hinzuzufügen. Fügen Sie einfach die Komponenten zum HTML innerhalb der render()-Methode hinzu, und die Komponenten werden den SharePoint-Kontext verwenden, um auf Microsoft Graph zuzugreifen. Um beispielsweise die Personenkomponente hinzuzufügen, wird Ihr Code wie folgt aussehen:

public render(): void {
  this.domElement.innerHTML = `
    <mgt-person person-query="me" view="twolines"></mgt-person>
  `;
}

Hinweis

Wenn Sie ein Webpart mit React erstellen, lesen Sie die @microsoft/mgt-spfx-Dokumentationen, um zu erfahren, wie Sie @microsoft/mgt-react verwenden.

Konfigurieren von Berechtigungen

Um Microsoft Graph aus Ihrer SharePoint-Framework-Anwendung aufzurufen, müssen Sie die benötigten Berechtigungen in Ihrem Lösungspaket anfordern, und ein Microsoft 365-Mandantenadministrator muss die angeforderten Berechtigungen genehmigen.

Um Ihrem Lösungspaket die Berechtigungen hinzuzufügen, suchen und öffnen Sie die config\package-solution.json-Datei und legen Sie fest:

"isDomainIsolated": false,

Fügen Sie direkt unter dieser Zeile Folgendes hinzu:

"webApiPermissionRequests":[],

Stellen Sie fest, welche Microsoft Graph API-Berechtigungen Sie je nach den von Ihnen verwendeten Komponenten benötigen. Die Dokumentationsseite jeder Komponente stellt eine Liste der Berechtigungen bereit, welche diese Komponente benötigt. Sie müssen jede benötigte Berechtigung zu webApiPermissionRequests hinzufügen. Wenn Sie beispielsweise die Personenkomponente und die Agendakomponente verwenden, könnte Ihr webApiPermissionRequests wie folgt aussehen:

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.Read"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.Read"
  }
]

Bereitstellen des SharePoint-Framework-Pakets von Microsoft Graph-Toolkit

Bevor Sie Ihr SharePoint-Framework-Paket für Ihren Mandanten bereitstellen, müssen Sie das SharePoint-Framework-Paket von Microsoft Graph-Toolkit für Ihren Mandanten bereitstellen. Sie können das Paket, das der Version des Microsoft Graph-Toolkit entspricht, die Sie in Ihrem Projekt verwendet haben, aus dem Abschnitt Releases auf GitHub herunterladen.

Wichtig

Da nur eine Version der SharePoint-Framework-Bibliothek für das Microsoft Graph-Toolkit im Mandanten installiert werden kann, sollten Sie vor der Verwendung des Microsoft Graph-Toolkits in Ihrer Lösung feststellen, ob in Ihrer Organisation oder bei Ihrem Kunden bereits eine Version der SharePoint-Framework-Bibliothek installiert ist, und dieselbe Version verwenden.

Nach dem Herunterladen des .sppkg-Pakets des SharePoint-Framework von Microsoft Graph-Toolkit laden Sie es in Ihren SharePoint Online-App-Katalog hoch. Wechseln Sie zur Seite „Weitere Features“ in Ihrem SharePoint Admin Center. Wählen Sie Öffnen unter Apps, klicken Sie dann auf App-Katalog und Apps für SharePoint verteilen. Laden Sie Ihre .sppkg-Datei hoch, und klicken Sie auf Bereitstellen.

Erstellen und Bereitstellen Ihres Webparts

Jetzt werden Sie Ihre Anwendung erstellen und für SharePoint bereitstellen. Erstellen Sie Ihre Anwendung, indem Sie die folgenden Befehle ausführen:

gulp bundle
gulp package-solution

Im sharepoint/solution-Ordner wird sich eine neue .sppkg-Datei befinden. Sie müssen diese Datei in Ihren SharePoint Online-App-Katalog hochladen. Wechseln Sie zur Seite „Weitere Features“ in Ihrem SharePoint Admin Center. Wählen Sie Öffnen unter Apps, klicken Sie dann auf App-Katalog und Apps für SharePoint verteilen. Laden Sie Ihre .sppkg-Datei hoch, und klicken Sie auf Bereitstellen.

Als nächstes müssen Sie die Berechtigungen als ein Administrator genehmigen.

Wechseln Sie zu Ihrem SharePoint Admin Center. Wählen Sie in der linken Nagivation die Option Erweitert und dann API-Zugriff aus. Sie sollten ausstehende Anforderungen für jede der Berechtigungen sehen, die Sie in Ihrer config\package-solution.json-Datei hinzugefügt haben. Markieren und genehmigen Sie jede Berechtigung.

Testen Ihres Webparts

Sie sind nun bereit, Ihr Webpart zu einer SharePoint-Seite hinzuzufügen und es zu testen. Sie müssen die gehostete Workbench verwenden, um Webparts zu testen, die das Microsoft Graph-Toolkit verwenden, da die Komponenten den authentifizierten Kontext benötigen, um Microsoft Graph aufzurufen. Ihre gehostete Workbench finden Sie unter https://< YOUR_TENANT.sharepoint.com/_layouts/15/workbench.aspx>.

Öffnen Sie die config\serve.json Datei in Ihrem Projekt, und ersetzen Sie den Wert von initialPage durch die URL für Ihre gehostete Workbench:

"initialPage": "https://<YOUR_TENANT>.sharepoint.com/_layouts/15/workbench.aspx",

Speichern Sie die Datei, und führen Sie dann den folgenden Befehl in der Konsole aus, um Ihr Webpart zu erstellen und eine Vorschau anzuzeigen:

gulp serve

Ihre gehostete Workbench wird automatisch in Ihrem Browser geöffnet. Fügen Sie Ihr Webpart der Seite hinzu, und Sie sollten Ihr Webpart mit den Microsoft Graph-Toolkit-Komponenten in Aktion sehen! Solange der Befehl „gulp serve“ noch in Ihrer Konsole ausgeführt wird, können Sie weiterhin Anpassungen an Ihrem Code vornehmen, und dann einfach Ihren Browser aktualisieren, um Ihre Änderungen zu sehen.

Nächste Schritte