Erstellen Sie Microsoft Teams-Registerkarten mit SharePoint-Framework – Lernprogramm

  • Artikel

Ab der Version SharePoint Frameworks 1.8 können Sie Microsoft Teams-Registerkarten mithilfe von SharePoint-Framework implementieren. Die Verwendung von SharePoint vereinfacht den Entwicklungsprozess von Teams-Registerkarten erheblich, da diese automatisch in SharePoint gehostet werden können, ohne dass externe Dienste benötigt werden.

Bevor Sie beginnen, führen Sie die Schritte in den folgenden Artikeln aus, um sicherzustellen, dass Sie den grundlegenden Fluss des Erstellens eines benutzerdefinierten, clientseitigen Webparts verstehen:

Wichtig

Dieses Lernprogramm setzt die Verwendung von SharePoint-Framework v1.10 oder höher voraus, da einige Funktionen und Framework-Eigenschaften in früheren Versionen nicht verfügbar sind.

Sie können die Schritte auch anhand dieses Videos in unserem YouTube-Kanal „Microsoft 365 Platform Communtiy Patterns & Practices (PnP)“ nachvollziehen:

Erstellen eines Projekts für Microsoft Teams-Registerkarten

  1. Erstellen Sie an einem Speicherort Ihrer Wahl ein neues Projektverzeichnis:

    md teams-tab

  2. Wechseln Sie in das Projektverzeichnis:

    cd teams-tab

  3. Erstellen Sie ein neues Projekt, indem Sie den Yeoman SharePoint-Generator aus dem neuen Verzeichnis heraus, das Sie erstellt haben, ausführen:

    yo @microsoft/sharepoint

    Der Yeoman SharePoint-Generator zeigt eine Reihe von Fragen an. Akzeptieren Sie bei allen Fragen die Standardoptionen mit Ausnahme der folgenden Fragen:

    • Möchten Sie dem Mandantenadministrator erlauben, festzulegen, ob die Lösung unmittelbar für alle Websites bereitgestellt wird, ohne die Bereitstellung von Features oder das Hinzufügen von Apps zu Websites? Ja
    • Welcher Typ von clientseitiger Komponente soll erstellt werden? : WebPart
    • Wie lautet der Name Ihres Webparts? MyFirstTeamsTab
    • Wie lautet die Beschreibung Ihres Webparts? Meine erste Teams-Registerkarte

    An diesem Punkt installiert Yeoman die erforderlichen Abhängigkeiten und erstellt ein Gerüst für die Lösungsdateien. Die Erstellung der Lösung kann einige Minuten dauern. Yeoman erstellt ein Gerüst für das Projekt, um auch das MyFirstTeamsTab-Webpart einzuschließen.

  4. Geben Sie als Nächstes Folgendes ein, um das Webpart-Projekt in Visual Studio Code zu öffnen:

    code .

SharePoint-Framework v 1.8 und spätere Projekte umfassen den Ordner ./teams in der Lösungsstruktur:

Lösungsstruktur

Der Teams-Ordner enthält die beiden folgenden Dateien:

  • [componentId]_color.png: Standardmäßiges kleines Bild für eine Registerkarte
  • [componentId]_outline.png: Standardmäßiges großes Bild für eine Registerkarte

Diese Bilder werden als Symbole in Microsoft Teams verwendet. Sie können sie durch benutzerdefinierte Bilder ersetzen. Sie müssen aber den gleichen Namen verwenden, um sicherzustellen, dass Sie ordnungsgemäß in die bereitgestellte Lösung einbezogen werden.

Aktualisieren Sie das Webpart-Manifest, um es für Microsoft Teams verfügbar zu machen

Suchen Sie die Datei ./src/webparts/**/manifest.json für das Webpart, das Sie Teams zur Verfügung stellen möchten, und ändern Sie die supportedHosts Eigenschaften "TeamsTab" wie im folgenden Beispiel.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",

  //...

  "supportedHosts": ["SharePointWebPart", "TeamsTab"],

  //...

}

Hinweis

Seit dem SharePoint-Framework v1.10 können Sie SharePoint-Framework-Webparts als persönliche Microsoft Teams-Apps bereitstellen. Dies kann durch die Einbindung von "TeamsPersonalApp" in den supportedHosts-Wert gesteuert werden.

Persönliche Registerkarten verfügen nicht über eine Konfigurationsoption, weshalb bei Webparts, die zu Microsoft Teams als persönliche Apps hinzugefügt wurden, der Webpart-Eigenschaftenbereich nicht angezeigt wird. Wenn das Webpart in dieser Situation konfiguriert werden soll, müssen Sie es innerhalb der Webparts-Benutzeroberfläche implementieren.

