Mettre en forme des cartes dans Microsoft Teams

Voici les deux façons d’ajouter une mise en forme de texte enrichi à vos cartes :

Les cartes prennent uniquement en charge la mise en forme dans la propriété de texte, et non dans les propriétés de titre ou de sous-titre. La mise en forme peut être spécifiée à l’aide d’un sous-ensemble de mise en forme XML ou HTML ou Markdown, selon le type de carte. Pour le développement actuel et futur de Cartes adaptatives, la mise en forme Markdown est recommandée.

La prise en charge de la mise en forme diffère d’un type de carte à l’autre. Le rendu de la carte peut différer légèrement entre le bureau et les clients Microsoft Teams mobiles, ainsi que Teams dans le navigateur de bureau.

Vous pouvez inclure une image incluse avec n’importe quelle carte Teams. Les images peuvent être mises en forme en tant que fichiers .png, .jpgou .gif et ne doivent pas dépasser 1 024 x 1 024 px ou 1 Mo. Le GIF animé n’est pas pris en charge. Pour plus d’informations, consultez types de cartes.

Vous pouvez mettre en forme Cartes adaptatives et les cartes connecteur Office 365 avec Markdown qui incluent certains styles pris en charge.

Mettre en forme des cartes avec Markdown

Les types de cartes suivants prennent en charge la mise en forme Markdown dans Teams :

  • Cartes adaptatives : Markdown est pris en charge dans le champ Textblock carte adaptative, ainsi que Fact.Title et Fact.Value. HTML n’est pas pris en charge dans Cartes adaptatives.
  • Cartes de connecteur Office 365 : Markdown et HTML limité sont pris en charge dans les cartes connecteur Office 365 dans les champs de texte.

Vous pouvez utiliser des sauts de ligne pour Cartes adaptatives à l’aide de séquences d’échappement \r ou \n pour les sauts de ligne dans les listes. La mise en forme est différente entre le bureau et les versions mobiles de Teams pour Cartes adaptatives. Les mentions basées sur des cartes sont prises en charge dans les clients web, de bureau et mobiles. Vous pouvez utiliser la propriété de masquage des informations pour masquer des informations spécifiques, telles que le mot de passe ou les informations sensibles des utilisateurs dans l’élément d’entrée Input.Text carte adaptative. Vous pouvez développer la largeur d’une carte adaptative à l’aide de l’objet width . Vous pouvez activer la prise en charge de typeahead dans Cartes adaptatives et filtrer l’ensemble des choix d’entrée à mesure que l’utilisateur tape l’entrée. Vous pouvez utiliser la propriété msteams pour ajouter la possibilité d’afficher des images en mode intermédiaire de manière sélective.

La mise en forme est différente entre le bureau et les versions mobiles de Teams pour les cartes de Cartes adaptatives et de connecteur. Dans cette section, vous pouvez consulter l’exemple de format Markdown pour Cartes adaptatives et les cartes de connecteur.

Le tableau suivant fournit les styles pris en charge pour Textblock, Fact.Titleet Fact.Value:

Style Exemple Markdown
Gras Bold **Bold**
Italic Italic _Italic_
Liste non triée
  • text
  • text
- Item 1\r- Item 2\r- Item 3
Liste triée
  1. text
  2. text
1. Green\r2. Orange\r3. Blue
Liens hypertexte Bing [Title](url)

Les balises Markdown suivantes ne sont pas prises en charge :

  • En-têtes
  • Tables
  • Des images
  • Texte préformaté
  • Blocs de guillemets

Sauts de ligne pour Cartes adaptatives

Vous pouvez utiliser les séquences d’échappement \r ou \n pour les sauts de ligne dans les listes. L’utilisation de \n\n dans les listes entraîne la mise en retrait de l’élément suivant dans la liste. Si vous avez besoin de sauts de ligne ailleurs dans TextBlock, utilisez \n\n.

Différences entre les appareils mobiles et les ordinateurs de bureau pour les Cartes adaptatives

Sur le bureau, la mise en forme du markdown de carte adaptative s’affiche comme indiqué dans l’image suivante dans les navigateurs web et dans l’application cliente Teams :

