Share via

Erstellen einer Inhaltsseite

  • Artikel

Die Inhaltsseite ist die Webseite auf Basisebene, die im Microsoft Teams-Client gerendert wird, auf der ein Entwickler den Inhalt einer Registerkarte hinzufügen kann. Damit können Sie Ihre Webinhalte nahtlos in den Teams-Client integrieren und so eine immersivere und ansprechendere Umgebung für Benutzer schaffen. Für instance können Sie Inhaltsseiten verwenden, um benutzerdefinierte Daten anzuzeigen, Dienste von Drittanbietern zu integrieren oder eine persönlichere Benutzererfahrung zu erstellen. Eine Inhaltsseite ist erforderlich, um eine der folgenden Registerkarten zu erstellen:

  • Eine benutzerdefinierte Registerkarte mit persönlichem Bereich: In diesem Fall ist die Inhaltsseite die erste Seite, auf die der Benutzer stößt.
  • Eine benutzerdefinierte Kanal- oder Gruppenregisterkarte: Die Inhaltsseite wird angezeigt, nachdem der Benutzer die Registerkarte angeheftet und im entsprechenden Kontext konfiguriert hat.
  • Ein Dialogfeld: Sie können eine Inhaltsseite erstellen und als Webansicht in einen Dialog einbetten (in TeamsJS v1.x als Aufgabenmodul bezeichnet). Die Seite wird innerhalb des modale Popupfensters gerendert.

Wenn Sie Ihre Registerkarte innerhalb eines Kanals oder einer Gruppe oder eines persönlichen Bereichs hinzufügen müssen, präsentieren Sie eine HTML-Inhaltsseite auf Der Registerkarte. Bei statischen Registerkarten wird die Inhalts-URL direkt in Ihrem App-Manifest festgelegt.

Dieser Artikel bezieht sich speziell auf die Verwendung von Inhaltsseiten als Registerkarten. Die meisten der hier aufgeführten Anleitungen gelten jedoch unabhängig davon, wie die Inhaltsseite dem Benutzer präsentiert wird.

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.

Registerkarteninhalt und Entwurfsrichtlinien

Das allgemeine Ziel Ihrer Registerkarte besteht darin, Zugriff auf aussagekräftige und ansprechende Inhalte zu ermöglichen, die einen praktischen Wert und einen klaren Zweck haben.

Sie müssen sich darauf konzentrieren, Ihr Registerkartendesign sauber, intuitive Navigation und immersive Inhalte zu gestalten. Weitere Informationen finden Sie unter Richtlinien zum Entwerfen von Registerkarten und Microsoft Teams Store-Validierungsrichtlinien.

Integrieren Ihres Codes in Teams

Um Ihre Seite in Teams anzuzeigen, müssen Sie die Microsoft Teams JavaScript-Clientbibliothek (TeamsJS) in Ihren Code einschließen und aufrufen app.initialize() , nachdem Ihre Seite geladen wurde.

Hinweis

Es dauert fast 24 bis 48 Stunden, bis alle Inhalts- oder UI-Änderungen aufgrund des Caches in der Registerkarten-App widergespiegelt werden.

Der folgende Code ist ein Beispiel dafür, wie Ihre Seite und der Teams-Client kommunizieren:

<!DOCTYPE html>
<html>
<head>
...
    <script src="https://res.cdn.office.net/teams-js/2.2.0/js/MicrosoftTeams.min.js" 
      integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
      crossorigin="anonymous" >
    </script>
    <script>
    // Initialize the library
    await microsoftTeams.app.initialize();
    </script>
</head>
<body>
...<h1>Personal Tab</h1>
  <p><img src="/assets/icon.png"></p>
  <p>This is your personal tab!</p>
</body>
</html>

Weitere Informationen zum Erstellen und Hinzufügen einer Inhaltsseite zu einer persönlichen Registerkarte finden Sie unter Hinzufügen einer Inhaltsseite zur persönlichen Registerkarte.

Die folgenden Abbildungen zeigen die Konfiguration einer HTML-Inhaltsseite und die Ausgabe der Inhaltsseite auf der Registerkarte:

Konfiguration der Inhaltsseite

Screenshot: HTML-Inhaltsseite in Visual Studio

Ausgabe im Web

Screenshot: Ausgabe der Inhaltsseite im Web

Ausgabe auf registerkarte

Screenshot: Ausgabe der Inhaltsseite auf der Registerkarte

Zugriff auf zusätzliche Inhalte