Aktualisieren Sie den Code, um den Microsoft Teams-Kontext zu berücksichtigen

  1. Öffnen Sie ./src/webparts/helloWorld/MyFirstTeamsTabWebPart.ts, für die erforderlichen Änderungen, damit unsere Lösung den Microsoft Teams-Kontext beachtet, wenn sie als Registerkarte verwendet wird.

  2. Aktualisieren Sie die Methode render() wie folgt.

    Beachten Sie, wie unterschiedliche Inhalte wiedergegeben werden, abhängig davon, ob der Code als Registerkarte in Microsoft Teams oder als Webpart in SharePoint wiedergegeben wird. Wir können ermitteln, ob die Lösung von Microsoft Teams gehostet wird, indem wir die this.context.sdks.microsoftTeams-Eigenschaft überprüfen.

    public render(): void {

  let title: string = '';
  let subTitle: string = '';
  let siteTabTitle: string = '';

  if (this.context.sdks.microsoftTeams) {
    // We have teams context for the web part
    title = "Welcome to Teams!";
    subTitle = "Building custom enterprise tabs for your business.";
    siteTabTitle = "We are in the context of following Team: " + this.context.sdks.microsoftTeams.context.teamName;
  }
  else
  {
    // We are rendered in normal SharePoint context
    title = "Welcome to SharePoint!";
    subTitle = "Customize SharePoint experiences using Web Parts.";
    siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;
  }

  this.domElement.innerHTML = `
    <div class="${ styles.myFirstTeamsTab }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <span class="${ styles.title }">${title}</span>
            <p class="${ styles.subTitle }">${subTitle}</p>
            <p class="${ styles.description }">${siteTabTitle}</p>
            <p class="${ styles.description }">Description property value - ${escape(this.properties.description)}</p>
            <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
            </a>
          </div>
        </div>
      </div>
    </div>`;
}

    Hinweis

    Eine vollständige Beschreibung der im Microsoft Teams-Kontext erhältlichen Informationen zu Microsoft Teams-Registerkarten finden Sie in der Microsoft Teams-Entwicklerdokumentation.

Verpacken Sie Ihr Webpart und stellen Sie es in SharePoint bereit

Stellen Sie sicher, dass Ihre Konsole im Stammordner der Lösung, in der sie erstellt wurde, aktiviert ist.

  1. Führen Sie die nachfolgenden Befehle aus, um Ihre Lösung in einem Bundle zu verpacken. Dadurch wird ein Versionsbuild des Projekts ausgeführt, indem eine dynamische Bezeichnung als Host-URL für Ihre Objekte verwendet wird.

    gulp bundle --ship

  2. Führen Sie die folgende Aufgaben aus, um Ihre Lösung zu packen. Es wird ein aktualisiertes teams-tab-webpart.sppkg-Paket im Ordner sharepoint/solution erstellt.

    gulp package-solution --ship

  3. Als Nächstes müssen Sie das generierte Paket im App-Katalog des Mandanten bereitstellen.

    Gehen Sie zum Microsoft Office SharePoint Online-App-Katalog Ihres Mandanten.

  4. Laden Sie teams-tab-webpart.sppkg in den App-Katalog hoch, oder legen Sie es mit Drag & Drop dort ab.

    Hochladen der Lösung in den App-Katalog

    Dadurch wird das clientseitige Lösungspaket bereitgestellt. Da es sich um eine vollständig vertrauenswürdige clientseitige Lösung handelt, zeigt SharePoint ein Dialogfeld an und fordert Sie auf, der bereitzustellenden clientseitigen Lösung zu vertrauen.

    Beachten Sie, dass die Domänenliste in der Aufforderung SharePoint Online enthält. Dies ist der Fall, da der Inhalt, je nach Mandanteneinstellungen, entweder von dem Microsoft 365 CDN oder dem App-Katalog bereitgestellt wird.

    Stellen Sie sicher, dass die Option Diese Lösung an allen Standorten der Organisation verfügbar machen ausgewählt ist, damit das Webpart von Microsoft Teams aus verwendet werden kann.

    Vertrauen der Bereitstellung der clientseitigen Lösung

  5. Wählen Sie Bereitstellen.

    Beachten Sie, dass Sie in der Spalte App-Paket-Fehlermeldung im App-Katalog überprüfen können, ob im Paket Ausnahmen oder Probleme enthalten sind.

An diesem Punkt wird das Webpart bereitgestellt und ist automatisch auf den SharePoint Online-Seiten verfügbar.

Hinweis

In diesem Lehrvideo verwenden wir die mandantenweite Bereitstellungsoption der SharePoint-Framework-Lösung. Dadurch wird sichergestellt, dass die Entwicklung und die Verwendung der Oberfläche so einfach wie möglich sind.

Sie könnten die Lösung auch als Webseitenbereich bereitstellen, in diesem Fall müssten Sie jedoch sicherstellen, dass die Lösung auf der SharePoint-Seite hinter Microsoft Teams bereitgestellt wird, bevor Sie sie verwenden können.

Stellen Sie das Webpart in Microsoft Teams bereit

