Mettre en forme des cartes dans Microsoft Teams

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

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 :

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

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

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

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)"
        }
    ]
}

Les cartes adaptatives prennent en charge.les émojis. Le code suivant montre un exemple de Cartes adaptatives avec un émoji :

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "Publish Adaptive Card with emojis 🥰 ", "weight": "bolder", "size": "medium" }, ] }, ], }

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 message. Pour ajouter des @mentions cartes, suivez la même logique de notification et le même rendu que celui des mentions basées sur des messages dans les conversations de conversation de canal et de groupe.

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

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 et UPN Microsoft Entra dans le mention utilisateur

La plateforme Teams vous permet de mention utilisateurs avec leur ID d’objet Microsoft Entra 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 :

Mention utilisateur dans les bots avec Cartes adaptatives

Les bots prennent en charge les mention utilisateur avec l’ID d’objet Microsoft Entra 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.

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 Microsoft Entra ID</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>Adele UPN</at>",
        "mentioned": {
          "id": "AdeleV@contoso.onmicrosoft.com",
          "name": "Adele Vance"
        }
      },
      {
        "type": "mention",
        "text": "<at>Adele Microsoft Entra ID</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 webhook entrant avec Cartes adaptatives

Les webhooks entrants commencent à prendre en charge les mention utilisateur dans les cartes adaptatives avec l’ID d’objet Microsoft Entra 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 Microsoft Entra ID</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 Microsoft Entra ID</at>",
                        "mentioned": {
                          "id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
                          "name": "Adele Vance"
                        }
                      }
                ]
            }
        }
    }]
}

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

icône Personnes dans une carte adaptative

Personnes icône permet aux utilisateurs d’afficher les images des utilisateurs dans une carte adaptative. Vous pouvez insérer une image et appliquer toutes les propriétés prises en charge sur les images.

Deux types d’icônes de personnes sont pris en charge dans une carte adaptative :

• Persona : si vous souhaitez afficher un seul utilisateur dans une carte adaptative, il affiche l’icône des personnes et le nom de l’utilisateur.

  Le code JSON suivant est un exemple de carte Persona :

  {
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0.0",
    "body": [
  {
        "type": "TextBlock",
        "text": "Persona",
        "weight": "bolder"
      },
      {
        "type": "Component",
        "name": "graph.microsoft.com/user",
        "view": "compact",
        "properties": {
          "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
          "displayName": "Daniela Mandera",
          "userPrincipalName": "damandera@microsoft.com"
        }
      }
    ]
  }
  

• Ensemble de personnages : si vous souhaitez afficher plusieurs utilisateurs dans une carte adaptative, elle affiche uniquement l’icône des personnes des utilisateurs.

  Le code JSON suivant est un exemple d’ensemble de personnages :

  {
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0.0",
    "body": [
      {
        "type": "TextBlock",
        "text": "Persona Set",
        "weight": "bolder"
      },
      {
        "type": "Component",
        "name": "graph.microsoft.com/users",
        "view": "compact",
        "properties": {
          "users": [
            {
              "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
              "displayName": "Daniela Mandera",
              "userPrincipalName": "damandera@microsoft.com"
            },
            {
              "id": "65f50003-e15d-434a-9e14-0fcfeb3d7817",
              "displayName": "Daniela Mandera",
              "userPrincipalName": "damandera@microsoft.com"
            }
          ]
        }
      }
    ]
  }
  

  Remarque

  Vous ne pouvez pas personnaliser le style du persona et de l’ensemble de personnages dans une carte adaptative.

L’image suivante est un exemple de l’icône people dans une carte adaptative :

Paramètres de requête

Le tableau suivant répertorie les paramètres de requête :

Les composants adaptatifs sont des composants de haut niveau alimentés par des éléments de création de modèles et de carte adaptative native. Le type component peut être utilisé n’importe où dans le corps carte et les données du composant sont définies dans l’attribut properties . Les données du composant sous properties sont transmises directement au composant. La properties propriété définit le format pour Persona et Persona Set, et toutes les autres propriétés sous properties sont ignorées par component type dans le schéma de carte adaptative.

Votre bot peut interroger la liste des membres et leurs profils utilisateur de base, y compris les ID d’utilisateur Teams et les informations Microsoft Entra, telles que name, idet userPrincipalName. Pour plus d’informations, consultez Récupérer la liste de travail ou le profil utilisateur.

Les images suivantes montrent l’icône de personnes dans une carte adaptative sur les clients mobiles et de bureau Teams :

Client de bureau :

Lorsqu’un utilisateur pointe sur une icône de personnes, les personnes carte de cet utilisateur s’affichent.

Client mobile

Lorsqu’un utilisateur sélectionne une icône de personnes, il affiche les personnes carte de cet utilisateur.

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.

Pour masquer les informations dans les cartes adaptatives, ajoutez la style propriété à typeinput.text et 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 :

