Guide pas à pas : créer votre première carte adaptative dans Microsoft Teams

Par Mirko Peters · 2026-08-12 · Mis à jour 2026-08-29

Bienvenue de nouveau sur le blog ! Si vous avez déjà été complètement submergé par les notifications incessantes des alertes de conversation, des messages de canal et des avertissements automatisés, vous êtes certai…

Traduit automatiquement par IA à partir de l'article original. Lire l'original en anglais

Titelbild: Step-by-Step Guide: Building Your First Adaptive Card in MS Teams

Bienvenue de retour sur le blog ! Si vous avez déjà été complètement submergé par le bombardement constant des alertes de conversation, des messages de canal et des avertissements automatisés, vous n’êtes certainement pas le seul. Aujourd’hui, les collaborateurs doivent gérer un volume d’informations ahurissant, recevant souvent des dizaines d’alertes chaque heure. Ce flux ininterrompu fragmente notre concentration, nous oblige à changer constamment de contexte et nous laisse mentalement épuisés en fin de journée. Dans notre épisode de podcast, Build Actionable Teams Notifications with Adaptive Cards, nous avons vu comment transformer radicalement votre approche de la communication en abandonnant des alertes statiques et inutiles au profit de messages intelligents et interactifs.

Aujourd’hui, nous allons prolonger cet échange en adoptant une approche très concrète. Ce guide vous accompagnera dans la création de votre toute première carte adaptative pour Microsoft Teams. Que vous cherchiez à rationaliser les approbations internes, diffuser des alertes d’incident critiques ou simplement fluidifier le quotidien de votre équipe, maîtriser les cartes adaptatives est l’une des compétences les plus rentables que vous puissiez développer dans l’écosystème Microsoft 365. Entrons immédiatement dans le vif du sujet et voyons ce qu’il faut pour bien démarrer.

Les bases : pourquoi les notifications traditionnelles échouent

Avant de nous lancer dans la création, il est utile de comprendre le problème central que nous cherchons à résoudre. La plupart des notifications standard dans Microsoft Teams vous indiquent qu’un événement s’est produit, mais ne vous offrent aucun moyen direct d’y répondre. Imaginez que vous receviez une alerte signalant qu’un nouveau bon de commande nécessite votre approbation. Avec une notification textuelle classique, vous devez lire l’alerte, ouvrir un navigateur web, vous connecter à une autre application métier, accéder à l’enregistrement concerné et, enfin, cliquer sur « Approuver ».

Ce parcours en plusieurs étapes brise votre concentration et consomme de précieuses minutes. Multipliez cette interruption par soixante fois par heure, et votre productivité s’évanouit. Les cartes adaptatives résolvent ce problème en intégrant l’interface de l’application directement dans la fenêtre de conversation. Elles vous permettent de consulter des données, de remplir des champs de formulaire et de cliquer sur des boutons d’action sans jamais quitter le client Teams. Pour mettre en œuvre ces cartes avec succès, il faut toutefois comprendre les outils sous-jacents et les prérequis nécessaires à leur réalisation.

Prérequis et outils

La création de cartes adaptatives ne exige pas un solide bagage en développement logiciel, mais il est indispensable de vous familiariser avec la boîte à outils de création standard fournie par Microsoft. Disposer des bons utilitaires vous garantit un processus de conception fluide, de l’idée jusqu’au déploiement.

Ressources essentielles pour les concepteurs de cartes

Adaptive Card Designer : un terrain de jeu visuel dans le navigateur, où vous pouvez glisser-déposer des éléments, visualiser des aperçus en direct selon l’appareil et générer instantanément le schéma JSON sous-jacent.
Microsoft Teams UI Kit (Figma) : précieux pour les recommandations de conception, le thème, les normes d’accessibilité et le dimensionnement adaptatif selon les différentes applications clientes.
Centre de documentation officiel : votre référence absolue pour vérifier les versions de schéma prises en charge, les actions de carte et les contraintes de rendu propres à Teams.
Modèles d’exemple : modèles JSON prêts à l’emploi issus de la communauté open source, qui vous donnent une longueur d’avance sur des schémas courants comme les approbations, les sondages et les alertes multimédias.

Une fois votre environnement de conception en place, vous êtes prêt à assembler la mise en page visuelle et la structure de données de votre carte.

Créer une carte adaptative

La création d’une carte adaptative relève avant tout de la composition de la mise en page et de la structure JSON. Comme les cartes adaptatives reposent sur un schéma indépendant de la plateforme, une même définition de carte peut s’afficher nativement sous Windows, macOS, iOS, Android et sur le web.

Utiliser le concepteur de cartes adaptatives

La façon la plus simple de créer votre première carte consiste à utiliser l’outil de conception en ligne. Voici un flux de travail simple à suivre :

