Mettre en forme des cartes dans Microsoft Teams

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

• Markdown
• HTML

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 les clients Microsoft Teams de bureau et mobiles, et Teams dans le navigateur de bureau.

Vous pouvez inclure une image incluse avec n’importe quelle carte Teams. Les formats d'image pris en charge sont les formats .png, .jpg ou .gif. Les dimensions ne doivent pas dépasser 1024 x 1024 pixels et la taille du fichier doit être inférieure à 1 Mo. Les images .gif animées ne sont pas prises en charge. Pour plus d’informations, consultez types de cartes.

Vous pouvez mettre en forme des cartes adaptatives et des cartes de connecteur pour Groupes Microsoft 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 Carte Textblock adaptative, et Fact.Title .Fact.Value Html n’est pas pris en charge dans les cartes adaptatives.
• Cartes de connecteur pour Groupes Microsoft 365 : Markdown et html limité est pris en charge dans les cartes de connecteur pour Groupes Microsoft 365 dans les champs de texte.

Remarque

Markdown n’est pas pris en charge pour les cartes de connexion OAuth dans les bots.

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 msteams propriété pour ajouter la possibilité d’afficher des images dans Stageview 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.

format Markdown pour Cartes adaptatives

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

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.

Remarque

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

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

Remarque

Si vous utilisez des API REST, définissez charset=UTF-8 dans vos en-têtes de requête pour ajouter des emojis dans cartes adaptatives.

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 .

Remarque

• Les éléments multimédias ne sont 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.
• Vous pouvez @mention toutefois utiliser plusieurs utilisateurs dans un même message de carte adaptative, mais vous assurer que la limite de taille des messages ne dépasse pas 28 Ko pour les webhooks entrants et 40 Ko pour un message de bot.
• Les cartes adaptatives envoyées à partir des webhooks entrants prennent uniquement en charge les mentions utilisateur et ne prennent pas en charge les mentions 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 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 :

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

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.

Remarque

La mise à jour du schéma et les modifications apportées à l’interface utilisateur/à l’expérience utilisateur ne sont pas requises pour les mentions utilisateur avec des cartes adaptatives dans le 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 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.

Remarque

• Activez les mention utilisateur dans le schéma pour les webhooks entrants afin de prendre en charge Microsoft Entra’ID d’objet et l’UPN.
• Les modifications apportées à l’interface utilisateur/à l’expérience utilisateur ne sont pas requises pour les mentions utilisateur 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 :

Nom de la propriété	Description
type	component
name	Utilisez graph.microsoft.com/users pour rechercher tous les membres de l’organization
view	compact
properties	Passé au modèle de composant
id	IRM de l’utilisateur
displayName	Nom de l’utilisateur
userPrincipalName	Nom principal de l’utilisateur du compte dans Microsoft Entra ID

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.

Remarque

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 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é.

Remarque

Testez votre carte adaptative pleine largeur dans des facteurs de forme étroits tels que les panneaux latéraux mobiles et de réunion pour vous assurer que le contenu n’est pas tronqué.

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é.

Remarque

• 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é Stageview pour les images dans les cartes adaptatives est disponible par défaut. Les utilisateurs peuvent afficher des images de carte adaptative dans Stageview en appuyant simplement sur l’image, que l’attribut allowExpand soit présent ou non.

Format Markdown pour les cartes de connecteur pour Groupes Microsoft 365

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

CodeBlock dans les cartes adaptatives

L’élément CodeBlock vous permet de partager des extraits de code sous forme de cartes adaptatives au format enrichi dans des conversations, des canaux et des réunions Teams. Les cartes adaptatives avec l’élément CodeBlock facilitent la lecture de l’extrait de code, car la mise en retrait, la numérotation et la mise en surbrillance de la syntaxe correspondent au langage de programmation. En outre, vous pouvez ajouter des boutons d’action pour afficher le code à sa source ou modifier le code dans des environnements de développement intégré (IDE) tels que Microsoft Visual Studio ou Microsoft Visual Studio Code.

La capture d’écran suivante montre une carte adaptative avec un extrait de code :

L’élément CodeBlock prend en charge les langues suivantes :

Langue	Pris en charge	Langue	Pris en charge
Bash	✔️	JSON	✔️
C	✔️	Perl	✔️
C++	✔️	PHP	✔️
C#	✔️	PowerShell	✔️
CSS	✔️	Python	✔️
DOS	✔️	SQL	✔️
Activer	✔️	TypeScript	✔️
GraphQL	✔️	Visual Basic	✔️
HTML	✔️	Verilog	✔️
Java	✔️	VHDL	✔️
JavaScript	✔️	XML	✔️

Remarque

L’élément CodeBlock reconnaît le texte brut en tant que langage si vous définissez la valeur PlainText enum sur dans la language propriété du schéma.

Le code suivant est un exemple de carte adaptative affichant un extrait de code :

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "editor.js",
            "style": "heading"
        },
        {
            "type": "TextBlock",
            "text": "Lines 61 - 76"
        },
        {
            "type": "CodeBlock",
            "codeSnippet": "/**\n* @author John Smith <john.smith@example.com>\n*/\npackage l2f.gameserver.model;\n\npublic abstract strictfp class L2Char extends L2Object {\n  public static final Short ERROR = 0x0001;\n\n  public void moveTo(int x, int y, int z) {\n    _ai = null;\n    log(\"Shouldn't be called\");\n    if (1 > 5) { // what!?\n      return;\n    }\n  }\n}",
            "language": "java",
            "startLineNumber": 61
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View in Azure Repos",
            "url": "https://azure.microsoft.com/en-us/products/devops/repos/"
        },
        {
            "type": "Action.OpenUrl",
            "title": "Edit in vscode.dev",
            "url": "https://vscode.dev/"
        }
    ]
}

