Recherche en saisie semi-automatique dans les Cartes adaptatives

Article
05/28/2023

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.

Imprimante de bureau
Mobile

Les clients mobiles Android et iOS prennent en charge la recherche de typeahead dans les cartes adaptatives.

Scénario

John est un employé de magasin qui travaille dans un magasin Xbox. Le magasin utilise un bot pour prendre en charge les nouvelles demandes d’achat des clients. Un client peut rechercher parmi les milliers de jeux disponibles. La recherche de typeahead dans les cartes adaptatives est utilisée pour rechercher et sélectionner les choix des clients.

Pour utiliser la recherche de typeahead dans les cartes adaptatives

L’utilisateur A ouvre le bot du magasin.
L’utilisateur A envoie une commande au bot pour une nouvelle demande de client. Le bot répond avec la carte adaptative qui a Input.ChoiceSet un composant.
L’utilisateur A utilise la recherche de typeahead pour rechercher et sélectionner les informations en fonction du choix du client.

L’image suivante illustre l’expérience mobile de la recherche de typeahead :

Remarque

Vous ne pouvez pas obtenir d’expériences de carte enrichies avec la recherche dynamique, comme les extensions de message basées sur des requêtes.

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.

Remarque

Le Input.ChoiceSet contrôle est basé sur le style et les isMultiSelect propriétés.
Pour utiliser la recherche de typeahead dynamique dans la conversation de groupe, l’utilisateur doit ajouter groupchat une étendue à l’étendue d’installation du bot dans le manifeste de l’application et l’installer sur cette conversation de groupe particulière.
Le nombre d’options dans la liste déroulante est limité à 15.

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 :

Propriété	Type	Requis	Description
style	Compact Étendu Filtrée	Non	Ajoute le style filtré à la liste des validations prises en charge pour le typeahead statique.
choices.data	Data.Query	Non	Active le typeahead dynamique à mesure que l’utilisateur tape, en extrayant un ensemble distant de choix à partir d’un back-end.
valeur	Chaîne	Non	Choix initial (ou ensemble de choix) qui doit être sélectionné. Pour la sélection multiple, spécifiez une chaîne de valeurs séparées par des virgules.

Définition de Data.Query

Propriété	Type	Requis	Description
type	Data.Query	Oui	Spécifie qu’il s’agit d’un objet Data.Query.
Dataset	String	Oui	Spécifie le type de données extraites dynamiquement.
valeur	Chaîne	Non	Remplit la demande d’appel au bot avec l’entrée fournie par l’utilisateur au `ChoiceSet`.
count	Nombre	Non	Remplit la demande d’appel au bot afin de spécifier le nombre d’éléments qui doivent être retournés. Le bot l’ignore si les utilisateurs souhaitent envoyer un montant différent.
skip	Nombre	Non	Renseigne la demande d’appel au bot pour indiquer que les utilisateurs souhaitent paginer et avancer dans la liste.

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

Exemple de code

Exemple de nom	Description	.NET	Node.js	Manifeste
Contrôle de recherche typeahead sur les cartes adaptatives	L’exemple montre comment utiliser le contrôle de recherche de typeahead statique et dynamique dans les cartes adaptatives.	View	View	View