Inhalte und Unterhaltungen auf einmal mithilfe von RegisterkartenContent and conversations, all at once using tabs

Wichtig

Registerkarten auf mobilen ClientsTabs on Mobile Clients

Befolgten Sie die Anleitungen für Registerkarten auf mobilen Geräten , wenn Sie Ihre Registerkarten erstellen.Follow the guidance for tabs on mobile when creating your tabs. Wenn Ihre Registerkarte die Authentifizierung verwendet, müssen Sie Ihr Microsoft Teams-JavaScript-SDK auf Version 1.4.1 oder höher aktualisieren, oder die Authentifizierung schlägt fehl.If your tab uses authentication, you must upgrade your Teams JavaScript SDK to version 1.4.1 or later, or authentication will fail.

Registerkarten für Kanal/Gruppe (konfigurierbar) auf mobilen Geräten:Channel/group (configurable) tabs on mobile:

  • Mobile Clients zeigen nur konfigurierbare Registerkarten mit einem Wert für an websiteUrl .Mobile clients only show configurable tabs that have a value for websiteUrl. Wenn die Registerkarte auf den mobilen Teams-Clients angezeigt werden soll, müssen Sie den Wert von festlegen websiteUrl .If you want your tab to appear on the Teams mobile clients, you must set the value of websiteUrl.
  • Das standardmäßig geöffnete Verhalten auf mobilen Geräten ist das Öffnen außerhalb von Browser mithilfe von websiteUrl .Default open behavior on mobile is to open outside in browser using the websiteUrl. Wenn Sie für apps, die im öffentlichen APP-Speicher veröffentlicht werden, die Kanal Registerkarte standardmäßig in Microsoft Teams öffnen möchten, befolgten Sie die Anleitungen für Registerkarten auf mobilen Geräten, und wenden Sie sich an Ihren Supportmitarbeiter, um eine weiße Liste zu fordern.For apps published to the public App Store, if you want your channel tab to open inside teams by default, follow the guidance for tabs on mobile, and reach out to your support rep to request to be whitelisted.

Registerkarten sind Ansichtsbilder, die Sie zum Freigeben von Inhalten, halten von Unterhaltungen und Hosten von Drittanbieterdiensten verwenden können, die alle innerhalb des organischen Workflows eines Teams liegen.Tabs are canvases that you can use to share content, hold conversations, and host third-party services, all within a team’s organic workflow. Wenn Sie eine Registerkarte in Microsoft Teams erstellen, wird Ihre Webanwendungs-Front-und-Mitte platziert, wo Sie leicht von wichtigen Unterhaltungen aus zugänglich ist.When you build a tab in Microsoft Teams, it puts your web app front and center where it’s easily accessible from key conversations.

AnleitungenGuidelines

Auf einer Registerkarte "gut" sollten die folgenden Merkmale angezeigt werden:A good tab should display the following characteristics:

Fokussierte FunktionalitätFocused functionality

Registerkarten funktionieren am besten, wenn Sie erstellt werden, um eine bestimmte Anforderung zu erfüllen.Tabs work best when they’re built to address a specific need. Konzentrieren Sie sich auf eine kleine Gruppe von Aufgaben oder eine Teilmenge der Daten, die für den Kanal relevant ist, in dem sich die Registerkarte befindet.Focus on a small set of tasks or a subset of data that’s relevant to the channel the tab is in.

Einfach haltenReduced chrome

Vermeiden Sie es, auf einer Registerkarte mehrere Panels zu erstellen, Navigationsebenen hinzuzufügen oder zu fordern, dass Benutzer auf einer Registerkarte sowohl vertikal als auch horizontal scrollen. Versuchen Sie also, keine Registerkarten auf Ihrer Registerkarte zu haben.Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab. In other words, try not to have tabs in your tab.

IntegrationIntegration

Hier finden Sie Möglichkeiten, Benutzer über die Tab-Aktivität zu informieren, indem Sie einer Unterhaltung Adaptive Karten senden.Find ways to notify users about tab activity by posting adaptive cards to a conversation.

UnterhaltungConversational

Finden Sie eine Möglichkeit, um eine Unterhaltung um eine Registerkarte zu erleichtern. Dadurch wird sichergestellt, dass Unterhaltungen auf dem Inhalt, den Daten oder dem Prozess zur Hand stehen.Find a way to facilitate conversation around a tab. This ensures that conversations center on the content, data, or process at hand.

Optimierter ZugriffStreamlined access

Stellen Sie sicher, dass Sie den richtigen Personen zum richtigen Zeitpunkt Zugriff gewähren.Make sure you’re granting access to the right people at the right time. Wenn Sie Ihren Anmeldeprozess einfach halten, können Sie keine Barrieren für Beiträge und Zusammenarbeit schaffen.Keeping your sign-in process simple will avoid creating barriers to contribution and collaboration.

Reaktionsfähigkeit auf FenstergrößeResponsiveness to window sizing