Mise en forme markdown de carte adaptative dans le client de bureau

Sur iOS, la mise en forme markdown de carte adaptative s’affiche comme illustré dans l’image suivante :

Mise en forme markdown de carte adaptative dans iOS

Sur Android, la mise en forme markdown de carte adaptative s’affiche comme indiqué dans l’image suivante :

Mise en forme markdown de carte adaptative dans Android

Pour plus d’informations, consultez fonctionnalités de texte dans Cartes adaptatives.

Notes

Les fonctionnalités de date et de localisation mentionnées dans cette section ne sont pas prises en charge dans Teams.

Eexemple de format Cartes adaptatives

Le code suivant montre un exemple de mise en forme Cartes adaptatives :

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "This is some **bold** text"
        },
        {
            "type": "TextBlock",
            "text": "This is some _italic_ text"
        },
        {
            "type": "TextBlock",
            "text": "- Bullet \r- List \r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "1. Numbered\r2. List\r",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Check out [Adaptive Cards](https://adaptivecards.io)"
        }
    ]
}

Mentionner la prise en charge dans Cartes adaptatives

Vous pouvez ajouter @mentions dans un corps de carte adaptative pour les bots et les réponses d’extension de messagerie. Pour ajouter @mentions dans les cartes, suivez la même logique de notification et de rendu que celle des mentions de basées sur les messages dans les conversations de canal et de groupe.

Les bots et les extensions de messagerie peuvent inclure des mentions dans le contenu de la carte dans éléments TextBlock et FactSet .

Notes

  • éléments multimédias ne sont actuellement pas pris en charge dans Cartes adaptatives sur la plateforme Teams.
  • Les mentions de canal et d’équipe ne sont pas prises en charge dans les messages de bot.

Pour inclure une mention dans une carte adaptative, votre application doit inclure les éléments suivants :

  • <at>username</at> dans les éléments de carte adaptative pris en charge.
  • L’objet mention à l’intérieur d’une propriété msteams dans le contenu de la carte inclut l’ID d’utilisateur Teams de l’utilisateur mentionné.
  • Le userId est propre à votre ID de bot et à un utilisateur particulier. Il peut être utilisé pour @mention un utilisateur particulier. La userId peut être récupérée à l’aide de l’une des options mentionnées dans obtenir l’ID utilisateur.

Exemple de carte adaptative avec mention

Le code suivant montre un exemple de carte adaptative avec une mention :

{
  "contentType": "application/vnd.microsoft.card.adaptive",
  "content": {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi <at>John Doe</at>"
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0",
    "msteams": {
      "entities": [
        {
          "type": "mention",
          "text": "<at>John Doe</at>",
          "mentioned": {
            "id": "29:123124124124",
            "name": "John Doe"
          }
        }
      ]
    }
  }
}

ID d’objet Azure AD et UPN dans la mention utilisateur

La plateforme Teams permet de mentionner des utilisateurs avec leur ID d’objet Azure AD et leur nom d’utilisateur principal (UPN), en plus des ID de mention existants. Les bots avec Cartes adaptatives et connecteurs avec des webhooks entrants prennent en charge les deux ID de mention utilisateur.

Le tableau suivant décrit les ID de mention utilisateur qui viennent d’être pris en charge :

Id Fonctionnalités de prise en charge Description Exemple
ID d’objet Azure AD Bot, Connecteur ID d’objet de l’utilisateur Azure AD 49c4641c-ab91-4248-aebb-6a7de286397b
UPN Bot, Connecteur UPN de l’utilisateur Azure AD john.smith@microsoft.com

Mention utilisateur dans les bots avec Cartes adaptatives

Les bots prennent en charge la mention utilisateur avec l’ID d’objet Azure AD et l’UPN, en plus des ID existants. La prise en charge de deux nouveaux ID est disponible dans les bots pour les sms, le corps Cartes adaptatives et la réponse d’extension de messagerie. Les bots prennent en charge les ID de mention dans les scénarios de conversation et de invoke . L’utilisateur reçoit une notification de flux d’activité lorsqu’il est @mentioned avec les ID.

Notes