L’élément CodeBlock prend en charge les propriétés suivantes :

Propriété	Type	Requis	Description
codeSnippet	String	Oui	Extrait de code à afficher dans une carte adaptative.
language	Énum	Oui	Langue de l’extrait de code à afficher dans une carte adaptative.
startLineNumber	Nombre	Non	Numéro de ligne dans la source où commence l’extrait de code. Si ce champ est vide, la valeur par défaut est 1.

Conseil

• Les caractères spéciaux ont des fonctions spécifiques dans la codeSnippet propriété . Par exemple, le caractère \n de saut de ligne déclenche un saut de ligne.
• Pour afficher le caractère \n de saut de ligne dans le cadre de l’extrait de code dans une carte adaptative, veillez à le placer dans une séquence d’échappement comme \\n dans la codeSnippet propriété . Sinon, Teams restitue le code après dans \n la ligne suivante du carte.

Limitations

• Une carte adaptative avec l’élément CodeBlock est prise en charge uniquement dans les clients web et de bureau Teams.
• L’extrait de code d’une carte adaptative est en lecture seule et n’est pas modifiable.
• Une carte adaptative affiche uniquement un aperçu des 10 premières lignes de l’extrait de code. S’il existe plus de 10 lignes de code, l’utilisateur doit sélectionner Développer pour afficher le reste de l’extrait de code.

Menu de dépassement des cartes adaptatives

La carte adaptative dans Teams prend en charge le menu de dépassement. Vous pouvez remplir un menu de dépassement pour toutes les actions secondaires dans une carte adaptative. Un menu de dépassement de capacité dans une carte adaptative peut être ajouté aux éléments suivants :

• Actions : Dans les actions, les boutons principaux apparaissent sur la carte adaptative et les boutons secondaires se trouvent dans le menu de dépassement.

• ActionSet : ActionSet est une combinaison de plusieurs actions dans une carte adaptative. Chaque jeu d’actions peut avoir un menu de dépassement.

Remarque

Une carte adaptative prend en charge jusqu’à six actions principales à afficher sur le carte. Toute action principale supplémentaire est visible dans le menu de dépassement.

Activer le menu de dépassement de capacité

Pour activer le menu de dépassement de capacité, configurez la mode propriété avec la valeur en tant que primary ou secondary dans le schéma de carte adaptative. Le tableau suivant décrit la mode propriété :

Propriété	Type	Requis	Description
mode	Enum (principal, secondaire)	Non	Indique si l’action est une action primaire ou secondaire. Les actions secondaires sont réduites dans un menu de dépassement.

L’exemple suivant montre la mode propriété dans le actions type et l’élément ActionSet :

Actions

Dans l’exemple suivant, il existe deux actions principales et une action secondaire. L’action secondaire crée un menu de dépassement.

{
   "type": "AdaptiveCard",
   "actions": [
        {
            "type": "Action.Submit",
            "title": "Set due date"
        },
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "https://adaptivecards.io"
        },
        {
            "type": "Action.Submit",
            "title": "Delete",
            "mode": "secondary"
        }
    ]
}

Remarque

• Le menu de dépassement se comporte différemment sur un bot envoyé carte et une extension de message carte pour le niveau actions racine d’une carte adaptative. Le menu de dépassement sur un bot envoyé carte s’affiche sous la forme d’un menu contextuel contextuel et sur l’extension de message carte il apparaît dans le coin supérieur droit sous l’icône Plus d’options (...). Le comportement n’est pas applicable à dans ActionSet une carte adaptative.

L’image suivante est un exemple de menu de dépassement dans un bot envoyé carte et une extension de message carte :

Jeu d’actions

Dans l’exemple suivant, toutes les actions sont marquées comme secondaires. Par conséquent, un seul menu de dépassement s’affiche sur le carte.

{
    "type": "ActionSet",
     "actions": [

          {
           
            "type": "Action.Submit",
            "title": "view",
            "mode": "Secondary" 
       {
       },
            "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"

       },
       {
             "type": "Action.submit",
            "title": "Delete",
            "mode": "secondary"
       }
     ]
}

L’exemple suivant montre l’expérience de menu de dépassement dans les clients de bureau et mobiles Teams :

Imprimante de bureau

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.

Mobile

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.

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 pour les Groupes Microsoft 365 : les formats Markdown et HTML limités sont pris en charge dans les carte de connecteur pour les Groupes Microsoft 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 les versions de bureau et mobiles de Teams pour les cartes de connecteur pour les cartes Groupes Microsoft 365 et simples. Dans cette section, vous pouvez consulter l’exemple de format HTML pour les cartes de connecteur et les cartes simples.

Format HTML pour les cartes de connecteur pour Groupes Microsoft 365

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

format HTML pour les cartes

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.

Exemples de code

S.No.	Description	.NET	Node.js	Manifeste
1	Cet exemple d’application montre les différents formats carte pris en charge dans Teams.	View	View	View

Voir aussi

• Cartes et boîtes de dialogue
• Formatez vos messages robots.
• Utiliser des boîtes de dialogue à partir de bots
• Explorateur de schémas pour les cartes adaptatives
• Créer des connecteurs pour Groupes Microsoft 365
• Créer des webhooks entrants
• Sdk de création de modèles de carte adaptative