Teilen über

Erstellen einer persönlichen Registerkarte

  • Artikel

Persönliche Registerkarten sind zusammen mit persönlichen Bots Teil von persönlichen Apps und sind auf einen einzelnen Benutzer ausgerichtet. Sie können an den linken Bereich angeheftet werden, um den Zugriff zu erleichtern.

Wichtig

Stellen Sie sicher, dass Sie über alle Voraussetzungen verfügen, um Ihre persönliche Registerkarte zu erstellen.

Hinweis

Dieses Thema enthält Version 2.0.x der Microsoft Teams JavaScript-Clientbibliothek (TeamsJS). Wenn Sie eine frühere Version verwenden, finden Sie in der Übersicht über die TeamsJS-Bibliothek Anleitungen zu den Unterschieden zwischen den neuesten Versionen von TeamsJS und früheren Versionen.

Erstellen einer persönlichen Registerkarte mit Node.js

  1. Installieren Sie an der Eingabeaufforderung die Pakete Yeoman und gulp-cli, indem Sie nach der Installation von Node.js den folgenden Befehl eingeben:

    npm install yo gulp-cli --global

  2. Installieren Sie an der Eingabeaufforderung den Microsoft Teams-App-Generator, indem Sie den folgenden Befehl eingeben:

    npm install generator-teams --global

Im Folgenden finden Sie die Schritte zum Erstellen einer persönlichen Registerkarte:

  1. Generieren Ihrer Anwendung mit einer persönlichen Registerkarte
  2. Hinzufügen einer Inhaltsseite zur persönlichen Registerkarte
  3. Erstellen Ihres App-Pakets
  4. Erstellen und Ausführen Ihre Anwendung
  5. Einrichten eines sicheren Tunnels zu Ihrer persönlichen Registerkarte
  6. Hochladen Ihrer Anwendung in Teams

Generieren Ihrer Anwendung mit einer persönlichen Registerkarte

  1. Erstellen Sie an der Eingabeaufforderung ein neues Verzeichnis für Ihre persönliche Registerkarte.

  2. Geben Sie den folgenden Befehl in Ihr neues Verzeichnis ein, um den Microsoft Teams-App-Generator zu starten:

    yo teams

  3. Stellen Sie Ihre Werte für eine Reihe von Fragen bereit, die vom Microsoft Teams-App-Generator zum Aktualisieren Ihrer manifest.json Datei aufgefordert werden.

    Teams-Generator

    Reihe von Fragen zum Aktualisieren Ihrer manifest.json-Datei

    • Wie lautet der Name Ihrer Lösung?

      Der Lösungsname ist Ihr Projektname. Sie können den vorgeschlagenen Namen annehmen, indem Sie die EINGABETASTE drücken.

    • Wohin möchten Sie die Daten verschieben?

      Sie befinden sich in Ihrem Projektverzeichnis. Drücken Sie die EINGABETASTE.

    • Titel Ihres Microsoft Teams App-Projektes?

      Der Titel ist der Name Ihres App-Pakets und wird im App-Manifest und in der Beschreibung verwendet. Geben Sie einen Titel ein, oder drücken Sie die EINGABETASTE, um den Standardnamen zu übernehmen.

    • Ihr (Firmen-)Name? (max. 32 Zeichen)

      Ihr Firmenname wird im App-Manifest verwendet. Geben Sie einen Firmennamen ein, oder drücken Sie die EINGABETASTE, um den Standardnamen zu übernehmen.

    • Welche Manifestversion möchten Sie verwenden?

      Wählen Sie das Standardschema aus.

    • Schnelles Gerüst? (Y/n)

      Der Standardwert ist "ja". geben Sie n ein, um Ihre Microsoft Partner-ID einzugeben.

    • Geben Sie Ihre Microsoft-Partner-ID ein, wenn Sie eine haben? (Zum Überspringen leer lassen)

      Dieses Feld ist nicht erforderlich und darf nur verwendet werden, wenn Sie bereits Teil des Microsoft Partner-Netzwerks sind.

    • Was möchten Sie zu Ihrem Projekt hinzufügen?

      Wählen Sie ( * ) Eine Registerkarte aus.

    • Die URL, unter der Sie diese Lösung hosten möchten?:

      Standardmäßig schlägt der Generator eine Azure-Website-URL vor. Sie testen Ihre App nur lokal, daher ist keine gültige URL erforderlich.

    • Soll ein Ladeindikator angezeigt werden, während Ihre App/Registerkarte geladen wird?

      Legen Sie fest, dass beim Laden Ihrer App oder Registerkarte keine Ladeanzeige eingeschlossen werden soll. Der Standardwert ist "nein", geben Sie "n" ein.

    • Möchten Sie, dass persönliche Apps ohne eine Registerkarten-Kopfleiste dargestellt werden?

      Legen Sie fest, keine persönliche Apps ohne Registerkarten-Kopfzeilenleiste dargestellt werden sollen. Der Standardwert ist "nein", geben Sie "n" ein.

    • Möchten Sie testframework und anfängliche Tests einschließen? (y/N)

      Legen Sie fest, kein Testframework für dieses Projekt einzuschließen. Der Standardwert ist "nein", geben Sie "n" ein.

    • Möchten Sie ESLint-Unterstützung einbeziehen? (y/N)

      Legen Sie fest, keine ESLint-Unterstützung einzuschließen. Der Standardwert ist "nein", geben Sie "n" ein.

    • Möchten Sie Azure Applications Insights für Telemetriedaten verwenden? (y/N)

      Legen Sie fest, Azure Application Insightsnichteinzuschließen. Die Standardeinstellung ist "nein". geben Sie "n" ein.

    • Standardregisterkartenname (max. 16 Zeichen)?

      Benennen Sie Ihre Registerkarte. Dieser Registerkartenname wird im gesamten Projekt als eine Datei- oder URL-Pfadkomponente verwendet.

    • Welche Art von Registerkarte möchten Sie erstellen?

      Verwenden Sie die Pfeiltasten, um Persönlich (statisch) auszuwählen.

    • Benötigen Sie Unterstützung für das einmalige Anmelden von Microsoft Entra für die Registerkarte?

      Wählen Sie aus, dass die Microsoft Entra-Unterstützung für einmaliges Anmelden für die Registerkarte nicht eingeschlossen wird. Der Standardwert ist ja, geben Sie n ein.

    Hinweis

    Auf einer Registerkarte wird die Registerkarten-Startseite nur angezeigt, wenn der Benutzer die Zurück-Schaltfläche auswählt (oder aus der Registerkarte heraus bewegt) und zur Startseite zurückkehrt. Die Registerkarte behält den vorherigen Zustand nicht beabsichtigt bei oder behält sie nicht bei.

