Recherche en saisie semi-automatique dans les Cartes adaptatives

La fonctionnalité de recherche de typeahead dans les cartes adaptatives offre une expérience de recherche améliorée sur le Input.ChoiceSet composant. Il fournit une liste de choix pour entrer du texte dans le champ de recherche. Vous pouvez incorporer la recherche de typeahead avec les cartes adaptatives pour rechercher et sélectionner des données.

Vous pouvez utiliser la recherche de typeahead pour les recherches suivantes :

• Recherche statique
• Recherche dynamique

Recherche de typeahead statique

La recherche de typeahead statique permet aux utilisateurs de rechercher à partir des valeurs spécifiées dans Input.ChoiceSet la charge utile de la carte adaptative. La recherche de typeahead statique peut être utilisée pour afficher plusieurs choix à l’utilisateur. La taille de la charge utile dans la recherche statique augmente avec le nombre de choix spécifiés dans la charge utile. Lorsque l’utilisateur commence à entrer les textes, les choix sont filtrés, qui correspondent partiellement à l’entrée. La liste déroulante met en évidence les caractères d’entrée qui correspondent à la recherche.

L’image suivante illustre la recherche de typeahead statique :

Recherche dynamique de typeahead

La recherche de typeahead dynamique est utile pour rechercher et sélectionner des données à partir de jeux de données volumineux. Les jeux de données sont chargés dynamiquement à partir du jeu de données spécifié dans la charge utile carte. La fonctionnalité typeahead permet de filtrer les choix au fur et à mesure que l’utilisateur tape.

Implémenter la recherche de typeahead

Input.ChoiceSet est l’un des composants d’entrée importants des cartes adaptatives. Vous pouvez ajouter un contrôle de recherche de typeahead au Input.ChoiceSet composant pour implémenter la recherche de typeahead. Vous pouvez rechercher et sélectionner les informations requises avec les sélections suivantes :

• Liste déroulante, telle que la sélection développée.
• Case d’option, par exemple une sélection unique.
• Cases à cocher, telles que plusieurs sélections.

Propriétés du schéma

Les propriétés suivantes sont les nouveaux ajouts au schéma pour activer la Input.ChoiceSet recherche de typeahead :

Data.Query

Lorsque vous définissez la associatedInputs propriété sous l’objet Data.Query et que vous autola définissez sur , Teams inclut toutes les valeurs d’entrée du carte dans la demande de requête de données envoyée au bot. Si vous définissez la valeur nonesur , Teams n’inclut aucune valeur d’entrée dans la demande de requête de données. Cette propriété permet au bot d’utiliser des valeurs d’entrée comme filtres de recherche pour affiner la recherche dynamique de typeahead. Pour plus d’informations, consultez Entrées dépendantes.

Exemple

L’exemple de charge utile qui contient la recherche de typeahead statique et dynamique avec des options à sélection unique et à sélection multiple comme suit :

