Partager via

Pour commencer

Une carte adaptative est un modèle objet de carte sérialisée JSON.

Structure de carte adaptative

La structure de base d’une carte est la suivante :

  • AdaptiveCard - L'objet racine décrit l'AdaptiveCard lui-même, y compris sa composition d'éléments, ses actions, la façon dont il doit être lu, et la version de schéma requise pour le rendre.
  • body - Le corps de la carte est constitué de blocs de construction appelés elements. Les éléments peuvent être réorganisés quasiment à l’infini afin de créer de nombreux types de cartes.
  • actions - De nombreuses cartes ont un ensemble d’actions qu’un utilisateur peut effectuer. Cette propriété décrit les actions qui sont généralement rendues dans une « barre d’actions » en bas.

Exemple de carte

Cet exemple de carte qui inclut une seule ligne de texte suivie d’une image.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Propriété Type

Chaque élément a une type propriété qui identifie le type d’objet qu’il est. En regardant la carte ci-dessus, vous pouvez voir que nous avons deux éléments, a TextBlock et un Image.

Tous les éléments de Carte Adaptative sont empilés verticalement et s’étendent à la largeur de leur parent (pensez display: block au code HTML). Toutefois, vous pouvez utiliser un ColumnSet pour créer des colonnes côte à côte de conteneurs.

Éléments adaptatifs

Les éléments les plus fondamentaux sont les suivants :

  • TextBlock : ajoute un bloc de texte avec des propriétés pour contrôler l’apparence du texte
  • Image : ajoute une image avec des propriétés pour contrôler l’apparence de l’image

Éléments de conteneur

Les cartes peuvent également avoir des conteneurs, qui organisent une collection d’éléments enfants.

  • Conteneur - Définit une collection d’éléments
  • ColumnSet/Column - Définit une collection de colonnes, chaque colonne est un conteneur
  • FactSet - Conteneur de faits
  • ImageSet : conteneur d’images afin que l’interface utilisateur puisse afficher l’expérience de galerie de photos appropriée pour une collection d’images.

Éléments de saisie

Les éléments d’entrée vous permettent de demander à l’interface utilisateur native de créer des formulaires simples :

  • Input.Text : obtenir du contenu texte de l’utilisateur
  • Input.Date - obtenir une date de l’utilisateur
  • Input.Time : obtenir une heure de l’utilisateur
  • Input.Number : obtenir un numéro de l’utilisateur
  • Input.ChoiceSet - Donnez à l’utilisateur un ensemble de choix et faites-le choisir
  • Input.Toggle : donner à l’utilisateur un choix unique entre deux éléments et les choisir

Actions

Les actions ajoutent des boutons à la carte. Celles-ci peuvent effectuer diverses actions, telles que l’ouverture d’une URL ou l’envoi de données.

  • Action.OpenUrl : le bouton ouvre une URL externe pour l’affichage
  • Action.ShowCard : demande l’affichage d’une sous-carte à l’utilisateur.
  • Action.Submit - Demander de rassembler tous les éléments d'entrée dans un objet qui est ensuite envoyé au destinataire par l'intermédiaire d'une méthode définie par l'application hôte.

Exemple Action.Submit : Avec Skype, une action.Submit renvoie une activité de bot Bot Framework au bot avec la propriété Value contenant un objet avec toutes les données d’entrée sur celle-ci.

En savoir plus