La mise à jour du schéma et les modifications de l’interface utilisateur/de l’expérience utilisateur ne sont pas nécessaires pour les mentions utilisateur avec Cartes adaptatives dans bot.

Exemple

Exemple de mention utilisateur dans les bots avec Cartes adaptatives comme suit :

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>Adele UPN</at>, <at>Adele Azure AD</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Azure AD</at>",
        "mentioned": {
          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
          "name": "Adele Vance"
        }
      }
    ]
  }
}

L’image suivante illustre la mention utilisateur avec la carte adaptative dans bot :

Mention utilisateur dans le bot avec carte adaptative

Mention utilisateur dans le webhook entrant avec Cartes adaptatives

Les webhooks entrants commencent à prendre en charge la mention utilisateur dans Cartes adaptatives avec l’ID d’objet Azure AD et l’UPN.

Notes

  • Activez la mention utilisateur dans le schéma des webhooks entrants pour prendre en charge Azure AD’ID d’objet et l’UPN.
  • Les modifications de l’interface utilisateur/expérience utilisateur ne sont pas requises pour les mentions utilisateur avec Azure AD’ID d’objet et l’UPN.
Exemple

Exemple de mention utilisateur dans le webhook entrant comme suit :

{
    "type": "message",
    "attachments": [
        {
        "contentType": "application/vnd.microsoft.card.adaptive",
        "content": {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "TextBlock",
                    "size": "Medium",
                    "weight": "Bolder",
                    "text": "Sample Adaptive Card with User Mention"
                },
                {
                    "type": "TextBlock",
                    "text": "Hi <at>Adele UPN</at>, <at>Adele Azure AD</at>"
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.0",
            "msteams": {
                "entities": [
                    {
                        "type": "mention",
                        "text": "<at>Adele UPN</at>",
                        "mentioned": {
                          "id": "AdeleV@contoso.onmicrosoft.com",
                          "name": "Adele Vance"
                        }
                      },
                      {
                        "type": "mention",
                        "text": "<at>Adele Azure AD</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

L’image suivante illustre la mention de l’utilisateur dans le webhook entrant :

Mention utilisateur dans le webhook entrant

Masquage des informations dans Cartes adaptatives

Utilisez la propriété de masquage des informations pour masquer des informations spécifiques, telles que le mot de passe ou les informations sensibles des utilisateurs dans l’élément d’entrée Input.Text carte adaptative.

Notes

La fonctionnalité prend uniquement en charge le masquage des informations côté client. Le texte d’entrée masqué est envoyé en tant que texte clair à l’adresse du point de terminaison HTTPS qui a été spécifiée pendant configuration du bot.

Pour masquer les informations dans Cartes adaptatives, ajoutez la propriété style à typeinput.textet définissez sa valeur sur mot de passe.

Exemple de carte adaptative avec propriété de masquage

Le code suivant montre un exemple de carte adaptative avec propriété de masquage :

{
    "type": "Input.Text",
    "id": "secretThing",
    "style": "password",
},

L’image suivante est un exemple d’informations de masquage dans Cartes adaptatives :

Image des informations de masquage

Carte adaptative pleine largeur

Vous pouvez utiliser la propriété msteams pour étendre la largeur d’une carte adaptative et utiliser de l’espace canevas supplémentaire. La section suivante fournit des informations sur l’utilisation de la propriété.

Construire des cartes pleine largeur

Pour créer une carte adaptative de pleine largeur, l’objet width dans msteams propriété dans le contenu de la carte doit être défini sur Full.

Exemple de carte adaptative avec pleine largeur

Pour créer une carte adaptative pleine largeur, votre application doit inclure les éléments de l’exemple de code suivant :

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

L’image suivante montre une carte adaptative pleine largeur :

Vue Carte adaptative pleine largeur

L’image suivante montre l’affichage par défaut de la carte adaptative lorsque vous n’avez pas défini la propriété width sur Complète :

Vue Carte adaptative à petite largeur

Prise en charge de Typeahead

Dans l’élément de schéma Input.Choiceset, demander aux utilisateurs de filtrer et de sélectionner un nombre important de choix peut ralentir considérablement l’achèvement des tâches. La prise en charge de typeahead dans Cartes adaptatives peut simplifier la sélection d’entrée en limitant ou en filtrant l’ensemble des choix d’entrée à mesure que l’utilisateur tape l’entrée.

Pour activer typeahead dans le Input.Choiceset, définissez style sur filtered et vérifiez que isMultiSelect est défini sur false.

Exemple de carte adaptative avec prise en charge de typeahead

Le code suivant montre un exemple de carte adaptative avec prise en charge de typeahead :

{
   "type": "Input.ChoiceSet",
   "label": "Select a user",
   "isMultiSelect": false,
   "choices":  [
      { "title": "User 1", "value": "User1" },
      { "title": "User 2", "value": "User2" }
    ],
   "style": "filtered"
}

Vue intermédiaire pour les images dans Cartes adaptatives

Dans une carte adaptative, vous pouvez utiliser la propriété msteams pour ajouter la possibilité d’afficher des images en mode intermédiaire de manière sélective. Lorsque les utilisateurs pointent sur les images, ils peuvent voir une icône développer, pour laquelle l’attribut allowExpand est défini sur true. Pour plus d’informations sur l’utilisation de la propriété, consultez l’exemple suivant :

{
    "type": "AdaptiveCard",
     "body": [
          {
            "type": "Image",
            "url": "https://picsum.photos/200/200?image=110",
            "msTeams": {
              "allowExpand": true
            }
          }
     ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

Lorsque les utilisateurs pointent sur l’image, une icône développer apparaît dans le coin supérieur droit, comme illustré dans l’image suivante :

Carte adaptative avec image extensible

L’image s’affiche en mode intermédiaire lorsque l’utilisateur sélectionne l’icône développer, comme illustré dans l’image suivante :

Image développée en mode Intermédiaire

Dans l’affichage intermédiaire, les utilisateurs peuvent effectuer un zoom avant et un zoom arrière sur l’image. Vous pouvez sélectionner les images de votre carte adaptative qui doivent avoir cette fonctionnalité.

Notes

  • La fonctionnalité de zoom avant et de zoom arrière s’applique uniquement aux éléments d’image qui sont du type d’image dans une carte adaptative.
  • Pour les applications mobiles Teams, la fonctionnalité d’affichage intermédiaire pour les images dans Cartes adaptatives est disponible par défaut. Les utilisateurs peuvent afficher les images de carte adaptative en mode intermédiaire en appuyant simplement sur l’image, que l’attribut allowExpand soit présent ou non.

Mettre en forme des cartes avec HTML

Les types de cartes suivants prennent en charge la mise en forme HTML dans Teams :

  • Cartes de connecteur Office 365 : la mise en forme Markdown et HTML limitée est prise en charge dans les cartes connecteur Office 365.
  • Cartes de bannière et miniatures : les balises HTML sont prises en charge pour les cartes simples, telles que les cartes de bannière et de miniatures.

La mise en forme est différente entre le bureau et les versions mobiles des cartes de connecteur Teams pour Office 365 et des cartes simples. Dans cette section, vous pouvez consulter l’exemple de format HTML pour les cartes de connecteur et les cartes simples.

Les cartes de connecteur prennent en charge des formats Markdown et HTML limités.

Style Exemple HTML
Gras text <strong>text</strong>
Italic text <em>text</em>
En-tête (niveaux 1–3) Text <h3>Text</h3>
Barré text <strike>text</strike>
Liste non triée
  • text
  • text
<ul><li>text</li><li>text</li></ul>
Liste triée
  1. text
  2. text
<ol><li>text</li><li>text</li></ol>
Texte préformaté text <pre>text</pre>
Blockquote
text
<blockquote>text</blockquote>
Hyperlink Bing <a href="https://www.bing.com/">Bing</a>
Lien d’image Duck on a rock <img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

Dans les cartes de connecteur, les sauts de ligne sont rendus au format HTML à l’aide de la balise <p> .

Différences entre les cartes de connecteur pour les appareils mobiles et les ordinateurs de bureau

Sur le Bureau, la mise en forme HTML des cartes de connecteur s’affiche comme illustré dans l’image suivante :

Mise en forme HTML pour les cartes de connecteur dans le client de bureau

Sur iOS, la mise en forme HTML s’affiche comme indiqué dans l’image suivante :

Mise en forme HTML pour les cartes de connecteur dans le client iOS

Les cartes de connecteur utilisant HTML pour iOS incluent les problèmes suivants :

  • Les images incluses ne sont pas rendues sur iOS à l’aide de Markdown ou HTML dans les cartes de connecteur.
  • Le texte préformaté est rendu, mais n’a pas d’arrière-plan gris.

Sur Android, la mise en forme HTML s’affiche comme indiqué dans l’image suivante :

Mise en forme HTML pour les cartes de connecteur dans le client Android

Exemple de format pour les cartes de connecteur HTML

Le code suivant montre un exemple de mise en forme pour les cartes de connecteur HTML :

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card HTML formatting",
    "sections": [
        {
            "text": "This is some <strong>bold</strong> text"
        },
        {
            "text": "This is some <em>italic</em> text"
        },
        {
            "text": "This is some <strike>strikethrough</strike> text"
        },
        {
            "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
        },
        {
            "text": "bullet list <ul><li>text</li><li>text</li></ul>"
        },
        {
            "text": "ordered list <ol><li>text</li><li>text</li></ol>"
        },
        {
            "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
        },
        {
            "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
        },
        {
            "text": "preformatted text <pre>text</pre>"
        },
        {
            "text": "Paragraphs <p>Line a</p><p>Line b</p>"
        },
        {
            "text": "<blockquote>Blockquote text</blockquote>"
        }
     ]
  }
}

format HTML pour les cartes de bannière et de miniatures

Les balises HTML sont prises en charge pour les cartes simples, telles que les cartes de bannière et de miniatures. Markdown n’est pas pris en charge.

Style Exemple HTML
Gras text <strong>text</strong>
Italic text <em>text</em>
En-tête (niveaux 1–3) Text <h3>Text</h3>
Barré text <strike>text</strike>
Liste non triée
  • text
  • text
<ul><li>text</li><li>text</li></ul>
Liste triée
  1. text
  2. text
<ol><li>text</li><li>text</li></ol>
Texte préformaté text <pre>text</pre>
Blockquote
text
<blockquote>text</blockquote>
Hyperlink Bing <a href="https://www.bing.com/">Bing</a>
Lien d’image Duck on a rock <img src="https://aka.ms/Fo983c" alt="Duck on a rock"></img>

Différences entre les appareils mobiles et les ordinateurs de bureau pour les cartes simples

Étant donné qu’il existe des différences de résolution entre le bureau et la plateforme mobile, la mise en forme est différente entre le bureau et la version mobile de Teams.

Sur le Bureau, la mise en forme HTML s’affiche comme illustré dans l’image suivante :

Mise en forme HTML dans le client de bureau

Sur iOS, la mise en forme HTML s’affiche comme indiqué dans l’image suivante :

Mise en forme HTML dans le client iOS

La mise en forme des caractères, telle que le gras et l’italique, n’est pas rendue sur iOS.

Sur Android, la mise en forme HTML s’affiche comme indiqué dans l’image suivante :

Mise en forme HTML dans le client Android

La mise en forme des caractères, telle que le gras et l’italique, s’affiche correctement sur Android.

Exemple de format pour les cartes simples

Les images de la section précédente ont été créées à l’aide de Teams App Studio, où la propriété de texte d’une carte de bannière est définie sur la chaîne suivante :

<p>bold: <strong>Bold Text</strong></p><p>italic: <em>Italic Text</em></p><p>strikethrough: <strike>Strikethrough text</strike></p><h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><p>bullet list: <ul><li>text</li><li>text</li></ul></p><p>ordered list: <ol><li>text</li><li>text</li></ol></p><pre>preformatted text</pre><blockquote>blockquote text</blockquote></p><p>hyperlink: <a href=\"https://www.bing.com/\">Bing</a></p><p>embedded image: <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img></p>

Vous pouvez tester la mise en forme dans vos propres cartes en modifiant ce code.

Voir aussi