Carte adaptative pleine largeur

Vous pouvez utiliser la msteams propriété pour étendre la largeur d’une carte adaptative et utiliser un espace de 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 :

L’image suivante montre l’affichage par défaut d’une carte adaptative lorsque vous n’avez pas défini la propriété sur widthFull :

Disposition réactive de carte adaptative

Les cartes adaptatives adaptent automatiquement leur apparence au style de l’application hôte, mais ont une disposition fixe qui reste la même pour les clients mobiles et de bureau Teams. Vous devez concevoir vos cartes adaptatives pour qu’elles s’affichent sur n’importe quel appareil afin de fournir une expérience utilisateur améliorée sur les conversations, les canaux et les conversations de réunion. Dans cet article, vous allez découvrir comment concevoir des cartes adaptatives réactives.

La disposition réactive de carte adaptative vous permet de concevoir des cartes avec différentes dispositions qui ciblent des largeurs de carte différentes.

Concevoir des cartes adaptatives réactives

Utilisez la targetWidth propriété sur n’importe quel élément pour :

• Afficher ou masquer n’importe quel élément en fonction de la largeur de l’carte.

• Définissez différentes largeurs cibles sur différents éléments pour créer des dispositions différentes.

  Le tableau suivant répertorie les valeurs disponibles targetWidth :

  Valeur	Description
  veryNarrow	L’élément est visible lorsque la largeur de la carte adaptative est très étroite, comme dans une conversation de réunion.
  narrow	L’élément est visible lorsque la largeur de la carte adaptative est étroite, par exemple sur un téléphone mobile en mode portrait.
  standard	L’élément est visible lorsque la largeur de la carte adaptative est standard, par exemple sur un téléphone mobile en mode paysage, sur une tablette en mode portrait ou dans une conversation sur le bureau.
  wide	L’élément est visible lorsque la largeur de la carte adaptative est large, par exemple sur une tablette en mode paysage, dans un canal ou une conversation sur le bureau lorsque vous définissez votre carte sur la pleine largeur.

  Vous pouvez également définir la targetWidth propriété pour rendre un élément visible pour une plage de largeurs carte à l’aide des atLeast préfixes et atMost . Par exemple, vous pouvez rendre un élément visible uniquement lorsque la largeur carte est « standard ou supérieure » ou uniquement lorsque la largeur carte est « étroite ou inférieure ». Le tableau suivant fournit des conseils sur la façon de rendre un élément visible pour une plage de largeurs carte :

  Exemple	Description
  "targetWidth": "atLeast:standard"	L’élément n’est visible que lorsque la largeur de la carte adaptative est au moins standard, ce qui signifie standard ou large.
  "targetWidth": "atMost:narrow"	L’élément n’est visible que lorsque la largeur de la carte adaptative est la plus étroite, ce qui signifie très étroite ou étroite.

  Remarque

  Vous n’avez pas besoin de définir targetWidth sur tous les éléments. Si vous ne définissez targetWidth pas pour un élément, l’élément est toujours visible quelle que soit la largeur de l’carte.

Voici des exemples JSON pour une carte adaptative conçue sans utiliser targetWidth et modifiée pour utilisertargetWidth :

• Carte adaptative conçue sans utiliser targetWidth:

  {
    "type": "AdaptiveCard",
    "body": [
      {
        "type": "ColumnSet",
        "columns": [
          {
            "type": "Column",
            "items": [
              {
                "type": "Image",
                "style": "Person",
                "url": "https://aka.ms/AAp9xo4",
                "size": "Small"
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "verticalContentAlignment": "center",
            "items": [
              {
                "type": "TextBlock",
                "weight": "Bolder",
                "text": "David Claux",
                "wrap": true
              }
            ],
            "width": "auto"
          },
          {
            "type": "Column",
            "spacing": "medium",
            "items": [
              {
                "type": "TextBlock",
                "text": "Platform Architect",
                "isSubtle": true,
                "wrap": true
              }
            ],
            "width": "stretch",
            "verticalContentAlignment": "center"
          }
        ]
      }
    ],
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
  }
  
  

  Les images suivantes montrent le rendu de la carte adaptative pour différentes largeurs de carte :

  • Lorsque la largeur du carte est large, la carte semble correcte.

    

  • Lorsque la largeur du carte est standard ou étroite, le rôle est pressé.

    

  • Lorsque la largeur du carte est très étroite, le nom et le rôle sont considérablement réduits.

    

• Carte adaptative mise à jour pour être réactive à l’aide de targetWidth:

    {
      "type": "AdaptiveCard",
      "body": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "targetWidth": "atLeast:narrow",
              "items": [
                {
                  "type": "Image",
                  "style": "Person",
                  "url": "https://aka.ms/AAp9xo4",
                  "size": "Small"
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "spacing": "medium",
              "verticalContentAlignment": "center",
              "items": [
                {
                  "type": "TextBlock",
                  "weight": "Bolder",
                  "text": "David Claux",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "targetWidth": "atMost:narrow",
                  "spacing": "None",
                  "text": "Platform Architect",
                  "isSubtle": true,
                  "wrap": true
                }
              ],
              "width": "auto"
            },
            {
              "type": "Column",
              "targetWidth": "atLeast:standard",
              "spacing": "medium",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Platform Architect",
                  "isSubtle": true,
                  "wrap": true
                }
              ],
              "width": "stretch",
              "verticalContentAlignment": "center"
            }
          ]
        }
      ],
      "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.5"
    }
  

  Voyons comment la même carte adaptative s’affiche après l’utilisation de la targetWidth propriété pour différentes largeurs de carte :

  • Lorsque la largeur du carte est large, la carte semble toujours bonne.

    

  • Lorsque la largeur du carte est standard ou étroite, le rôle est déplacé sous le nom, car il n’y a pas d’espace horizontal pour les afficher côte à côte.

    

  • Lorsque la largeur de l’carte est très étroite, nous pouvons masquer l’image et ne conserver que les informations les plus significatives.

    