Teams können in Fenstergrößen so klein wie 720px verwendet werden, damit sichergestellt ist, dass eine Registerkarte in einem kleinen Fenster nutzbar ist, ist genauso wichtig wie die Benutzerfreundlichkeit bei sehr hohen Auflösungen.Teams can be used in window sizes as small as 720px, so making sure that a tab is usable in a small window is just as important as usability at very high resolutions.

Flache NavigationFlat navigation

Wir bitten Entwickler nicht, Ihr gesamtes Portal einer Registerkarte hinzuzufügen. Die relativ flache Navigation hilft dabei, ein einfacheres Unterhaltungs Modell beizubehalten.We ask developers not to add their entire portal to a tab. Keeping the navigation relatively flat helps maintain a simpler conversational model. In anderen Worten handelt es sich bei der Unterhaltung um eine Liste von Dingen, wie beispielsweise Arbeitsaufgaben mit drei abgelagerten Elementen oder um eine einzelne Sache wie eine spec.In other words, the conversation is about a list of things, such as triaged work items, or a single thing, like a spec.

Es gibt inhärente Navigationsprobleme mit der Hierarchie der tiefen Navigation in Thread-Unterhaltungen.There are inherent navigational challenges with deep navigation hierarchy, within threaded conversations. Für eine optimale Benutzerfreundlichkeit sollte die Registerkartennavigation auf ein Minimum reduziert und wie folgt gestaltet werden:For the best user experience, your tab navigation should be kept to a minimum and be designed as follows:

  • Öffnet ein Aufgabenmodul wie eine einzelne Arbeitsaufgabe oder Entität.Opens a task module such as an individual work item or entity. Dies schließt einen vollständigen Chat aus und ist die beste Option, um den Chat speziell für die Registerkarte und nicht für die unter Entitäten oder Bearbeitungs Erfahrungen zu halten.This precludes chat entirely and is the best option to keep chat specifically about the tab and not the sub-entities or editing experiences.
  • Öffnet ein Pseudo Dialogfeld in einem IFRAME.Opens a pseudo dialog in an iframe. Wenn Sie mit einem geschirmten Hintergrund verwendet wird, empfiehlt es sich, die hellere Farbe anstelle der Dunkelheit zu verwenden.If used with a screened background we recommend using the lighter color rather than the dark. Die app-gray-10 at 30% Transparenz funktioniert gut.The app-gray-10 at 30% transparency works well.
  • Öffnet eine Browser Seite.Opens a browser page.

PersönlichkeitPersonality

Ihr Tab-Canvas bietet eine großartige Gelegenheit, Ihre Benutzeroberfläche zu Branden.Your tab canvas presents a great opportunity to brand your experience. Ihr Logo ist ein wichtiger Bestandteil ihrer Identität und ihrer Verbindung mit ihren Benutzern., stellen Sie daher sicher, dass Sie es einschließen:Your logo is an important part of your identity and connection with your users., so be sure to include it:

  • Platzieren Sie Ihr Logo in der linken oder rechten Ecke oder am unteren RandPlace your logo in the left or right corner or along the bottom edge
  • Halten Sie Ihr Logo klein und unaufdringlichKeep your logo small and unobtrusive

Unter Einbeziehung ihrer eigenen Farben und Layouts Twill auch Hilfe bei der Kommunikation Persönlichkeit.Incorporating your own colors and layouts twill also aid in communicating personality.

Tipp

Arbeiten Sie mit unserem visuellen Stil, damit Ihr Dienst sich wie ein Teil von Microsoft Teams anfühlt.Please work with our visual style so your service feels like a part of Teams. Siehezum Beispiel Microsoft Teams-FarbenSee, for example Teams Colors


Registerkarten LayoutsTab layouts

  • Single canvas

    This is one large area where work gets done. OneNote and Wiki follow this pattern. If you have an app that doesn’t separate content into smaller components this would be a good fit.

  • List

    Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu.

  • Column

    Columns are great for workflows that move an item from one column to another to indicate a new status. Consider supporting drag and drop for those scenarios. We recommend using dialogs or inline expansion for detail views.

  • Grid

    Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.


Typen von RegisterkartenTypes of tabs

  • Wiki

  • Planner


Höhe der KonfigurationsseitenConfiguration page height

Wichtig

Im September 2018 wurde die Höhe für die Registerkarten- Konfigurationsseite erhöht, während die Breite unverändert blieb.In September 2018, the height for the tab configuration page was increased while the width remained unchanged. Wenn Ihre APP für die ältere Größe ausgelegt ist, hat Ihre Registerkarten-Konfigurationsseite sehr viele vertikale Leerzeichen.If your app is designed for the older size your tab configuration page will have a great deal of vertical whitespace. Ältere Store-Apps, die von dieser Änderung ausgenommen sind, müssen sich nach der Aktualisierung an Microsoft wenden, um die neuen Dimensionen zu erfüllen.Legacy store apps exempted from this change will need to contact Microsoft after updating to accommodate the new dimensions.

Die Abmessungen der Registerkarten-Konfigurationsseite:The dimensions of the tab configuration page:

sizes for config tabs

