Qu’est-ce que les onglets personnalisés de Microsoft teams ?What are Microsoft Teams custom tabs?

Les onglets sont des pages Web intégrant des équipes dans Microsoft Teams.Tabs are Teams-aware webpages embedded in Microsoft Teams. Il s’agit de simples iframes qui pointent vers des domaines déclarés dans le manifeste de l’application et peuvent être ajoutés dans le cadre d’un canal à l’intérieur d’une équipe, d’une conversation de groupe ou d’une application personnelle pour un utilisateur individuel.They are simple iframes that point to domains declared in the app manifest and can be added as part of a channel inside a team, a group chat, or as a personal app for an individual user. Vous pouvez inclure des onglets personnalisés avec votre application pour incorporer votre propre contenu Web dans teams et ajouter une fonctionnalité propre à teams à votre contenu Web.You can include custom tabs with your app to embed your own web content in Teams and add Teams-specific functionality to your web content. Voir teams JavaScript Client SDK.See Teams JavaScript client SDK.

Notes

Chrome 80, planifié pour la publication au début 2020, introduit de nouvelles valeurs de cookie et impose des stratégies de cookies par défaut.Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. Il est recommandé de définir l’utilisation prévue pour vos cookies au lieu de vous appuyer sur le comportement par défaut du navigateur.It's recommended that you set the intended use for your cookies rather than rely on default browser behavior. Voir SameSite cookie Attribute (mise à jour 2020).See SameSite cookie attribute (2020 update).

Il existe deux types d’onglets disponibles dans teams Channel/Group et Personal.There are two types of tabs available in Teams - channel/group and personal. Un onglet de canal/groupe fournit du contenu à des canaux et des conversations de groupe, et constitue un excellent moyen de créer des espaces de collaboration sur le contenu Web dédié.A channel/group tab delivers content to channels and group chats, and are a great way to create collaborative spaces around dedicated web-based content. Les onglets personnels, ainsi que les robots d’étendue personnelle, font partie des applications personnelles et sont étendus à un seul utilisateur.Personal tabs, along with personally-scoped bots, are part of personal apps and are scoped to a single user. Ils peuvent être épinglés dans la barre de navigation de gauche pour faciliter l’accès.They can be pinned to the left navigation bar for easy access.

Fonctionnalités d’onglet plus petites connuesLesser known tab features

  • Si un onglet est ajouté à une application qui a également un bot, le bot est également ajouté à l’équipe.If a tab is added to an app that also has a bot, the bot is added to the team as well.
  • Sensibilisation de l’ID AAD de l’utilisateur actuel.Awareness of AAD ID of the current user.
  • Détection des paramètres régionaux de l’utilisateur pour indiquer la langue, c’est-à-dire en-us .Locale awareness for the user to indicate language, i.e., en-us.
  • Fonctionnalité SSO, si prise en charge.SSO capability, if supported.
  • Possibilité d’utiliser des robots ou des notifications d’application pour établir un lien profond vers l’onglet ou une sous-entité au sein du service, par exemple un élément de travail individuel.Ability to use bots or app notifications to deep link to the tab or to a sub-entity within the service, e.g., an individual work item.
  • Possibilité d’ouvrir un module de tâches à partir de liens dans un onglet.The ability to open a Task module from links within a tab.
  • Réutilisation des composants WebPart SharePoint dans l’onglet.Reuse of SharePoint web parts within the tab.

Scénarios utilisateur ongletsTabs user scenarios

Scénario : Ajoutez une ressource Web existante dans Teams.Scenario: Bring an existing web-based resource inside Teams.
Exemple : Vous créez un onglet personnel dans votre application de teams qui présente un site Web d’information d’entreprise aux utilisateurs.Example: You create a personal tab in your Teams app that presents an informational corporate website to users.

Scénario : Ajouter des pages de prise en charge à un bot de teams ou à une extension de messagerie.Scenario: Add support pages to a Teams bot or messaging extension.
Exemple : Vous créez des onglets personnels qui fournissent du contenu de pages Web à des utilisateurs.Example: You create personal tabs that provide about and help webpage content to users.

