Erstellen eines SharePoint-Webparts mit dem Microsoft Graph-Toolkit

  • Artikel

In diesem Artikel wird beschrieben, wie Sie Komponenten des Microsoft Graph-Toolkits in einem clientseitigen SharePoint-Webpart verwenden. Um damit zu beginnen, sind die folgenden Schritte erforderlich:

  1. Richten Sie Ihre Entwicklungsumgebung ein.
  2. Erstellen Sie Ihr Webpartprojekt.
  3. Fügen Sie die Microsoft Graph-Toolkit-Pakete hinzu.
  4. Fügen Sie den SharePoint-Anbieter hinzu.
  5. Fügen Sie Komponenten hinzu.
  6. Konfigurieren Sie Berechtigungen.
  7. Konfigurieren von Webpack
  8. Erstellen Sie Ihr Webpart und stellen Sie es bereit.
  9. Testen Sie Ihr Webpart.

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

Führen Sie die Schritte zum Einrichten Ihrer SharePoint-Framework Entwicklungsumgebung aus.

Erstellen Eines Webpartprojekts

Befolgen Sie die Anweisungen zum Erstellen eines neuen Webparts. Wenn Sie gefragt werden, welche Vorlage Sie verwenden möchten, wählen Sie React aus.

Wichtig

Sie müssen React auswählen, wenn Sie Ihr Framework auswählen, wenn Sie verwendenyo @microsoft/sharepoint.

Hinzufügen der Microsoft Graph-Toolkitpakete

Das Microsoft Graph-Toolkit veröffentlicht mehrere Pakete, die zum Erstellen eines SharePoint-Framework Webparts erforderlich sind. Durch die Installation der @microsoft/mgt-elementPakete , @microsoft/mgt-react, @microsoft/mgt-sharepoint-providerund @microsoft/mgt-spfx-utils werden die erforderlichen Abhängigkeiten installiert.

npm install @microsoft/mgt-element @microsoft/mgt-react @microsoft/mgt-sharepoint-provider @microsoft/mgt-spfx-utils

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 sind immer in einem authentifizierten Kontext vorhanden, da der Benutzer authentifiziert wird, um zu der 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 } from '@microsoft/mgt-element';
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

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

Mehrdeutigkeit einrichten

Um sicherzustellen, dass Ihr Webpart funktioniert, wenn mehrere Webpartlösungen mit dem Microsoft Graph-Toolkit auf einer einzelnen Seite vorhanden sind, müssen Sie die Mehrdeutigkeitstrennung verwenden. Weitere Informationen finden Sie unter Mehrdeutigkeit.

Aktualisieren Sie zuerst Ihre Importe von , @microsoft/mgt-element und fügen Sie eins für das lazyLoadComponent Hilfsprogramm hinzu.

import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";

Aktualisieren Sie als Nächstes die onInit() -Methode des Stammwebparts, um Mehrdeutigkeitstrennung einzurichten. Die für die Mehrdeutigkeit verwendete Zeichenfolge muss für Ihre SharePoint-Framework Lösung eindeutig sein:

protected async onInit(): Promise<void> {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
  customElementHelper.withDisambiguation('contoso-hr-solution');
  return super.onInit();
}

Aktualisieren des Imports und Renderns der React-Komponente

Konvertieren Sie zunächst den Import der Komponente, um zu verwenden React.lazy. Suchen Sie die -Anweisung import <WebPartName> from './components/<WebPartName>; , und aktualisieren Sie sie wie folgt:

const MgtComponent = React.lazy(
  () =>
    import(/* webpackChunkName: 'mgt-react-component' */ "./components/<WebPartName>")
);

Ändern Sie als Nächstes die render-Methode, um das lazyLoadComponent Hilfsprogramm zu verwenden:

  public render(): void {
    const element = lazyLoadComponent<IHelloWorldProps>(MgtComponent, {
      description: this.properties.description,
      isDarkTheme: this._isDarkTheme,
      environmentMessage: this._environmentMessage,
      hasTeamsContext: !!this.context.sdks.microsoftTeams,
      userDisplayName: this.context.pageContext.user.displayName
    });

    ReactDom.render(element, this.domElement);
  }

Ihr Webpart sollte nun wie folgt aussehen:

import * as React from "react";
import * as ReactDom from "react-dom";
import { Version } from "@microsoft/sp-core-library";
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField,
} from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IReadonlyTheme } from "@microsoft/sp-component-base";
import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";

import * as strings from "HelloWorldWebPartStrings";
const HelloWorld = React.lazy(
  () =>
    import(
      /* webpackChunkName: 'mgt-react-component' */ "./components/HelloWorld"
    )
);
import { IHelloWorldProps } from "./components/IHelloWorldProps";

export interface IHelloWorldWebPartProps {
  description: string;
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = "";