Richtlinien für das Seitenformat der RegisterkartenkonfigurationGuidelines for tab configuration page format

  • Stützen Sie die minimale Höhe Ihres Inhaltsbereichs auf der Registerkarte Konfigurationsseite auf Grafikelementen mit fester Höhe.Base the minimum height of your content area of your tab configuration page on fixed-height graphic elements.
  • Berechnen Sie den verfügbaren vertikalen Raum (die Höhe des Inhaltsbereichs auf der Konfigurationsseite) mithilfe von window.innerHeight .Calculate available vertical space (the height of the content area in the configuration page) using window.innerHeight. Dadurch wird die Größe der, in der sich die <iframe> Konfigurationsseite befindet, zurückgegeben, die sich in zukünftigen Versionen ändern kann.This returns the size of the <iframe> in which your configuration page resides, which may change in future releases. Wenn Sie diesen Wert verwenden, wird der Inhalt automatisch an zukünftige Änderungen angepasst.By using this value your content will adjust automatically to future changes.
  • Zuweisen von vertikalem Abstand zu den Elementen der Variablen Höhe minus was für die Elemente mit fester Höhe benötigt wird.Allocate vertical space to the variable-height elements minus what's needed for the fixed-height elements.
  • Für den Anmelde Status vertikal und horizontal zentrieren Sie den Inhalt.For the login state, vertically and horizontally center the content.
  • Wenn Sie ein Hintergrundbild wünschen, benötigen Sie ein neues Bild, das an den Bereich angepasst wird (bevorzugt), oder Sie können das gleiche Bild beibehalten und zwischen folgenden Themen wählen:If you want a background image, you need either a new image, sized to fit the area (preferred), or you can keep the same image and choose between:
    • Ausrichtung an der oberen linken Ecke.aligning to the upper left hand corner.
    • Skalieren des Bilds an die Größescaling the image to fit.

Bei ordnungsgemäßer Größe sollte Ihre Registerkarten-Konfigurationsseite wie folgt aussehen:When properly sized, your tab configuration page should look similar to this:

<img width="450px" title="Neue Registerkarte "Konfiguration"" src="~/assets/images/tabs/config-dialog-Contoso.png" alt="new config tab"/>

Bewährte MethodenBest practices

Immer einen Standardzustand einschließenAlways include a default state

Schließen Sie einen Standardzustand ein, um das Einrichten von Registerkarten zu vereinfachen, auch wenn die Registerkarte konfigurierbar ist.Include a default state to make tabs easy to set up even if your tab is configurable.

Deep-VerknüpfungDeep linking

Wann immer möglich, sollten Karten und Bots einen tiefen Link zu umfangreicheren Daten in einer gehosteten RegisterkarteErstellen. Beispielsweise kann eine Karte eine Zusammenfassung der Fehlerdaten anzeigen, aber durch Klicken darauf kann der gesamte Fehler in einer Registerkarte angezeigt werden.Whenever possible, cards and bots should deep link to richer data in a hosted tab. For example, a card may show a summary of bug data, but clicking it can shows the entire bug in a tab.

BenennungsNaming

In vielen Fällen wird der Name Ihrer APP zu einem großen Registerkartennamen.In many cases, the name of your app will make a great tab name. Sie sollten Ihre Registerkarten jedoch auch entsprechend der von Ihnen bereitgestellten Funktionen benennen.But, also consider naming your tabs according to the functionality they provide.

Benachrichtigungen für RegisterkartenNotifications for tabs

Es gibt zwei Benachrichtigungs Modi für Änderungen an Registerkarten Inhalten:There are two modes of notification for tab content changes:

  • Verwenden Sie die APP-API, um Benutzer über Änderungen zu informieren.Use the app api to notify users of changes. Diese Meldung wird im Aktivitätsfeed des Benutzers und im Deep-Link zur Registerkarte angezeigt. Weitere Informationen finden Sie unter Erstellen von Deep Links zu Inhalten und Features in Microsoft TeamsThis message will show up in the user’s activity feed and deep link to the tab. See Create deep links to content and features in Microsoft Teams
  • Verwenden Sie einen bot.Use a bot. Diese Methode wird vor allem bevorzugt, wenn der Tab-Thread gezielt ist.This method is preferred especially if the Tab thread is targeted. Das Ergebnis ist, dass die Thread-Unterhaltung der Registerkarte als kürzlich aktiviert in die Ansicht verschoben wird.The result will be that the tab’s threaded conversation will be moved into view as recently active. Diese Methode ermöglicht auch eine gewisse Raffinesse in der Art und Weise, wie die Benachrichtigung gesendet wird.This method also allows for some sophistication in how the notification is sent.

Durch das Senden einer Nachricht an einen Tab-Thread wird das Bewusstsein der Aktivität für alle Benutzer erhöht, ohne dass alle Personen explizit benachrichtigt werden.Sending a message to a tab thread increases the awareness of activity to all users without explicitly notifying everyone. Dies ist die Sensibilisierung ohne Rauschen.This is awareness without noise. Darüber hinaus @mention wird bei bestimmten Benutzern die gleiche Benachrichtigung in Ihren Feed eingefügt, indem Sie Sie direkt mit dem Tab-Thread verbindet.In addition, when you @mention specific users the same notification will be placed in their feed, deep linking them to the tab thread directly.