# Adaptive Cards

# 0 - Prérequis: Qu'est ce qu'une adaptive cards.

TIP

Nous vous conseillons d'utiliser les AC dans les compétences de type action. L'AC vous permettra de remplacer toutes les ressources de collecte, il faut donc qu'elle soit présent au niveau de la ressource de validation.

La (ou les) valeur du bouton de validation devront bien ĂȘtre indiquĂ© dans la partie logique > workflow de la ressoource en question (valeur) de la rĂ©ponse.

# 1 - Création de la carte

Pour créer la carte, il faut se rendre sur le site de adaptivecards.io (opens new window). Il existe de nombreux exemples tout fait mais vous pouvez créer votre propre carte.

Ensuite il faut coller le json directement dans la partie dédié aux adaptive cards sur le dashboard Vizir.

# 2 - Gestion des variables

TIP

La gestion des variables se fait selon la norme des adaptive cards ${variable}.

# Utilisation des tag pour des répéteurs automatique

https://docs.microsoft.com/fr-fr/adaptive-cards/templating/language#repeating-items-in-an-array (opens new window)

https://stackoverflow.com/questions/62903082/repeating-elements-with-adaptive-cards-templating (opens new window)

Utilisation d'attributs dans un répéteur

Pour utiliser un attribut dans un répéteur, il faut revenir à l'écriture Vizir pour cet attribute avec le double accolade. { attribute }) Les tags ne sont pas gérées à ce niveau.

# 3 - Type d'action

Voir la doc documentation (opens new window)

  • Action.ShowCard
  • Action.OpenUrl
  • Action.ToggleVisibility
    • TargetElement: []
  • Action.Execute => Ne pas utiliser pour le moment n'est pas supporter par toutes les version de Teams (ne fonctionne pas sur Mac en tout cas)
    • verb:
    • data: On peut mettre dans data des object pour passer des informations au back end. On peut en plus rajouter 2 types de mappings qui sont des objets ({key: value}) qui permettent de remplacer le champs key dans le call API ou dans l'affichage du message de confirmation - mappingApi: - mappingMessage: {comment: 'Commentaire'} Il est possible de cacher des donnes qui sont dans le data en utilisant l'Ă©criture ci-dessous: json {"comment": "hide"} Voici un exemple:
"actions": [
    {
        "type": "Action.Execute",
        "fallback": "Action.Submit",
        "data": {
            "mappingMessage": {
                "email": "Email",
                "request_type": "Request Type",
                "description": "Description",
                "title": "Title"
            }
        },
        "title": "Create ticket",
        "iconUrl": "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/310/new-button_1f195.png"
    }
],

# 4 - Sauvegarder et pré remplir les input des adaptive cards

Dans l'adaptive card dans le json d'un input, on stocke la réponse dans les attributs avec pour "key" la valeur qui correspond à "id".

Dans l'exemple ci-dessous la réponse de l'utilisateur sera stockée dans l'attribut 'title'.

{
    "type": "Input.Text",
    "placeholder": "SAP Connection",
    "id": "title",
    "isRequired": true
}

Si l'attribut Title est dĂ©jĂ  connu au moment de l'affichage de la carte, il sera prĂ© rempli avec la valeur de l'attribute 'title'. C'est trĂšs utile lorsque vous utilisez la NLU pour extraire des informations de requĂȘtes utilisateurs et pour Ă©viter de les redemandez Ă  l'utilisateur.

# Utilisation avancée

# Affichage conditionnel

Vous pouvez afficher ou non certains “blocks” en fonction de valeur dĂ©finie dans la mĂ©moire du rĂ©pondant via l’attribut “when”.

Par exemple dans le json ci-dessous, nous affichons un texte différent en fonction de la valeur de l'attribut price.

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "$when": "${price > 30}",
            "text": "This thing is pricy!",
            "color": "attention"
        },
         {
            "type": "TextBlock",
            "$when": "${price <= 30}",
            "text": "Dang, this thing is cheap!",
            "color": "good"
        }
    ]
}

# Affichage conditionnel basé sur les réponse précédentes

Vous souhaitez modifier votre adaptive cards de maniÚre dynamique en "live" quand l'utilisateur répond à une question particuliÚre.

Par exemple, prenons le cas d'une création de ticket comme dans l'image ci-dessous:

Vous souhaitez afficher un contenu différent si la personne choisi de créer un ticket pour un bug, pour une feature request ou une demande d'aide.

C'est pour le moment "impossible" via les adaptive cards. Voici la réponse de Microsoft à ce sujet: https://github.com/microsoft/AdaptiveCards/issues/5422 (opens new window)

Cependant, vous pouvez approcher ce comportement en utilisant les éléments ShowCard comme dans la vidéo ci-dessous: