Bearbeiten

SharePoint-Framework-Bibliothek für das Microsoft Graph-Toolkit

  • Artikel
  • 2 Minuten Lesedauer

Verwenden Sie die SharePoint-Framework Bibliothek für Das Microsoft Graph Toolkit, um Microsoft Graph Toolkit in SharePoint-Framework Lösungen zu verwenden.

Um zu verhindern, dass mehrere Komponenten ihren eigenen Satz von Microsoft Graph Toolkit-Komponenten auf der Seite registrieren, sollten Sie diese Bibliothek für Ihren Mandanten bereitstellen und aus dieser Bibliothek auf Microsoft Graph Toolkit-Komponenten verweisen, die Sie in Ihrer Lösung verwenden.

Achtung

Die SharePoint-Framework-Bibliothek für Microsoft Graph Toolkit ist für die Verwendung mit SharePoint-Framework Erweiterungen und nicht isolierten Webparts gedacht. Wenn Sie isolierte Webparts erstellen, verwenden Sie nicht die SharePoint-Framework-Bibliothek für Microsoft Graph Toolkit. Laden Sie stattdessen microsoft Graph Toolkit direkt aus dem Paket @microsoft/mgt (oder @microsoft/mgt-react, wenn Sie React verwenden). SharePoint-Framework das Verweisen auf Bibliothekskomponenten aus isolierten Webparts nicht unterstützt und dadurch Laufzeitfehler im isolierten Webpart verursacht.

Installation

Um Microsoft Graph Toolkit-Komponenten aus der Bibliothek zu laden, fügen Sie das @microsoft/mgt-spfx Paket als Laufzeitabhängigkeit zu Ihrem SharePoint-Framework Projekt hinzu:

npm install @microsoft/mgt-spfx

oder

yarn add @microsoft/mgt-spfx

Bevor Sie Ihr SharePoint-Framework-Paket für Ihren Mandanten bereitstellen, müssen Sie das @microsoft/mgt-spfx SharePoint-Framework-Paket auf Ihrem Mandanten bereitstellen. Sie können das Paket, das der Version @microsoft/mgt-spfx 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.

Verwendung

Verweisen Sie beim Erstellen SharePoint-Framework Webparts und Erweiterungen auf das Microsoft Graph Toolkit Provider und SharePointProvider aus dem @microsoft/mgt-spfx Paket. Dadurch wird sichergestellt, dass Ihre Lösung Microsoft Graph Toolkit-Komponenten verwendet, die bereits auf der Seite registriert sind, anstatt eigene zu instanziieren. Der Instanziierungsprozess ist für alle Webparts gleich, unabhängig davon, welches JavaScript-Framework sie verwenden.

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

// [...] trimmed for brevity

export default class MgtWebPart extends BaseClientSideWebPart<IMgtWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
  }

  // [...] trimmed for brevity
}

Wenn Sie Webparts mit einem anderen Framework als React erstellen, können Sie Komponenten direkt in Ihr Webpart laden:

export default class MgtNoFrameworkWebPart extends BaseClientSideWebPart<IMgtNoFrameworkWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
  }

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

  // [...] trimmed for brevity
}

React

Wenn Sie ein Webpart mit React erstellen, können Sie das @microsoft/mgt-react Paket verwenden. Achten Sie jedoch darauf, alle React Komponenten aus dem @microsoft/mgt-react/dist/es6/spfx Pfad zu importieren. Dadurch wird sichergestellt, dass Ihre Lösung nur Microsoft Graph Toolkit-Komponenten verwendet, die bereits auf der Seite registriert sind, anstatt eigene zu instanziieren.

import { Person } from '@microsoft/mgt-react/dist/es6/spfx';
import { ViewType } from '@microsoft/mgt-spfx';

// [...] trimmed for brevity

export default class MgtReact extends React.Component<IMgtReactProps, {}> {
  public render(): React.ReactElement<IMgtReactProps> {
    return (
      <div className={ styles.mgtReact }>
        <Person personQuery="me" view={ViewType.image}></Person>
      </div>
    );
  }
}

Wichtig

Stellen Sie sicher, dass alle Microsoft Graph Toolkit-Importe in Ihrer Lösung aus folgenden Komponenten stammen:

  • @microsoft/mgt-spfx Oder
  • @microsoft/mgt-react/dist/es6/spfx

Importieren Sie nicht aus anderen Microsoft Graph Toolkit-Paketen (@microsoft/mgt-*), um zu vermeiden, dass Sie Ihre eigene Kopie des Toolkits verpacken und mit der freigegebenen Bibliothek kollidieren.

Weitere Informationen