Erstellen einer Inhaltsseite

  • Artikel

Eine Inhaltsseite ist eine Webseite, die im Teams-Client gerendert wird, der Teil von:

  • 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 Aufgabenmodul: Sie können eine Inhaltsseite erstellen und als Webansicht in ein Aufgabenmodul einbetten. Die Seite wird innerhalb des modale Popupfensters gerendert.

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, Den Zugriff auf die sinnvollen und ansprechenden Inhalte zu ermöglichen, die einen praktischen Wert und einen offensichtlichen 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 Richtlinien zur Überprüfung des Microsoft Teams-Stores.

Integrieren Ihres Codes in Teams

Damit Ihre Seite in Teams angezeigt werden kann, müssen Sie die Microsoft Teams JavaScript-Clientbibliothek einschließen und einen Aufruf von einschließen, 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 enthält 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>
...
</head>
<body>
...
    <script>
    microsoftTeams.app.initialize();
    </script>
...
</body>

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, Aufgabenmodule 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 Teams-Client-JavaScript-Bibliothek bietet viele weitere Funktionen, die Sie beim Entwickeln Ihrer Inhaltsseite nützlich finden können.

Sie können Deeplinks 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.

Aufgabenmodule

Ein Aufgabenmodul ist eine modale Popupfunktion, die Sie über Ihre Registerkarte auslösen können. Verwenden Sie auf einer Inhaltsseite Aufgabenmodule, 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 darzustellen. Die Aufgabenmodule selbst können zusätzliche Inhaltsseiten sein oder vollständig mit adaptiven Karten erstellt werden. Weitere Informationen finden Sie unter Verwenden von Aufgabenmodulen in Registerkarten.

Gültige Domänen

Stellen Sie sicher, dass alle URL-Domänen, die validDomains in Ihren Registerkarten verwendet werden, im Array in Ihrem Manifest enthalten sind. Weitere Informationen finden Sie unter validDomains in der Manifestschemareferenz.

Hinweis

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

Anzeigen eines nativen Ladeindikators

Ab Manifestschema v1.7 können Sie einen nativen Ladeindikator bereitstellen. Beispielsweise Registerkarteninhaltsseite, Konfigurationsseite, Entfernungsseite und Aufgabenmodule 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 iFrame-basierten Aufgabenmodulen 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 Aufgabenmodule die folgenden Schritte ausführen:

So zeigen Sie den Ladeindikator an:

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

  2. Aufrufen von app.initialize();

  3. Rufen Sie app.notifySuccess() als obligatorischen Schritt auf, um Teams zu benachrichtigen, dass Ihre App erfolgreich geladen wurde. Anschließend blendet Teams ggf. 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 es wird ein Fehlerbildschirm mit einer Wiederholungsoption angezeigt.

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

  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