Erweiterungen für Adaptive Karten und Microsoft Teams-Apps

Dieses Tutorial baut auf dem Tutorial Erweiterte Schnellansichtsfunktionen auf.

Erweiterungen für Adaptive Karten können als ergänzende Elemente eines größeren Microsoft Teams-App-Projekts verwendet werden. Ein ACE im Viva Connections Dashboard kann direkt mit einer persönlichen Registerkarte von Teams oder einem Bot verknüpft werden.

In diesem Lernprogramm verwenden Sie eine Erweiterung für Adaptive Karten in einer Microsoft Teams-App.

Gerüsterstellung für eine persönliche SPFx Microsoft Teams-App

Beginnen Sie mit der Lösung aus den vorherigen Lernprogrammen, und fügen Sie dem Projekt mithilfe des SPFx-Generators eine neue SPFx-Komponente hinzu. Führen Sie die folgende Anweisung in der Eingabeaufforderung aus dem Stammordner Ihres Projekts aus:

yo @microsoft/sharepoint

Wenn Sie dazu aufgefordert werden, übernehmen Sie die Standardoption für alle Eingabeaufforderungen durch den Generator.

An diesem Punkt installiert Yeoman die erforderlichen Abhängigkeiten und erstellt ein Gerüst für die Lösungsdateien. Das kann einige Minuten dauern.

Wichtig

Es gibt ein bekanntes Problem, bei dem die Installation aller Abhängigkeiten fehlschlägt, nachdem der Generator den npm install-Befehl ausgeführt hat.

Um dieses Problem zu umgehen, suchen und öffnen Sie die folgende Datei im Projekt: ./package.json.

Entfernen Sie die Abhängigkeit @microsoft/sp-webpart-workbench aus dem devDependencies-Abschnitt der Datei.

Führen Sie nun den folgenden Befehl in der-Konsole aus dem Stammordner des Projekts aus:

npm install

Bearbeiten des Manifests

Suchen und öffnen Sie die folgende Datei im Projekt: ./src/webparts/helloWorld/HelloWorldWebPart.manifest.json.

Aktualisieren Sie das supportedHosts-Array so, dass nur die Verwendung auf einer persönlichen Registerkarte von Microsoft Teams unterstützt wird:

"supportedHosts": ["TeamsPersonalApp"]

Packen und Bereitstellen der Lösung

Packen Sie nun die Lösung, und stellen Sie sie im App-Katalog Ihres SharePoint Online-Mandanten bereit:

Beginnen Sie, indem Sie die Lösung im Produktionsmodus erstellen:

gulp bundle --ship

Packen Sie als Nächstes die Lösung mithilfe des package-solution-Tasks:

gulp package-solution --ship

Fügen Sie die Lösungspaketdatei (*.sppkg im Ordner ./sharepoint/solution ) hinzu, und laden Sie sie in den Mandanten-App-Katalog hoch.

Standardmäßig ist das Kontrollkästchen Diese Lösung für alle Websites in der Organisation verfügbar machen nicht aktiviert:

Stellen Sie nun die Lösung im Microsoft Teams-App Store für Ihren Mandanten bereit, indem Sie auf die Schaltfläche Mit Microsoft Teams synchronisieren klicken:

Neue persönliche Registerkarte hinzufügen

Nachdem die Lösung bereitgestellt wurde, testen wir sie im Microsoft Teams-Client.

Navigieren Sie zu Microsoft Teams-Webclient, melden Sie sich an, und wählen Sie in der Navigation ganz links das ...-Symbol aus.

Wählen Sie den Link Weitere Apps aus:

Ihre neu hochgeladene persönliche Microsoft Teams-App sollte angezeigt werden. Wählen Sie sie aus, und klicken Sie dann auf Hinzufügen.

Öffnen Sie Ihre neue persönliche Registerkarte, und kopieren Sie den folgenden hervorgehobenen Teil der URL. Dies ist die ID der Microsoft Teams-App. Sie benötigen sie später in diesem Lernprogramm:

Gerüsterstellung für eine zweite Erweiterung für Adaptive Karten

Erstellen Sie eine zweite Erweiterung für adaptive Karten mithilfe des SPFx-Generators, indem Sie die folgende Anweisung in der Eingabeaufforderung aus dem Stammordner Ihres Projekts ausführen:

yo @microsoft/sharepoint

Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Werte ein (wählen Sie für alle unten nicht aufgeführten Eingabeaufforderungen die Standardoption aus):

• Welchen Typ von clientseitiger Komponente möchten Sie erstellen? Erweiterung für adaptive Karten
• Wie lautet der Name Ihrer Erweiterung für adaptive Karten? TeamsHelloWorld
• Wie lautet die Beschreibung Ihrer Erweiterung für adaptive Karten? TeamsHelloWorld-Beschreibung

Hinzufügen eines Microsoft Teams-Deep-Links

Deep-Links für Microsoft Teams weisen das folgende Format auf: https://teams.microsoft.com/l/entity/{appID}/{entityID}

1. Ersetzen Sie {appID} durch den Microsoft Teams-App-ID-Wert, den Sie im letzten Schritt kopiert haben.
2. Ersetzen Sie {entityID} durch 0.

Tipp

Weitere Informationen zu Deep-Links in Microsoft Teams-Apps finden Sie unter Microsoft Teams: Erstellen von Deep-Links.

Hinweis

Wenn Sie eine Verknüpfung mit einer Nicht-SPFx Microsoft Teams-App einrichten, ist der entityID-Wert die Entitäts-ID, die im Abschnitt "Statische Registerkarten" des Microsoft Teams-Manifests angegeben ist.

Suchen und öffnen Sie die folgende Datei im Projekt: ./src/adaptiveCardExtensions/teamsHelloWorld/cardView/CardView.ts.

Aktualisieren Sie die onCardSelection()-Methode, um einen Deep-Link zu öffnen:

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
    type: 'ExternalLink',
    parameters: {
      isTeamsDeepLink: true,
      target: '' // Set this to your Teams deep link URL
    }
  };
}

Wiederholen Sie die Schritte im Abschnitt Packen und Bereitstellen der Lösung oben, um die aktualisierte Lösung neu zu erstellen, zu packen und bereitzustellen.

Viva Connections-Dashboard

Das Viva Connections-Dashboard ist auf der Startseite des Mandanten verfügbar.

Hinzufügen von Karten zum Dashboard

Wählen Sie im Menü Neu das Element Dashboard aus, um ein neues Dashboard zu erstellen. Fügen Sie die Erweiterung für Adaptive Karten zum Dashboard hinzu, indem Sie Karte hinzufügenauswählen:

Fügen Sie Ihre HelloWorld- und TeamsHelloWorld-Erweiterungen zum Dashboard hinzu. Wenn Sie fertig sind, veröffentlichen Sie das Dashboard.

Deep-Link

Wählen Sie die TeamsHelloWorld-Erweiterung aus. Der Microsoft Teams-Desktopclient wird automatisch mit der persönlichen App geöffnet, die Sie zuvor erstellt haben.

Schlussbemerkung

Nach diesem Tutorial sollten Sie mit Folgendem vertraut sein:

• Packen und Bereitstellen heterogener SPFx-Lösungen
• Manuelles Erstellen von Deep Link-URLs für Microsoft Teams
• Deep Linking von einer Erweiterung für Adaptive Karten zu einer persönlichen Microsoft Teams-Registerkarte