{
  "type": "AdaptiveCard",
  "body": [
    {
      "columns": [
        {
          "width": "1",
          "items": [
            {
              "size": null,
              "url": "https://urlp.asm.skype.com/v1/url/content?url=https%3a%2f%2fi.imgur.com%2fhdOYxT8.png",
              "height": "auto",
              "type": "Image"
            }
          ],
          "type": "Column"
        },
        {
          "width": "2",
          "items": [
            {
              "size": "extraLarge",
              "text": "Game Purchase",
              "weight": "bolder",
              "wrap": true,
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "text": "Please fill out the below form to send a game purchase request.",
      "wrap": true,
      "type": "TextBlock"
    },
    {
      "columns": [
        {
          "width": "auto",
          "items": [
            {
              "text": "Game: ",
              "wrap": true,
              "height": "stretch",
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "stretch",
          "items": [
            {
              "choices": [
                {
                  "title": "Call of Duty",
                  "value": "call_of_duty"
                },
                {
                  "title": "Death's Door",
                  "value": "deaths_door"
                },
                {
                  "title": "Grand Theft Auto V",
                  "value": "grand_theft"
                },
                {
                  "title": "Minecraft",
                  "value": "minecraft"
                }
              ],
              "style": "filtered",
              "placeholder": "Search for a game",
              "id": "choiceGameSingle",
              "type": "Input.ChoiceSet"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "auto",
          "items": [
            {
              "text": "Multi-Game: ",
              "wrap": true,
              "height": "stretch",
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "stretch",
          "items": [
            {
              "choices": [
                {
                  "title": "Static Option 1",
                  "value": "static_option_1"
                },
                {
                  "title": "Static Option 2",
                  "value": "static_option_2"
                },
                {
                  "title": "Static Option 3",
                  "value": "static_option_3"
                }
              ],
              "value": "Static_option_2",
              "isMultiSelect": true,
              "style": "filtered",
              "choices.data": {
                "type": "Data.Query",
                "dataset": "xbox"
              },
              "id": "choiceGameMulti",
              "type": "Input.ChoiceSet"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "columns": [
        {
          "width": "auto",
          "items": [
            {
              "text": "Needed by: ",
              "wrap": true,
              "height": "stretch",
              "type": "TextBlock"
            }
          ],
          "type": "Column"
        },
        {
          "width": "stretch",
          "items": [
            {
              "id": "choiceDate",
              "type": "Input.Date"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet"
    },
    {
      "text": "Buy and download digital games and content directly from your Xbox console, Windows 10 PC, or at Xbox.com.",
      "wrap": true,
      "type": "TextBlock"
    },
    {
      "text": "Earn points for what you already do on Xbox, then redeem your points on real rewards. Play more, get rewarded. Start earning today.",
      "wrap": true,
      "type": "TextBlock"
    }
  ],
  "actions": [
    {
      "data": {
        "msteams": {
          "type": "invoke",
          "value": {
            "type": "task/submit"
          }
        }
      },
      "title": "Request Purchase",
      "type": "Action.Submit"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2"
}

Extraits de code pour appeler la demande et la réponse

Appeler la demande

{
    "name": "application/search",
    "type": "invoke",
    "value": {
        "queryText": "fluentui",
        "queryOptions": {
            "skip": 0,
            "top": 15
        },
        "dataset": "npm"
    },
    "locale": "en-US",
    "localTimezone": "America/Los_Angeles",
    // …. other fields
}

Réponse

protected override async Task<InvokeResponse> OnInvokeActivityAsync(ITurnContext<IInvokeActivity> turnContext, CancellationToken cancellationToken)
{
    if (turnContext.Activity.Name == "application/search")
    {
 var packages = new[] {
   new { title = "A very extensive set of extension methods", value = "FluentAssertions" },
   new { title = "Fluent UI Library", value = "FluentUI" }};

 var searchResponseData = new
 {
     type = "application/vnd.microsoft.search.searchResponse",
     value = new
     {
  results = packages
     }
 };
 var jsonString = JsonConvert.SerializeObject(searchResponseData);
 JObject jsonData = JObject.Parse(jsonString);
 return new InvokeResponse()
 {
     Status = 200,
     Body = jsonData
 };
    }

    return null;
}

  async onInvokeActivity(context) {
    if (context._activity.name == 'application/search') {
      // let searchQuery = context._activity.value.queryText;  // This can be used to filter the results
      var successResult = {
        status: 200,
        body: {
          "type": "application/vnd.microsoft.search.searchResponse",
          "value": {
            "results": [
              {
                "value": "FluentAssertions",
                "title": "A very extensive set of extension methods"
              },
              {
                "value": "FluentUI",
                "title": "Fluent UI Library"
              }
            ]
          }
        }
      }

      return successResult;

    }
  }

{
    "status": 200,
    "body" : {
        "type": "application/vnd.microsoft.search.searchResponse",
        "value": {
           "results": [
                {
                    "value": "FluentAssertions",
                    "title": "A very extensive set of extension methods."
                },
                {
                    "value": "FluentUI",
                    "title": "Fluent UI Library"
                }
            ]
        }
    }
}

Entrées dépendantes

Vous pouvez concevoir des cartes adaptatives dans Teams où la valeur d’une entrée dépend de la valeur d’une autre. Par exemple, considérez une carte adaptative avec deux Input.ChoiceSet listes déroulantes : une pour sélectionner un pays et une autre pour sélectionner une ville spécifique dans ce pays. La première liste déroulante doit filtrer les villes affichées dans la deuxième liste déroulante. Pour ce faire, vous pouvez créer une Input.ChoiceSet liste déroulante avec une recherche dynamique de typehead qui dépend d’une ou plusieurs autres entrées dans le carte.

Mode de fonctionnement

Pour créer des entrées dépendantes dans une carte adaptative, utilisez les propriétés suivantes :

1. valueChangedAction : définissez cette propriété sur n’importe quel élément d’entrée, tel que Input.Text ou Input.ChoiceSet. Cette propriété vous permet de définir l’actionAction.ResetInputs, qui déclenche une requête de données au bot lorsqu’un utilisateur modifie la valeur d’une entrée dans le carte.

2. Action.ResetInputs : cette action réinitialise les valeurs par défaut des entrées sous targetInputIds lesquelles vous spécifiez.

3. associatedInputs : définissez cette propriété sous l’objet Data.Query . Cette propriété garantit que lorsque Teams envoie une requête de requête de données à votre bot, elle inclut les valeurs de toutes les entrées dans le carte.

Action.ResetInputs

La Action.ResetInputs propriété réinitialise les valeurs des entrées dans une carte adaptative. Par défaut, la Action.ResetInputs propriété réinitialise les valeurs de toutes les entrées dans une carte adaptative. Si vous devez réinitialiser des valeurs d’entrée particulières, définissez les ID des éléments contenant ces valeurs dans la targetInputIds propriété .

Exemple

Prenons l’exemple précédent : une carte avec deux Input.ChoiceSet listes déroulantes qui permettent aux utilisateurs de sélectionner un pays et une ville dans ce pays. La charge utile carte suivante montre comment utiliser les valueChangedAction propriétés et associatedInputs pour implémenter les carte.

• La valueChangedAction propriété est définie en même temps que l’entrée country pour s’assurer que chaque fois que sa valeur change, la valeur de l’entrée city est réinitialisée.
• Étant donné que l’entrée city est requise, la réinitialisation de sa valeur force l’utilisateur à sélectionner une nouvelle ville chaque fois que la valeur de country change.
• Une fois la associatedInputs propriété définie, lorsque Teams envoie une demande de requête de données au bot, elle inclut la valeur de l’entrée country . Par conséquent, lorsque l’utilisateur commence à taper dans l’entréecity, l’carte retourne une liste de villes pour le pays sélectionné.

{
    "type": "AdaptiveCard",
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "size": "ExtraLarge",
            "text": "Country Picker",
            "weight": "Bolder",
            "wrap": true,
            "type": "TextBlock"
        },
        {
            "id": "country",
            "type": "Input.ChoiceSet",
            "label": "Select a country or region:",
            "choices": [
                {
                    "title": "USA",
                    "value": "usa"
                },
                {
                    "title": "France",
                    "value": "france"
                },
                {
                    "title": "India",
                    "value": "india"
                }
            ],
            "valueChangedAction": {
                "type": "Action.ResetInputs",
                "targetInputIds": [
                    "city"
                ]
            },
            "isRequired": true,
            "errorMessage": "Please select a country or region"
        },
        {
            "style": "filtered",
            "choices.data": {
                "type": "Data.Query",
                "dataset": "cities",
                "associatedInputs": "auto"
            },
            "id": "city",
            "type": "Input.ChoiceSet",
            "label": "Select a city:",
            "placeholder": "Type to search for a city in the selected country",
            "isRequired": true,
            "errorMessage": "Please select a city"
        }
    ],
    "actions": [
        {
            "title": "Submit",
            "type": "Action.Submit"
        }
    ]
}

L’extrait de code suivant montre un exemple de demande d’appel de bot pour la charge utile carte :

{
    "name": "application/search",
    "type": "invoke",
    "value": {
        "queryText": "india",
        "queryOptions": {
            "skip": 0,
            "top": 15
        },
        "dataset": "cities",
        "data": {
            "country": "<value of the country input>"
        }
    },
    // …. other fields
}

Exemple de code

Voir aussi

• Cartes et boîtes de dialogue
• Actions universelles pour les cartes adaptatives
• Éléments multimédias dans la carte adaptative