Accédez au concepteur de cartes adaptatives officiel depuis votre navigateur web.
Sélectionnez un modèle de démarrage, comme une notification de base ou un formulaire de saisie, pour disposer d’une base solide.
Glissez-déposez des éléments visuels, comme des TextBlocks, des FactSets, des images et des ActionSets, sur votre canevas.
Configurez des propriétés telles que les tailles de police, l’espacement et les libellés des boutons pour les adapter au style de communication de votre organisation.
Passez votre cible d’aperçu sur « Microsoft Teams » pour vérifier l’affichage de la carte pour vos utilisateurs finaux.
Copiez le code JSON généré automatiquement depuis le panneau d’affichage du code.

Décryptage des bases de la structure JSON

Chaque carte adaptative repose en définitive sur une charge utile JSON structurée. Voici un exemple simple, accessible aux débutants, d’un schéma JSON de carte adaptative définissant un message d’accueil de base et un bouton d’action :

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "Welcome to your first adaptive card!",
      "size": "Medium",
      "weight": "Bolder"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Acknowledge"
    }
  ]
}

Dans cet extrait, l’objet racine précise le type de carte et la version du schéma. Le tableau body contient les éléments visuels, comme les blocs de texte, tandis que le tableau actions définit les boutons interactifs — tels que Action.Submit ou Action.OpenUrl — qui permettent aux utilisateurs de déclencher des workflows en arrière-plan.

Envoyer des cartes avec des bots ou l’API Graph

Une fois la charge utile JSON finalisée et testée dans le concepteur, l’étape suivante consiste à remettre cette carte directement à vos utilisateurs dans Microsoft Teams. Plusieurs options de déploiement robustes s’offrent à vous, selon votre architecture technique.

Vous pouvez exploiter Power Automate pour des intégrations de workflows low-code, ou recourir à des bots personnalisés et à l’API Microsoft Graph pour des mécanismes de remise avancés, de niveau entreprise. Utiliser une application Azure AD enregistrée, associée à l’API REST Bot Framework, vous permet d’envoyer automatiquement des cartes interactives à des utilisateurs précis ou à des canaux à forte visibilité.

Voici un exemple de structure de charge utile lorsque vous encapsulez votre carte adaptative dans une pièce jointe de message Bot Framework :

{
  "type": "message",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
          {
            "type": "TextBlock",
            "text": "New Service Request Pending Review"
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Approve"
          },
          {
            "type": "Action.Submit",
            "title": "Reject"
          }
        ]
      }
    }
  ]
}

En reliant cette charge utile à un déclencheur automatisé — comme un nouvel élément dans une liste SharePoint ou une exécution système en échec dans Power Automate — vous transformez une alerte passive en une invite active, qui facilite la prise de décision.

Tester et déboguer les cartes

Tout déploiement doit toujours être précédé de tests rigoureux. Comme les différents clients (Teams sur ordinateur, applications mobiles et clients de messagerie Outlook) affichent les cartes adaptatives selon des configurations d’hôte propres à chacun, de subtiles erreurs de mise en page peuvent parfois apparaître.

Lors du débogage de vos cartes, gardez à l’esprit ces bonnes pratiques :

Valider les versions du schéma : vérifiez que la version de votre carte correspond aux fonctionnalités prises en charge par l’architecture actuelle du client Microsoft Teams.
Vérifier l’affichage du texte : contrôlez que la liaison des données variables se remplit correctement et ne laisse pas d’espaces vides lorsqu’un champ de données est vide.
Tester sur différents appareils : prévisualisez vos cartes sur des formats mobiles étroits pour vous assurer que les colonnes et les ensembles de boutons s’empilent proprement, sans retours à la ligne maladroits.
Gérer les actions d’envoi : assurez-vous que votre service back-end traite correctement les charges utiles JSON reçues lorsque les utilisateurs cliquent sur les boutons d’interaction.

Conclusion

Transformer votre expérience quotidienne de Microsoft Teams consiste avant tout à réduire les frictions et à filtrer le bruit numérique. En remplaçant des alertes statiques et inutiles par des cartes adaptatives dynamiques et interactives, vous vous donnez, ainsi qu’à votre équipe, les moyens d’agir avec détermination sans passer sans cesse d’une application déconnectée à une autre. Nous avons exploré aujourd’hui les mécanismes fondamentaux de la conception, de la structuration et du déploiement de ces cartes, mais ce n’est qu’un début de ce que vous pouvez accomplir.

Pour approfondir les stratégies de productivité et découvrir comment les outils modernes peuvent transformer votre espace de travail numérique, n’hésitez pas à écouter l’épisode de podcast associé, Build Actionable Teams Notifications with Adaptive Cards. Commencez dès aujourd’hui à expérimenter vos propres cartes personnalisées, rationalisez vos workflows et retrouvez toute votre concentration !