Scénario : Fournir un accès aux éléments avec lesquels vos utilisateurs interagissent régulièrement pour la collaboration et le dialogue de coopération.Scenario: Provide access to items that your users interact with regularly for cooperative dialogue and collaboration.
Exemple : Vous créez un onglet de canal/groupe avec un lien détaillé vers des éléments individuels.Example: You create a channel/group tab with deep linking to individual items.

Fonctionnement des ongletsHow do tabs work?

Un onglet personnalisé est déclaré dans le manifeste de l’application de votre package d’application.A custom tab is declared in the app manifest of your app package. Pour chaque page Web que vous souhaitez inclure sous la forme d’un onglet dans votre application, vous définissez une URL et une étendue.For each webpage you want included as a tab in your app you define a URL and a scope. En outre, vous devez ajouter le Kit de développement logiciel (SDK) du client JavaScript teams à votre page et appeler microsoftTeams.initialize() après le chargement de votre page.Additionally, you need to add the Teams JavaScript client SDK to your page, and call microsoftTeams.initialize() after your page loads. Cette opération permettra à teams d’afficher votre page, vous donne accès à des informations spécifiques à Teams (par exemple, si le client teams exécute le thème sombre) et vous permet d’agir en fonction des résultats.Doing so will tell Teams to display your page, give you access to Teams-specific information (for example if the Teams client is running the Dark Theme), and allow you to take action based on the results.

Que vous choisissiez d’exposer votre onglet au sein de la chaîne/du groupe ou de l’étendue personnelle, vous devrez présenter une page de contenu html iframe dans votre onglet. Pour les onglets personnels, l’URL de contenu est définie directement dans votre manifeste par la contentUrl propriété dans le staticTabs tableau.Whether you choose to expose your tab within the channel/group or personal scope, you'll need to present an IFramed HTML content page in your tab. For personal tabs, the content URL is set directly in your manifest by the contentUrl property in the staticTabs array. Le contenu de votre onglet sera le même pour tous les utilisateurs.Your tab's content will be the same for all users.

Pour les onglets canal/groupe, vous devez également créer une page de configuration supplémentaire qui permet aux utilisateurs de configurer votre URL de page de contenu, généralement à l’aide des paramètres de chaîne de requête d’URL pour charger le contenu approprié pour ce contexte.For channel/group tabs, you also need to create an additional configuration page that allows your users to configure your content page URL, typically by using URL query string parameters to load the appropriate content for that context. Cela est dû au fait que votre onglet de canal/groupe peut être ajouté à plusieurs équipes ou conversations de groupe différentes.This is because your channel/group tab can be added to multiple different teams or group chats. Lors de chaque installation suivante, vos utilisateurs peuvent configurer l’onglet, ce qui vous permet de personnaliser l’expérience en fonction de vos besoins.On each subsequent install, your users will be able to configure the tab allowing you to tailor the experience as needed. Lorsque les utilisateurs ajoutent un onglet ou configurent un onglet, une URL est associée à l’onglet présenté dans l’interface utilisateur de teams.When users add a tab or configure a tab, a URL is being associated with the tab that is presented in the Teams UI. La configuration d’un onglet consiste simplement à ajouter des paramètres supplémentaires à cette URL.Configuring a tab is simply adding additional parameters to that URL. Par exemple, lorsque vous ajoutez l’onglet de la carte DevOps Azure, la page Configuration vous permet de choisir la carte chargée par l’onglet.For example, when you add the Azure DevOps board tab the configuration page allows you to choose which board the tab will load. L’URL de la page de configuration est spécifiée par la configurationUrl propriété dans le configurableTabs tableau dans le manifeste de votre application.The configuration page URL is specified by the configurationUrl property in the configurableTabs array in your app manifest.

Vous pouvez disposer d’un (1) onglet de canal/groupe et jusqu’à seize (16) d’onglets personnels par application.You can have a maximum of one (1) channel/group tab and up to sixteen (16) personal tabs per app.

Clients mobilesMobile clients

Si vous choisissez d’afficher l’onglet canal/groupe sur les clients mobiles Teams, la setSettings() configuration doit avoir une valeur pour la websiteUrl propriété.If you choose to have your channel/group tab appear on Teams mobile clients, the setSettings() configuration must have a value for the websiteUrl property. Pour garantir une expérience utilisateur optimale, suivez les instructions pour les onglets sur mobile lors de la création des onglets.To ensure optimal user experience, you should follow the guidance for tabs on mobile when creating your tabs.