Hinzufügen einer Inhaltsseite zur persönlichen Registerkarte

Erstellen Sie eine Inhaltsseite, und aktualisieren Sie die vorhandenen Dateien der persönlichen Registerkartenanwendung:

  1. Erstellen Sie eine neue personal.html-Datei in Ihrem Visual Studio Code mit dem folgenden Markup:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            <!-- Todo: add your a title here -->
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- inject:css -->
        <!-- endinject -->
    </head>
        <body>
            <h1>Personal Tab</h1>
            <p><img src="/assets/icon.png"></p>
            <p>This is your personal tab!</p>
        </body>
</html>

  2. Speichern Sie personal.html im Ordner public Ihrer Anwendung am folgenden Speicherort:

    ./src/public/<yourDefaultTabNameTab>/personal.html

  3. Öffnen Sie manifest.json aus dem folgenden Speicherort in Ihrem Visual Studio Code:

     ./src/manifest/manifest.json

  4. Fügen Sie dem leeren staticTabs-Array (staticTabs":[]) Folgendes hinzu, und fügen Sie das folgende JSON-Objekt hinzu:

    {
    "entityId": "personalTab",
    "name": "Personal Tab ",
    "contentUrl": "https://{{PUBLIC_HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
    "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
    "scopes": ["personal"]
}

    Wichtig

    Die Pfadkomponente yourDefaultTabNameTab ist der Wert, den Sie im Generator für Standardregisterkartenname eingegeben haben, plus das Wort Tab.

    Beispiel: DefaultTabName ist MyTab dann /MyTabTab/

  5. Aktualisieren Sie die contentURL-Pfadkomponente yourDefaultTabNameTabTab mit Ihrem tatsächlichen Registerkartennamen.

  6. Speichern Sie die aktualisierte manifest.json-Datei.

  7. Öffnen Sie Tab.ts in Visual Studio Code über den folgenden Pfad, um Ihre Inhaltsseite in einem iFrame bereitzustellen:

    ./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts

  8. Fügen Sie der Liste der iFrame-Decorators Folgendes hinzu:

     @PreventIframe("/<yourDefaultTabName Tab>/personal.html")

  9. Speichern Sie die aktualisierte Datei. Ihr Registerkartencode ist vollständig.

Erstellen Ihres App-Pakets

Sie benötigen ein App-Paket, um Ihre Anwendung in Microsoft Teams erstellen und ausführen zu können. Das App-Paket wird über eine gulp-Aufgabe erstellt, welche die manifest.json-Datei überprüft und den ZIP-Ordner im Verzeichnis ./package generiert. Verwenden Sie an der Eingabeaufforderung den Befehl gulp manifest.

Erstellen und Ausführen Ihrer Anwendung

Erstellen Ihrer Anwendung

Geben Sie an der Eingabeaufforderung den folgenden Befehl ein, um Ihre Lösung in den Ordner ./dist zu transpilieren (transkompilieren):

gulp build

Ausführen Ihrer Anwendung

  1. Geben Sie an der Eingabeaufforderung den folgenden Befehl ein, um einen lokalen Webserver zu starten:

    gulp serve

  2. Geben Sie http://localhost:3007/<yourDefaultAppNameTab>/ in Ihren Browser ein, um die Startseite Ihrer Anwendung anzuzeigen.

    Standardregisterkarte

  3. Durchsuchen Sie http://localhost:3007/<yourDefaultAppNameTab>/personal.html, um Ihre persönliche Registerkarte anzuzeigen.

    Standard HTML-Registerkarte

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Beenden Sie an der Eingabeaufforderung den localhost, und geben Sie den folgenden Befehl ein, um einen sicheren Tunnel zu Ihrer Registerkarte einzurichten:

gulp ngrok-serve

Nachdem Ihre Registerkarte über ngrok in Microsoft Teams hochgeladen und erfolgreich gespeichert wurde, können Sie sie in Teams anzeigen, bis Ihre Tunnelsitzung endet.

Hochladen Ihrer Anwendung in Teams

  1. Wechseln Sie zu Teams, und wählen Sie AppsMicrosoft Teams Store aus.

  2. Wählen Sie Apps verwalten>App> hochladenBenutzerdefinierte App hochladen aus.

  3. Wechseln Sie zu Ihrem Projektverzeichnis, navigieren Sie zum Ordner ./package, wählen Sie den ZIP-Ordner aus und dann Öffnen.

    Hinzufügen Ihrer persönlichen Registerkarte

  4. Wählen Sie Hinzufügen im Dialogfeld aus. Ihre Registerkarte wird in Teams hochgeladen.

    Persönliche Registerkarte hochgeladen

  5. Wählen Sie im linken Bereich von Teams die Auslassungspunkte ●●● und dann Ihre hochgeladene App aus, um Ihre persönliche Registerkarte anzuzeigen.

    Ihre persönliche Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt. Sie können auch Ihre persönliche Registerkarte in Teams neu anordnen .

Erstellen einer persönlichen Registerkarte mit ASP.NET Core

  1. Erstellen Sie an der Eingabeaufforderung ein neues Verzeichnis für Ihr Registerkartenprojekt.

  2. Klonen Sie das Beispielrepository mit dem folgenden Befehl in Ihr neues Verzeichnis, oder laden Sie den Quellcode herunter, und extrahieren Sie die Dateien:

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

Im Folgenden finden Sie die Schritte zum Erstellen einer persönlichen Registerkarte:

  1. Generieren Ihrer Anwendung mit einer persönlichen Registerkarte
  2. Aktualisieren und Ausführen Ihre Anwendung
  3. Einrichten eines sicheren Tunnels zu Ihrer Registerkarte
  4. Aktualisieren Ihres App-Pakets mit dem Entwicklerportal
  5. Vorschau Ihrer App in Teams

Generieren Ihrer Anwendung mit einer persönlichen Registerkarte

  1. Öffnen Sie Visual Studio, und wählen Sie Öffnen eines Projekt oder einer Lösung aus.

  2. Wechseln Sie zu Ordner Microsoft_Teams-Samples>samples>tab-personal>razor-csharp, und öffnen Sie PersonalTab.sln.

  3. Wählen Sie in Visual Studio F5 aus, oder klicken Sie im Menü Debuggen Ihrer Anwendung auf Debuggen starten, um zu überprüfen, ob die Anwendung ordnungsgemäß geladen wurde. Wechseln Sie in einem Browser zu den folgenden URLs:

    • <http://localhost:3978/>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Überprüfen des Quellcodes

Startup.cs

Dieses Projekt wurde aus einer leeren Vorlage für ASP.NET Core 3.1-Webanwendungen erstellt, wobei das Kontrollkästchen Erweitert – Für HTTPS konfigurieren beim Setup aktiviert ist. Die MVC-Dienste werden von der ConfigureServices()-Methode des Frameworks für die Abhängigkeitsinjektion registriert. Außerdem ermöglicht die leere Vorlage nicht die standardmäßige Bereitstellung statischer Inhalte, sodass die Middleware für statische Dateien der Methode Configure() mit dem folgenden Code hinzugefügt wird:

public void ConfigureServices(IServiceCollection services)
  {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

Webstammordner

In ASP.NET Core sucht die Anwendung im Webstammordner nach statischen Dateien.

Index.cshtml

ASP.NET Core behandelt Dateien namens Index als Standard- oder Startseite für die Website. Wenn Ihre Browser-URL auf das Stammverzeichnis der Website zeigt, wird Index.cshtml als Startseite für Ihre Anwendung angezeigt.

Ordner „AppManifest“

Dieser Ordner enthält die folgenden erforderlichen App-Paketdateien:

  • Ein Vollfarbsymbol mit einer Größe von 192 x 192 Pixeln.
  • Ein transparentes Kontursymbol mit einer Größe von 32 x 32 Pixeln.
  • Eine manifest.json-Datei, welche die Attribute Ihrer App angibt.

Diese Dateien müssen in einem App-Paket gezippt werden, damit sie beim Hochladen Ihrer Registerkarte in Teams verwendet werden können. Teams lädt die contentUrl in Ihrem Manifest angegebene, bettet sie in einen iframe> ein <und rendert sie auf Ihrer Registerkarte.

.csproj

Klicken Sie im Visual Studio-Lösungsexplorer mit der rechten Maustaste auf das Projekt, und wählen Sie Projektdatei bearbeiten aus. Am Ende der Datei können Sie den folgenden Code sehen, der Ihren ZIP-Ordner erstellt und aktualisiert, wenn die Anwendung erstellt wird:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Aktualisieren und Ausführen Ihrer Anwendung

  1. Öffnen Sie den Visual Studio-Lösungsexplorer, und wechseln Sie zum Ordner Pages>Shared, öffnen Sie _Layout.cshtml, und fügen Sie dem Abschnitt <head>-Kategorien Folgendes hinzu:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

  2. Öffnen Sie im Projektmappen-Explorer von Visual Studio personalTab.cshtml im Ordner Pages, und fügen Sie die <script> Tags hinzumicrosoftTeams.app.initialize().

  3. Klicken Sie auf Speichern.

  4. Wählen Sie in Visual Studio F5 oder Debuggen starten im Menü Debuggen Ihrer Anwendung aus.

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Führen Sie an der Eingabeaufforderung im Stammverzeichnis Ihres Projektverzeichnisses den folgenden Befehl aus, um einen sicheren Tunnel zu Ihrer Registerkarte einzurichten:

ngrok http 3978 --host-header=localhost

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

  1. Wechseln Sie zum Entwicklerportal.

  2. Öffnen Sie Apps, und wählen Sie App importieren aus.

  3. Der Dateiname des App-Pakets lautet tab.zip und ist unter pfad /bin/Debug/netcoreapp3.1/tab.zip verfügbar.

  4. Wählen Sie tab.zip aus, und öffnen Sie es im Entwicklerportal.

  5. Eine Standard-App-ID wird erstellt und im Abschnitt Allgemeine Informationen aufgefüllt.

  6. Fügen Sie die Kurz- und Langbeschreibung für Ihre App unter Beschreibungen hinzu.

  7. Fügen Sie in Entwicklerinformationen die erforderlichen Details hinzu, und geben Sie unter Website (muss eine gültige HTTPS-URL sein) Ihre ngrok-HTTPS-URL ein.

  8. Aktualisieren Sie unter App-URLs die Datenschutzrichtlinie auf https://<yourngrokurl>/privacy und die Nutzungsbedingungen auf, https://<yourngrokurl>/tou und wählen Sie Speichern aus.

  9. Wählen Sie unter App-Features die Option Persönliche App>Erstellen Sie Ihre erste persönliche App-Registerkarte aus, geben Sie den Namen ein, und aktualisieren Sie die Inhalts-URL mit https://<yourngrokurl>/personalTab. Lassen Sie das Feld Website-URL leer, wählen Sie kontext as personalTab aus der Dropdownliste aus, und wählen Sie Bestätigen aus.

  10. Wählen Sie Speichern.

  11. Im Abschnitt "Domänen" müssen Domänen auf Ihren Registerkarten Ihre ngrok-URL ohne das HTTPS-Präfix <yourngrokurl>.ngrok.io enthalten.

Anzeigen einer Vorschau Ihrer App in Teams

  1. Wählen Sie auf der Symbolleiste des Entwicklerportals Vorschau in Teams aus. Das Entwicklerportal informiert Sie darüber, dass Ihre benutzerdefinierte App erfolgreich hochgeladen wurde. Die Seite Hinzufügen wird für Ihre App in Teams angezeigt.

  2. Wählen Sie Hinzufügen aus, um die Registerkarte in Teams zu laden. Ihre Registerkarte ist jetzt in Teams verfügbar.

    Standardregisterkarte

    Ihre persönliche Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt. Sie können auch Ihre persönliche Registerkarte in Teams neu anordnen .

Erstellen einer persönlichen Registerkarte mit ASP.NET Core MVC

  1. Erstellen Sie an der Eingabeaufforderung ein neues Verzeichnis für Ihr Registerkartenprojekt.

  2. Klonen Sie das Beispielrepository mit dem folgenden Befehl in Ihr neues Verzeichnis, oder laden Sie den Quellcode herunter, und extrahieren Sie die Dateien:

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

Im Folgenden finden Sie die Schritte zum Erstellen einer persönlichen Registerkarte:

  1. Generieren Ihrer Anwendung mit einer persönlichen Registerkarte
  2. Aktualisieren und Ausführen der Anwendung
  3. Einrichten eines sicheren Tunnels zu Ihrer Registerkarte
  4. Aktualisieren Ihres App-Pakets mit dem Entwicklerportal
  5. Vorschau Ihrer App in Teams

Generieren Ihrer Anwendung mit einer persönlichen Registerkarte

  1. Öffnen Sie Visual Studio, und wählen Sie Öffnen eines Projekt oder einer Lösung aus.

  2. Wechseln Sie zum Ordner Microsoft-Teams-Samples>samples>tab-personal>mvc-csharp, und öffnen SiePersonalTabMVC.sln in Visual Studio.

  3. Wählen Sie in Visual Studio F5 aus, oder klicken Sie im Menü Debuggen Ihrer Anwendung auf Debuggen starten, um zu überprüfen, ob die Anwendung ordnungsgemäß geladen wurde. Wechseln Sie in einem Browser zu den folgenden URLs:

    • <http://localhost:3978>
    • <http://localhost:3978/personalTab>
    • <http://localhost:3978/privacy>
    • <http://localhost:3978/tou>
Überprüfen des Quellcodes

Startup.cs

Dieses Projekt wurde aus einer leeren Vorlage für ASP.NET Core 3.1-Webanwendungen erstellt, wobei das Kontrollkästchen Erweitert – Für HTTPS konfigurieren beim Setup aktiviert ist. Die MVC-Dienste werden von der ConfigureServices()-Methode des Frameworks für die Abhängigkeitsinjektion registriert. Außerdem ermöglicht die leere Vorlage nicht die standardmäßige Bereitstellung statischer Inhalte, sodass die Middleware für statische Dateien der Methode Configure() mit dem folgenden Code hinzugefügt wird:

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

Webstammordner

In ASP.NET Core sucht die Anwendung im Webstammordner nach statischen Dateien.

Ordner „AppManifest“

Dieser Ordner enthält die folgenden erforderlichen App-Paketdateien:

  • Ein Vollfarbsymbol mit einer Größe von 192 x 192 Pixeln.
  • Ein transparentes Kontursymbol mit einer Größe von 32 x 32 Pixeln.
  • Eine manifest.json-Datei, welche die Attribute Ihrer App angibt.

Diese Dateien müssen in einem App-Paket gezippt werden, damit sie beim Hochladen Ihrer Registerkarte in Teams verwendet werden können. Teams lädt die contentUrl in Ihrem Manifest angegebene, bettet sie in einen iFrame ein und rendert sie auf Ihrer Registerkarte.

.csproj

Klicken Sie im Visual Studio-Lösungsexplorer mit der rechten Maustaste auf das Projekt, und wählen Sie Projektdatei bearbeiten aus. Am Ende der Datei sehen Sie den folgenden Code, der Ihren ZIP-Ordner erstellt und aktualisiert, wenn die Anwendung erstellt wird:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Modelle

PersonalTab.cs stellt ein Nachrichtenobjekt und Methoden dar, die vom PersonalTabController aufgerufen werden, wenn ein Benutzer eine Schaltfläche in der PersonalTab-Ansicht auswählt.

Ansichten

Diese Ansichten sind verschiedenen Ansichten in ASP.NET Core MVC:

  • Startseite: ASP.NET Core behandelt Dateien namens Index als die Standard- oder Startseite für die Website. Wenn Ihre Browser-URL auf das Stammverzeichnis der Website zeigt, wird Index.cshtml als Startseite für Ihre Anwendung angezeigt.

  • Freigegeben: Das Markup der Teilansicht _Layout.cshtml enthält die allgemeine Seitenstruktur der Anwendung und freigegebene visuelle Elemente. Außerdem wird auf die Teams-Bibliothek verwiesen.

Controller

Die Controller verwenden die ViewBag-Eigenschaft, um Werte dynamisch in die Ansichten zu übertragen.

Aktualisieren und Ausführen Ihrer Anwendung

  1. Öffnen Sie den Visual Studio-Lösungsexplorer, und wechseln Sie zum Ordner Views>Shared, öffnen Sie _Layout.cshtml, und fügen Sie dem Abschnitt <head>-Kategorien Folgendes hinzu:

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>

  2. Öffnen Sie im Projektmappen-Explorer von Visual Studio die Datei PersonalTab.cshtml im Ordner "Views>PersonalTab", und fügen Sie innerhalb der <script> Tags hinzumicrosoftTeams.app.initialize().

  3. Klicken Sie auf Speichern.

  4. Wählen Sie in Visual Studio F5 oder Debuggen starten im Menü Debuggen Ihrer Anwendung aus.

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Führen Sie an der Eingabeaufforderung im Stammverzeichnis Ihres Projektverzeichnisses den folgenden Befehl aus, um einen sicheren Tunnel zu Ihrer Registerkarte einzurichten:

ngrok http 3978 --host-header=localhost

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

  1. Wechseln Sie zum Entwicklerportal.

  2. Öffnen Sie Apps, und wählen Sie App importieren aus.

  3. Der Name Ihres App-Pakets lautet tab.zip. Es ist im folgenden Pfad verfügbar:

    /bin/Debug/netcoreapp3.1/tab.zip

  4. Wählen Sie tab.zip aus, und öffnen Sie es im Entwicklerportal.

  5. Eine Standard-App-ID wird erstellt und im Abschnitt Allgemeine Informationen aufgefüllt.

  6. Fügen Sie die Kurz- und Langbeschreibung für Ihre App unter Beschreibungen hinzu.

  7. Fügen Sie unter Entwicklerinformationen die erforderlichen Details hinzu, und geben Sie unter Website (muss eine gültige HTTPS-URL sein) Ihre ngrok-HTTPS-URL an.

  8. Aktualisieren Sie unter App-URLs die Datenschutzrichtlinie auf https://<yourngrokurl>/privacy und die Nutzungsbedingungen auf, https://<yourngrokurl>/tou und wählen Sie Speichern aus.

  9. Wählen Sie unter App-Features die Option Persönliche App>Erstellen Sie Ihre erste persönliche App-Registerkarte aus, geben Sie den Namen ein, und aktualisieren Sie die Inhalts-URL mit https://<yourngrokurl>/personalTab. Lassen Sie das Feld Website-URL leer, wählen Sie kontext as personalTab aus der Dropdownliste aus, und wählen Sie Bestätigen aus.

  10. Wählen Sie Speichern.

  11. Im Abschnitt „Domänen“ müssen Domänen auf Ihren Registerkarten Ihre ngrok-URL ohne das HTTPS-Präfix <yourngrokurl>.ngrok.io enthalten.

Anzeigen einer Vorschau Ihrer App in Teams

  1. Wählen Sie auf der Symbolleiste des Entwicklerportals Vorschau in Teams aus. Das Entwicklerportal informiert Sie darüber, dass Ihre benutzerdefinierte App erfolgreich hochgeladen wurde. Die Seite Hinzufügen wird für Ihre App in Teams angezeigt.

  2. Wählen Sie Hinzufügen aus, um die Registerkarte in Teams zu laden. Ihre Registerkarte ist jetzt in Teams verfügbar.

    Registerkarte „Persönlich“

    Ihre persönliche Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt. Sie können auch Ihre persönliche Registerkarte in Teams neu anordnen .

Mit Blazor können Sie interaktive Webbenutzeroberfläche mithilfe von C# anstelle von JavaScript erstellen. Sie können eine Registerkarten-App und eine Bot-App mit Blazor und der neuesten Version von Visual Studio erstellen.

Screenshot der Blazor-App, die die Ausgabe der Registerkarte, des Bots und der Nachrichtenerweiterung anzeigt, nachdem der Schritt-für-Schritt-Leitfaden für Blazor erfolgreich abgeschlossen wurde.

Hinweis

Das Teams-Toolkit unterstützt die Nachrichtenerweiterungsfunktion nicht.

Hier finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihrer App benötigen.

  Installieren Zum Benutzen...
Required    
  Visual Studio, Version 17.2.0, Vorschauversion 2.1 Wählen Sie Visual Studio Enterprise 2022 Preview (Version 17.2.0, Vorschauversion 2.1) aus.
  Microsoft Teams Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie arbeiten, über Apps für Chats, Besprechungen und Anrufe an einem Ort.
  Microsoft Edge (empfohlen) oder Google Chrome Ein Browser mit Entwicklertools.

Vorbereiten der Entwicklungsumgebung

Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.

Installieren des Microsoft Teams-Toolkits

Das Teams Toolkit vereinfacht den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App, veröffentlichen sie im Teams Store und vieles mehr. Sie können das Toolkit mit Visual Studio oder als Befehlszeilenschnittstelle (namens teamsfx) verwenden.

Sie können die neueste Version von Visual Studio verwenden, um Teams-Apps mit Blazor Server in .NET zu entwickeln.

So installieren Sie die Microsoft Teams Toolkit-Erweiterung:

  1. Laden Sie die neueste Version von Visual Studio herunter.

  2. Öffnen Sie vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe in Ihrem Downloadordner.

  3. Wählen Sie auf der Seite Visual Studio-Installer die Option Weiter aus, um Ihre Installation zu konfigurieren.

    Screenshot des Visual Studio-Installers mit rot hervorgehobenen Continue-Optionen.

  4. Wählen Sie ASP.NET und Webentwicklung unter Workloads aus.

  5. Wählen Sie unter Installationsdetailsdie Option Microsoft Teams-Entwicklungstools aus.

  6. Wählen Sie Installieren aus.

    Screenshot von Visual Studio Enterprise Preview mit rot hervorgehobener Option Asp.NET, Webentwicklung und Microsoft Teams-Entwicklungstools unter Installationsdetails und Installation.

    Visual Studio ist in wenigen Minuten installiert.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist wie ein Raum oder Container für Ihre Organisation in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen ausführen. In diesem Bereich laden Sie auch Ihre benutzerdefinierte App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Option zum Hochladen benutzerdefinierter Apps aktivieren

Nachdem Sie die App erstellt haben, müssen Sie ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.

Verfügen Sie bereits über einen Mandanten und den Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies wirklich tun!

Überprüfen Sie, ob Sie eine benutzerdefinierte App in Teams hochladen können:

  1. Wählen Sie im Teams-Client Apps aus.

  2. Wählen Sie Verwalten Ihrer Apps aus.

  3. Wählen Sie Benutzerdefinierte App hochladen aus. Wenn die Option Benutzerdefinierte App hochladen angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

    Screenshot: Option zum Hochladen einer benutzerdefinierten App in Teams

    Hinweis

    Wenden Sie sich an Ihren Teams-Administrator, wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden.

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie nicht über ein Teams-Entwicklerkonto verfügen, können Sie es kostenlos erhalten. Nehmen Sie am Microsoft 365-Entwicklerprogramm teil!

  1. Gehen Sie zu Microsoft 365-Entwicklerprogramm.

  2. Wählen Sie Jetzt beitreten aus, und folgen Sie den Anweisungen auf dem Bildschirm.

  3. Wählen Sie auf der Willkommensseite E5-Abonnement einrichten aus.

  4. Einrichten Ihres Administratorkontos. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt.

    Screenshot des Microsoft 365-Entwicklerprogramms mit Ihren Microsoft 365-Entwicklerabonnements für die Blazor-App.

  5. Melden Sie sich bei Teams mit dem Administratorkonto an, das Sie gerade eingerichtet haben. Vergewissern Sie sich, dass Sie über die Option Benutzerdefinierte App hochladen in Teams verfügen.

Abrufen eines kostenlosen Azure-Kontos

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Jetzt verfügen Sie über alle Tools und richten Ihre Konten ein. Richten Sie als Nächstes Ihre Entwicklungsumgebung ein, und beginnen Sie mit dem Erstellen!

Erstellen eines Projektarbeitsbereichs für Ihre Registerkarten-App

Starten Sie die Teams-App-Entwicklung, indem Sie Ihre erste App erstellen. Diese App verwendet die Tabulatorfunktion.

Screenshot der Blazor-App, die die endgültige Ausgabe der Registerkarten-App anzeigt, nachdem der Schritt-für-Schritt-Leitfaden für Blazor erfolgreich abgeschlossen wurde.

Dieses Tutorial führt Sie durch die Schritte zum Erstellen, Ausführen und Bereitstellen Ihrer ersten Teams-App mithilfe von .NET/Blazor.

Auf dieser Seite erfahren Sie Folgendes:

  1. Einrichten eines neuen Registerkartenprojekts mit dem Teams-Toolkit
  2. Informationen zur Verzeichnisstruktur Ihrer App

Erstellen eines Registerkartenprojekts

Verwenden Sie das Teams-Toolkit, um Ihr erstes Registerkartenprojekt zu erstellen. Das Toolkit führt Sie durch eine Reihe von Seiten, um Ihr Teams-App-Projekt zu erstellen und zu konfigurieren:

  1. Neue Projektseite erstellen : Sie können den Projekttyp auswählen.
  2. Neue Projektseite konfigurieren : Sie können die Projektdetails eingeben.
  3. Neue Teams-Anwendungsseite erstellen : Sie können die Teams-App-Funktionen auswählen.

So erstellen Sie ihren Registerkartenprojektarbeitsbereich

  1. Öffnen Sie die neueste Version von Visual Studio.

  2. Wählen Sie Neues Projekt erstellen aus.

    Screenshot von Visual Studio mit rot hervorgehobener Option

    Die Seite Neues Projekt erstellen wird angezeigt.

  3. Wählen Sie die Projektdetails aus.

    Wählen Sie den Projekttyp aus:

    1. Suchen Sie in der Dropdownliste vorlagen nach Microsoft Teams .

    2. Wählen Sie Microsoft Teams-App als Vorlage aus.

    3. Wählen Sie Weiter aus.

      Screenshot: Erstellen eines neuen Projekts mit rot hervorgehobener Option

      Die Seite Neues Projekt konfigurieren wird angezeigt.

  4. Konfigurieren Sie die neuen Projektdetails.

    Wählen Sie die folgende Projektkonfiguration aus:

    1. Geben Sie einen geeigneten Namen für Ihr Projekt ein.

      Hinweis

      Sie können beachten, dass der von Ihnen eingegebene Projektname automatisch auch als Projektmappenname eingegeben wird. Wenn Sie möchten, können Sie den Projektmappennamen ohne Auswirkungen auf den Projektnamen ändern.

    2. Wählen Sie den Ordnerpfad aus, in dem Sie den Projektarbeitsbereich erstellen möchten.

    3. Geben Sie ggf. einen anderen Lösungsnamen ein.

    4. Aktivieren Sie die Option, um das Projekt und die Projektmappe bei Bedarf im gleichen Ordner zu speichern. Für dieses Tutorial benötigen Sie diese Option nicht.

    5. Wählen Sie Erstellen aus.

      Screenshot: Konfigurieren Des neuen Projekts mit rot hervorgehobener Option

      Die Seite Neue Teams-Anwendung erstellen wird angezeigt.

  5. Wählen Sie Teams-App-Feature aus.

    1. Wählen Sie die Registerkarte als Funktion für Ihre App aus.

    2. Wählen Sie Erstellen aus.

    Screenshot: Erstellen einer neuen Teams-Anwendung mit rot hervorgehobenen Optionen

    Ihre Teams-Registerkarten-App wird in wenigen Sekunden erstellt.

    Screenshot von Visual Studio mit Tipps für die ersten Schritte beim Erstellen Ihrer App.

    Eine kurze Zusammenfassung der Erstellung einer Teams-Registerkarten-App. Sehen Sie sich diese kurze Zusammenfassung zum Erstellen einer Teams-Registerkarten-App an.

    Die grafische Darstellung zeigt den Prozess zum Erstellen der Teams-Registerkarte app1.

Machen Sie einen Überblick über den Quellcode für die Teams-Registerkarten-App

Nach der Projekterstellung verfügen Sie über die Komponenten zum Erstellen einer einfachen persönlichen App. Sie können die Projektverzeichnisstruktur im Bereich Projektmappen-Explorer von Visual Studio anzeigen.

Screenshot des Projektmappen-Explorers mit den Komponenten zum Erstellen einer einfachen persönlichen App.

Teams Toolkit erstellt ein Gerüst für Ihr Projekt basierend auf den von Ihnen ausgewählten Funktionen. Teams Toolkit verwaltet unter anderem Folgendes:

Ordnername Inhalt
App-Symbole Die App-Symbole werden als PNG-Dateien in color.png und outline.png gespeichert.
manifest.json Das App-Manifest für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert.
BackendController.cs Ein Back-End-Controller wird in Controllers/BackendController.cs zur Unterstützung bei der Authentifizierung bereitgestellt.
Pages/Tab.razor Das App-Manifest für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert.
TeamsFx.cs und JS/src/index.js Der Inhalt wird zum Initialisieren der Kommunikation mit dem Teams-Host verwendet.

Sie können Back-End-Funktionen hinzufügen, indem Sie Ihrer Anwendung weitere ASP.NET Core-Controller hinzufügen.

Erstellen und Ausführen Ihrer ersten Teams-Registerkarten-App

Nachdem Sie Ihren Projektarbeitsbereich mit Teams Toolkit eingerichtet haben, erstellen Sie Ihr Registerkartenprojekt.

So erstellen Sie Ihre App und führen sie aus:

  1. Wählen Sie ProjectTeams Toolkit>Prepare Teams App Dependencies (Teams-App-Abhängigkeiten> vorbereiten) aus.

    Screenshot: Visual Studio mit den Optionen

  2. Wählen Sie Ihr Microsoft 365-Konto oder Konto hinzufügen aus , um sich anzumelden.

    Screenshot des Microsoft 365-Kontos mit rot hervorgehobener Option

  3. Wählen Sie Debuggen>Debuggen starten oder F5 aus, um Ihre App im Debugmodus auszuführen.

    Erfahren Sie, was geschieht, wenn Sie Ihre App lokal im Debugger ausführen.

    Wenn Sie F5 auswählen, Teams Toolkit:

    1. Registriert Ihre Anwendung mit der Microsoft Entra-ID.
    2. Registriert Ihre Anwendung für das Hochladen in Teams.
    3. Startet ihr Anwendungs-Back-End, das lokal ausgeführt wird.
    4. Startet ihr lokal gehostetes Anwendungs-Front-End.
    5. Startet Teams in einem Webbrowser mit einem Befehl, um Teams anzuweisen, eine benutzerdefinierte App hochzuladen (die URL wird im Anwendungsmanifest registriert).

  4. Installieren Sie bei Bedarf das selbstsignierte SSL-Zertifikat für das lokale Debuggen.

    Screenshot der Sicherheitswarnung mit rot hervorgehobener Option

    Teams wird in einem Webbrowser geladen.

  5. Wählen Sie Hinzufügen aus, wenn Sie aufgefordert werden, die App in Teams zu installieren.

    Screenshot: Lokales Debuggen in BlazorApp mit rot hervorgehobener Option

    Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Ihrer lokalen Umgebung ausgeführt!

    Screenshot: Die erste Registerkarten-App wird in Ihrer lokalen Umgebung ausgeführt.

  6. Navigieren Sie durch die Seite, um die Benutzerdetails anzuzeigen.

  7. Wählen Sie Autorisieren aus, damit Ihre App Benutzerdetails mithilfe von Microsoft Graph abrufen kann.

    Die App fordert die Berechtigung zum Gewähren des Zugriffs zum Anzeigen von Benutzerdetails an.

    Screenshot: Option

  8. Wählen Sie Akzeptieren aus, damit Ihre App auf Benutzerdetails zugreifen kann.

    Screenshot der angeforderten Berechtigungen mit den App-Informationen

    Ihr Foto und Ihre Details werden auf Ihrer Persönlichen Registerkarte angezeigt.

    Screenshot: Grundlegende Informationen, die auf der Persönlichen Registerkarte Ihrer App in Teams angezeigt werden

    Sie können normale Debugaktivitäten ausführen, z. B. das Festlegen von Haltepunkten, als ob es sich um eine andere Webanwendung handeln würde. Die App unterstützt Hot Reloading. Wenn Sie eine Datei innerhalb des Projekts ändern, wird die Seite erneut geladen.

    Erfahren Sie, wie Sie Probleme beheben, wenn Ihre App nicht lokal ausgeführt wird.

    Zum Ausführen Ihrer App in Teams benötigen Sie ein Microsoft 365-Entwicklungskonto, das das Hochladen benutzerdefinierter Apps ermöglicht. Weitere Informationen hierzu finden Sie im Abschnitt Voraussetzungen.

  9. Beenden Sie das Debuggen in Visual Studio.

Vorschau Ihrer ersten Teams-Registerkarten-App

Sie haben gelernt, eine Teams-App mit Registerkartenfunktion zu erstellen, zu erstellen und auszuführen. Die folgenden letzten Schritte sind das Bereitstellen Ihrer App in Azure und die Vorschau in Teams:

  1. Bereitstellen Ihrer Registerkarten-App in der Cloud: Sie können Ihre Registerkarten-App in der Cloud bereitstellen.

  2. Bereitstellen Ihrer Registerkarten-App in der Cloud: Sie können Ihre Registerkarten-App in der Cloud bereitstellen.

  3. Vorschau Ihrer Registerkarten-App in Teams: Sie können eine Vorschau Ihrer Registerkarten-App in Teams anzeigen.

    Wir stellen die erste App mit Registerkartenfunktion in Azure mithilfe des Teams-Toolkits bereit.

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

  1. Wählen Sie Project>Teams Toolkit>Provision in the Cloud aus.

    Screenshot: Visual Studio mit den Optionen

  2. Geben Sie im Dialogfeld Bereitstellen die Details zu Abonnement und Ressourcengruppe ein :

    1. Wählen Sie den Abonnementnamen in der Dropdownliste Abonnementname aus.
    2. Wählen Sie die Ressourcengruppe in der Dropdownliste Ressourcengruppe oder Neu aus, um die für Ihre App generierte Ressourcengruppe hinzuzufügen.
    3. Wählen Sie Ihre Region aus, wenn eine neue Ressourcengruppe erstellt wird.
    4. Wählen Sie Bereitstellen aus.

    Screenshot der rot hervorgehobenen Option

    Die Bereitstellungswarnung wird angezeigt.

  3. Wählen Sie Bereitstellen aus.

    Screenshot des Teams-Toolkits mit rot hervorgehobener Bereitstellung

    Die Bereitstellung Ihrer Ressourcengruppe in der Cloud dauert einige Minuten.

  4. Klicken Sie nach Abschluss der Bereitstellung auf OK.

    Screenshot der Teams Toolkit-App mit rot hervorgehobener Option

  5. Wählen Sie Bereitgestellte Ressourcen anzeigen aus, um sie im Azure-Portal anzuzeigen.

    Screenshot des Teams-Toolkits mit rot hervorgehobener Option

  6. Melden Sie sich bei Ihrem Azure-Portalkonto bei der Anmeldeaufforderung an.

    Ihre app-dev-rg wird angezeigt.

    Screenshot: Blazorapp-dev-rg mit den im Azure-Portal bereitgestellten Ressourcen

    Ihre Ressourcen werden im Azure-Portal bereitgestellt!

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

  1. Wählen Sie ProjectTeams Toolkit>Deploy to the Cloud (In> der Cloud bereitstellen) aus.

    Screenshot: Visual Studio mit rot hervorgehobenen Optionen

  2. Wählen Sie OK aus.

    Screenshot: Mit Teams Toolkit erstellte App mit rot hervorgehobener Option

    Ihre Registerkarten-App wurde erfolgreich in der Cloud bereitgestellt!

So zeigen Sie eine Vorschau Ihrer Registerkarten-App in Teams an

  1. Wählen Sie Project>Teams Toolkit>Preview in Teams aus.

    Screenshot von Visual Studio mit den Optionen

  2. Wählen Sie Hinzufügen aus, wenn Sie aufgefordert werden, die App in Teams zu installieren.

    Screenshot: Teams mit der Option

    Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Ihrer Azure-Umgebung ausgeführt!

    Screenshot: Persönliche Registerkarte Ihrer App in Teams

    Navigieren Sie durch die Seite, um die Benutzerdetails anzuzeigen.

  3. Wählen Sie Autorisieren aus, damit Ihre App Benutzerdetails mithilfe von Microsoft Graph abrufen kann.

    Die App fordert die Berechtigung zum Gewähren des Zugriffs zum Anzeigen von Benutzerdetails an.

    Screenshot: Option

  4. Wählen Sie Akzeptieren aus, damit Ihre App auf Benutzerdetails zugreifen kann.

    Screenshot der angeforderten Berechtigungen mit den App-Informationen

    Ihr Foto und Ihre Details werden auf Ihrer Persönlichen Registerkarte angezeigt.

    Screenshot: App mit persönlicher Registerkarte mit grundlegenden Informationen

Glückwunsch

Sie haben das Tutorial zum Erstellen einer Registerkarten-App mit Blazor abgeschlossen.

Statische persönliche Registerkarten neu anordnen

Ab Manifestversion 1.7 können Entwickler alle Registerkarten in ihrer persönlichen App neu anordnen. Sie können die Registerkarte Botchat , die standardmäßig immer auf die erste Position festgelegt ist, an eine beliebige Stelle in der Kopfzeile der persönlichen App-Registerkarte verschieben. Es werden zwei reservierte entityId-Schlüsselwörter für die Registerkarte deklariert, Unterhaltungen und Info.

Wenn Sie einen Bot mit einem persönlichen Bereich erstellen, wird er standardmäßig in der ersten Registerkartenposition in einer persönlichen App angezeigt. Wenn Sie ihn an eine andere Position verschieben möchten, müssen Sie Ihrem Manifest ein statisches Registerkartenobjekt mit dem reservierten Schlüsselwort Unterhaltungen hinzufügen. Die Registerkarte Unterhaltung wird im Web oder Desktop angezeigt, je nachdem, wo Sie die Registerkarte Unterhaltung im staticTabs-Array hinzufügen.


{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

Erweitern statischer Registerkarten auf Gruppenchats, Kanäle und Besprechungen

Hinweis

Um Ihre statische Registerkarte auf Gruppenchats, Kanäle und Besprechungen zu erweitern, verwenden Sie das App-Manifest v1.16 oder höher.

Sie können statische Registerkarten auf Gruppenchats, Kanäle und Besprechungen erweitern. Anstelle angehefteter App-Inhalte können Sie Registerkarten erstellen, die sich eher wie Apps verhalten, da Sie nur eine Registerkarte pro App anheften können, z. B. eine einzelne YouTube-App-Registerkarte anheften.

Um Ihre statischen Registerkarten auf Gruppenchats, Kanäle und Besprechungen zu erweitern, aktualisieren Sie Ihr App-Manifest mit den scopes Parametern und context in der staticTabs -Eigenschaft.

Im Folgenden finden Sie ein Beispiel für ein App-Manifest, in dem eine statische Registerkarte definiert ist, die in allen Bereichen und Kontexten in Teams funktioniert:

"staticTabs": [ 
  { 
     "entityId": "homeTab", 
     "scopes": [ 
       "personal", 
       "groupChat", 
       "team"
      ], 
     "context": [ 
       "personalTab",
       "channelTab", 
       "privateChatTab", 
       "meetingChatTab", 
       "meetingDetailsTab", 
       "meetingSidePanel", 
       "meetingStage" 
      ], 
      "name": "Contoso", 
      "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", 
      "websiteUrl": "https://contoso.com/content (displayed in web browser)" 
  }
],

Wenn im App-Manifest kein Kontext definiert ist, berücksichtigt Teams standardmäßig den folgenden Kontext:

"context": [ 
   "personalTab",
   "channelTab",
   "privateChatTab", 
   "meetingChatTab", 
   "meetingDetailsTab", 
   "meetingStage" 
]

Anpassen Ihrer statischen Registerkarte in Chats oder Besprechungen

Zum Anpassen Ihrer statischen Registerkartenoberfläche in Chats, Kanälen oder Besprechungen können Sie die setConfig APIs auf der Registerkarte verwenden, um und contentUrlwebsiteUrlzu aktualisieren. Es folgt ein Beispiel:

pages.config.setConfig({ 
  "contentUrl": "https://wwww.contoso.com/teamsapp/thread/" + context.threadId,
   ...}

Nur contentUrl und websiteUrl Änderungen werden für setConfigunterstützt, andere Eigenschaften können für statische Registerkarten nicht geändert werden.

Codebeispiel

Beispielname Beschreibung .NET Node.js Manifest
Registerkarte "Persönlich" Beispiel-App, die eine benutzerdefinierte persönliche Registerkarte mit ASP.NET Kern für Gruppenchat, Kanäle und Besprechungen darstellt. View – View

Nächster Schritt

Erstellen einer Kanal- oder Gruppenregisterkarte

Siehe auch