Damit Ihr Webpart in Microsoft Teams verfügbar wird, muss Ihre Lösung mit Teams synchronisiert werden.

Hinweis

In diesem Lernprogramm verwenden wir für die Lösung die Option für die automatische Bereitstellung aus dem SharePoint-App-Katalog. Weitere Informationen finden Sie unter: Bereitstellungsoptionen für SharePoint-Framework-Lösungen für Microsoft Teams.

  1. Wählen Sie im App-Katalog des SharePoint-Mandanten das Paket teams-tab-client-side-solution aus, und wählen Sie dann im Menüband in der Registerkarte Dateien die Schaltfläche Mit Teams synchronisieren aus.

    Schaltfläche

  2. Vergewissern Sie sich, dass die Statusmeldung in der oberen rechten Ecke angezeigt wird.

    Mit Teams-Statusmeldung synchronisieren

    Wichtig

    Sollte die Synchronisierung fehlschlagen, stellen Sie sicher, dass Sie etwaige vorherige Versionen aus dem Microsoft Team App-Katalog gelöscht haben. Dies ist der häufigste Grund, warum die Synchronisierung fehlschlägt, da die vorhandene Lösung nicht überschrieben wird.

  3. Wechseln Sie zu Microsoft Teams, und überprüfen Sie den Status des App-Katalogs, indem Sie im linken Navigationsbereich Apps auswählen.

    Apps-Menü im linken Bereich von Teams

  4. Warten Sie, bis die Auswahl der mandantenspezifischen Apps angezeigt wird:

    Wählen Sie den Mandanten-/Organisationsnamens

    Hinweis

    Dies kann aufgrund der Zwischenspeicherung einige Minuten dauern.

  5. Vergewissern Sie sich, dass die MyFirstTeamsTab-App im Katalog angezeigt wird:

    Benutzerdefinierte SPFx Microsoft Teams-App wird als Option angezeigt

    Hinweis

    Dies kann aufgrund der Zwischenspeicherung einige Minuten dauern.

  6. Wechseln Sie zu einem Kanal in einem Team, in dem Sie die Lösung testen möchten. Im folgenden Bild ist der Kanal Allgemein in Team aktiviert:

    Auswählen des Kanals „Allgemein“ im Microsoft Teams-Team

  7. Wählen Sie + zum Hinzufügen einer neuen Registerkarte auf dem Kanal.

  8. Wählen Sie in der Liste Ihre benutzerdefinierte Registerkarte namens MyFirstTeamTab aus. Bei Bedarf können Sie die Suchfunktion verwenden, um Ihre benutzerdefinierte Registerkarte zu finden:

    Suche nach der benutzerdefinierten Registerkarte

  9. Wählen Sie Hinzufügen aus, um die Auswahl der gewünschten Registerkarte zu bestätigen.

  10. Wählen Sie Speichern aus, um zu bestätigen, dass die Registerkarte auf dem Kanal installiert werden soll:

    Registerkarte hinzufügen

Ihre benutzerdefinierte Registerkarte wurde dem Microsoft Teams-Kanal hinzugefügt und Sie können anhand der Reaktion des Codes erkennen, dass sie in Microsoft Teams-Kontext steht. Das Design des Webparts stammt standardmäßig von der zugrundeliegenden SharePoint-Seite.

Benutzerdefinierte Registerkarte hinzugefügt

Hinweis

Sie können die anfängliche Sichtbarkeit der Konfigurationsoption über das Webpart-Manifest steuern, indem Sie die canUpdateConfiguration-Eigenschaft auf false festlegen. Diese Einstellung lautet standardmäßig true, die berücksichtigt wird, wenn das Microsoft Teams-Manifest automatisch als Teil des Synchronisierungsprozesses erstellt wird.

Aktualisieren Sie Ihr App-Paket

Wenn Sie Änderungen an Ihrer App vornehmen und ein neues Paket erstellen, tritt möglicherweise ein Fehler auf, wenn Sie Mit Teams synchronisieren auswählen.

Möglicherweise wird oben rechts auf der Seite die Benachrichtigung Lösung konnte nicht mit Teams synchronisiert werden angezeigt.

Wenn dies der Fall ist, führen Sie die folgenden Schritte aus, um Ihre App aus Microsoft Teams zu löschen und dann erneut damit zu synchronisieren:

  1. Öffnen Sie Microsoft Teams.
  2. Wenn Sie den Team-Kanal sehen, klicken Sie zum Hinzufügen einer Registerkarte auf +.
  3. Wählen Sie am oberen Rand auf Link Weitere Apps aus.
  4. Suchen Sie Ihre App in der Liste, und klicken Sie auf das ...-Menü.
  5. Wählen Sie Löschen aus, um die App aus Microsoft Teams zu entfernen.

Sie können nun Ihre neue Version mit Microsoft Teams synchronisieren.

Weitere Informationen