Pour plus d’informations sur la conception d’une carte adaptative, consultez Conception de cartes adaptatives pour votre application Teams.

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"
}

Stageview pour les images dans les cartes adaptatives

Dans une carte adaptative, vous pouvez utiliser la msteams propriété pour ajouter la possibilité d’afficher des images dans Stageview 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. Le code suivant est un exemple de la msteams propriété :

{
    "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 s’affiche dans le coin supérieur droit, comme illustré dans l’image suivante :

L’image apparaît dans Stageview lorsque l’utilisateur sélectionne l’icône développer, comme illustré dans l’image suivante :

Dans la vue de phase, 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é.

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

Style	Exemple	Markdown
Gras	text	**text**
Italic	text	*text*
En-tête (niveaux 1 à 3)	Text	### Text
Barré	text	~~text~~
Liste non triée	text text	- Item 1\r- Item 2\r- Item 3
Liste triée	text text	1. Green\r2. Orange\r3. Blue
Texte préformaté	text	preformatted text
Blockquote	>texte blockquote	>blockquote text
Hyperlink	Bing	[Bing](https://www.bing.com/)
Lien d’image		

Dans les cartes de connecteur, les sauts de ligne sont affichés pour \n\n, mais pas pour \n ou \r.

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

Sur le Bureau, la mise en forme Markdown pour les cartes de connecteur s’affiche comme indiqué dans l’image suivante :

Sur iOS, la mise en forme Markdown pour les cartes de connecteur s’affiche comme indiqué dans l’image suivante :

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

• Le client iOS pour Teams n’affiche pas les images Markdown ou HTML inline dans les cartes de connecteur.
• Les guillemets sont rendus en retrait, mais sans arrière-plan gris.

Sur Android, la mise en forme Markdown pour les cartes de connecteur s’affiche comme indiqué dans l’image suivante :

Exemple de format pour les cartes de connecteur Markdown

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

{
  "contentType": "application/vnd.microsoft.teams.card.o365connector",
  "content": {
    "@type": "MessageCard",
    "@context": "https://schema.org/extensions",
    "summary": "Summary",
    "title": "Connector Card Markdown formatting",
    "sections": [
        {
            "text": "This is some **bold** text"
        },
        {
            "text": "This is some _italic_ text"
        },
        {
            "text": "# Header 1\r## Header 2\r### Header 3"
        },
        {
            "text": "- Bullet \r- List \r"
        },
        {
            "text": "1. Numbered\r1. List \r"
        },
        {
            "text": "Link: [Bing](https://www.bing.com)"
        },
        {
            "text": "embedded image link: ![Duck on a rock](https://aka.ms/Fo983c)"
        },
        {
            "text": "`preformatted text`"
        },
        {
            "text": "Newlines (backslash n, backslash n):\n\nline a\n\nline b\n\nline c"
        },
        {
            "text": ">This is a blockquote"
        }
     ]
  }
}

Lorsqu’un utilisateur sélectionne le menu de dépassement sur un bureau, les boutons définis comme secondaires s’affichent dans la carte adaptative.

Lorsqu’un utilisateur sélectionne le menu de dépassement sur un appareil mobile, la carte adaptative affiche les boutons définis. Il existe une feuille intégrée qui affiche un menu de dépassement avec carte tâches associées avec une option de message. Un appui long sur un message affiche une liste de messages associés. Cette option est disponible uniquement pour les actions.

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	text 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		<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 :

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

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

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

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

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>"
        }
     ]
  }
}

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	text 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		<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 :

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

La mise en forme des caractères, par exemple en gras et en italique, n’est pas affichée sur iOS.

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

La mise en forme des caractères, par exemple, s’affiche correctement en gras et en italique 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.