  public render(): void {
    const element = lazyLoadComponent<IHelloWorldProps>(HelloWorld, {
      description: this.properties.description,
      isDarkTheme: this._isDarkTheme,
      environmentMessage: this._environmentMessage,
      hasTeamsContext: !!this.context.sdks.microsoftTeams,
      userDisplayName: this.context.pageContext.user.displayName,
    });

    ReactDom.render(element, this.domElement);
  }

  protected async onInit(): Promise<void> {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    customElementHelper.withDisambiguation("contoso-hr-solution");
    return super.onInit();
  }
  // [...] trimmed for brevity
}

Komponenten hinzufügen

Fügen Sie die Komponenten der React-Komponente hinzu. Suchen und öffnen Sie die src\webparts\<your-project>\components\<your-component>.tsx Datei, fügen Sie den Import für die Komponente hinzu, die Sie verwenden möchten ( in diesem Fall die Person -Komponente), und aktualisieren Sie dann die render() -Methode, um die Person-Komponente zu verwenden. Ihre Komponente sollte nun wie folgt aussehen:

import * as React from 'react';
import type { IHelloWorldProps } from './IHelloWorldProps';
import { Person } from '@microsoft/mgt-react';

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {
    return (<Person personQuery="me" view="twolines" />);
  }
}

Oder wenn Sie React Funktionale Komponenten verwenden möchten:

import * as React from 'react';
import type { IHelloWorldProps } from './IHelloWorldProps';
import { Person, ViewType } from '@microsoft/mgt-react';

const HelloWorld = (props: IHelloWorldProps): React.ReactElement => <Person personQuery="me" view={ViewType.twolines} />;

export default HelloWorld;

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 unterhalb dieser Zeile die folgende Zeile hinzu:

"webApiPermissionRequests":[],

Bestimmen Sie, welche Microsoft Graph-API Berechtigungen Sie benötigen, um von den von Ihnen verwendeten Komponenten abhängig zu sein. Die Dokumentationsseite jeder Komponente stellt eine Liste der Berechtigungen bereit, welche diese Komponente benötigt. Sie müssen jede erforderliche Berechtigung zu webApiPermissionRequestshinzufü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"
  }
]

Konfigurieren von Webpack

Um Ihr Webpart zu erstellen, muss die SharePoint-Framework Webpack-Konfiguration aktualisiert werden, um modernes JavaScript mit optionaler Verkettung und nullisher Zusammenführung durch zusätzliche Babel-Transformationen ordnungsgemäß zu verarbeiten.

Installieren von Babel-Paketen

Um Abhängigkeiten, die ES2021-basierten Code ausgeben, ordnungsgemäß zu behandeln, müssen ein Babel-Ladeprogramm und einige Transformationen als Entwicklungsabhängigkeiten zum Projekt hinzugefügt werden.

npm i --save-dev babel-loader@8.3.0 @babel/plugin-transform-optional-chaining @babel/plugin-transform-nullish-coalescing-operator @babel/plugin-transform-logical-assignment-operators

Ändern der Webpack-Konfiguration

SharePoint-Framework bietet ein Erweiterbarkeitsmodell zum Ändern der Webpack-Konfiguration, die zum Bündeln der Webparts verwendet wird. Suchen und öffnen gulpfile.jsSie . Fügen Sie den folgenden Code oberhalb der Zeile hinzu, die build.initialize(require('gulp'));

const path = require("path");
const litFolders = [
  `node_modules${path.sep}lit${path.sep}`,
  `node_modules${path.sep}@lit${path.sep}`,
  `node_modules${path.sep}lit-html${path.sep}`
];
build.configureWebpack.mergeConfig({
  additionalConfiguration: generatedConfiguration => {
    generatedConfiguration.module.rules.push({
      test: /\.js$/,
      // only run on lit packages
      include: resourcePath => 
        litFolders.some(litFolder => resourcePath.includes(litFolder)),
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
            '@babel/plugin-transform-logical-assignment-operators'
          ]
        }
      }
    });
    return generatedConfiguration;
  }
});

Dadurch wird sichergestellt, dass der Code aus der lit Bibliothek von der SharePoint-Framework Buildkette ordnungsgemäß verarbeitet wird.

Erstellen und Bereitstellen Ihres Webparts

Jetzt erstellen Sie Ihre Anwendung und stellen sie in SharePoint bereit. Erstellen Sie Ihre Anwendung, indem Sie die folgenden Befehle ausführen:

gulp build
gulp bundle
gulp package-solution

Im sharepoint/solution Ordner befindet sich eine neue .sppkg Datei. 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 unter Appsdie Option Öffnen und dann App-Katalog und Apps für SharePoint verteilen aus. Laden Sie Ihre .sppkg Datei hoch, und wählen Sie Bereitstellen aus.

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

Jetzt können Sie Ihr Webpart einer SharePoint-Seite hinzufügen und 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