Sie können auf zusätzliche Inhalte zugreifen, indem Sie teamsJS verwenden, um mit Teams zu interagieren, Deep-Links zu erstellen, Dialoge zu verwenden und zu überprüfen, ob URL-Domänen im validDomains Array enthalten sind.

  • Verwenden von TeamsJS für die Interaktion mit Teams: Die Microsoft Teams JavaScript-Clientbibliothek bietet viele weitere Funktionen, die Sie beim Entwickeln Ihrer Inhaltsseite nützlich finden können.

  • Deep-Links: Sie können Deep-Links zu Entitäten in Teams erstellen. Sie werden verwendet, um Links zu erstellen, die zu Inhalten und Informationen auf Ihrer Registerkarte navigieren. Weitere Informationen finden Sie unter Erstellen von Deep-Links zu Inhalten und Features in Teams.

  • Dialoge: Ein Dialogfeld ist eine modale Popupfunktion, die Sie über die Registerkarte auslösen können. Verwenden Sie Dialogfelder auf einer Inhaltsseite, um Formulare zum Sammeln zusätzlicher Informationen, zum Anzeigen der Details eines Elements in einer Liste oder zum Präsentieren zusätzlicher Informationen für den Benutzer anzuzeigen. Die Dialoge selbst können zusätzliche Inhaltsseiten sein oder vollständig mit adaptiven Karten erstellt werden. Weitere Informationen finden Sie unter Verwenden von Dialogfeldern in Registerkarten.

  • Gültige Domänen: Stellen Sie sicher, dass alle URL-Domänen, die validDomains in Ihren Registerkarten verwendet werden, im Array ihres App-Manifests enthalten sind. Weitere Informationen finden Sie unter validDomains.

Hinweis

Die Kernfunktionalität Ihrer Registerkarte ist innerhalb von Teams und nicht außerhalb von Teams vorhanden.

Anzeigen eines nativen Ladeindikators

Sie können einen nativen Ladeindikator konfigurieren und auf einer Registerkarte anzeigen. Sie können einen nativen Ladeindikator ab Manifestschema v1.7 bereitstellen. Beispielsweise Registerkarteninhaltsseite, Konfigurationsseite, Entfernungsseite und Dialogfelder in Registerkarten.

Hinweis

Das Verhalten auf mobilen Clients kann nicht über die Eigenschaft des nativen Ladeindikators konfiguriert werden. Mobile Clients zeigen diesen Indikator standardmäßig auf Inhaltsseiten und iframebasierten Dialogen an. Dieser Indikator wird auf Mobilgeräten angezeigt, wenn eine Anforderung zum Abrufen von Inhalten gestellt wird und verworfen wird, sobald die Anforderung abgeschlossen ist.

Wenn Sie in Ihrem App-Manifest angeben showLoadingIndicator : true , müssen alle Registerkartenkonfigurationen, Inhalte, Entfernungsseiten und alle iframe-basierten Dialoge die folgenden Schritte ausführen:

Führen Sie die folgenden Schritte aus, um den Indikator für natives Laden anzuzeigen:

  1. Fügen Sie "showLoadingIndicator": true Ihrem App-Manifest hinzu.

  2. Aufrufen von app.initialize();

  3. Rufen Sie app.notifySuccess() alle iframe-basierten Inhalte auf, um Teams zu benachrichtigen, dass Ihre App erfolgreich geladen wurde. Falls zutreffend, blendet Teams den Ladeindikator aus. Wenn notifySuccess nicht innerhalb von 30 Sekunden aufgerufen wird, geht Teams davon aus, dass für Ihre App ein Timeout aufgetreten ist, und zeigt einen Fehlerbildschirm mit einer Wiederholungsoption an. Für App-Updates gilt dieser Schritt für bereits konfigurierte Registerkarten. Wenn Sie diesen Schritt nicht ausführen, wird für die vorhandenen Benutzer ein Fehlerbildschirm angezeigt. [Obligatorisch]

  4. Wenn Sie bereit sind, auf dem Bildschirm zu drucken und den restlichen Inhalt Ihrer Anwendung verzögert laden möchten, können Sie den Ladeindikator manuell ausblenden, indem Sie aufrufen app.notifyAppLoaded();. [Optional]

  5. Wenn Ihre Anwendung nicht geladen wird, können Sie aufrufen app.notifyFailure({reason: app.FailedReason.Timeout, message: "failure message"}); , um Teams über den Fehler zu informieren. Die message -Eigenschaft wird derzeit nicht verwendet, daher wird die Fehlermeldung nicht auf der Benutzeroberfläche angezeigt, und dem Benutzer wird ein allgemeiner Fehlerbildschirm angezeigt. Der folgende Code zeigt die -Enumeration, die die möglichen Gründe definiert, die Sie für den Fehler beim Laden der Anwendung angeben können:

    /* List of failure reasons */
export const enum FailedReason {
    AuthFailed = "AuthFailed",
    Timeout = "Timeout",
    Other = "Other"
}

Nächster Schritt

Erstellen einer Konfigurationsseite

Siehe auch