Pesquisa de preenchimento automático em cartões adaptáveis

Artigo
05/28/2023

A funcionalidade de pesquisa typeahead em Cartões Adaptáveis oferece uma experiência de pesquisa aprimorada no Input.ChoiceSet componente. Ele fornece uma lista de opções para inserir texto no campo de pesquisa. Você pode incorporar a pesquisa typeahead com Cartões Adaptáveis para pesquisar e selecionar dados.

Você pode usar a pesquisa typeahead para as seguintes pesquisas:

Pesquisa estática
Pesquisa dinâmica

Pesquisa de tipo estático

A pesquisa de typeahead estático permite que os usuários pesquisem em valores especificados Input.ChoiceSet no conteúdo do Cartão Adaptável. A pesquisa de tipo estático pode ser usada para mostrar várias opções ao usuário. O tamanho da carga na pesquisa estática aumenta com o número de opções especificadas na carga. À medida que o usuário começa a inserir os textos, as opções são filtradas, que correspondem parcialmente à entrada. A lista suspensa realça os caracteres de entrada que correspondem à pesquisa.

A imagem a seguir demonstra a pesquisa de typeahead estático:

Pesquisa de typeahead dinâmico

A pesquisa de typeahead dinâmico é útil para pesquisar e selecionar dados de grandes conjuntos de dados. Os conjuntos de dados são carregados dinamicamente do conjunto de dados especificado no conteúdo cartão. A funcionalidade typeahead ajuda a filtrar as opções como os tipos de usuário.

Desktop
Dispositivo móvel

Os clientes móveis Android e iOS dão suporte à pesquisa typeahead em Cartões Adaptáveis.

Cenário

John é um funcionário da loja que trabalha em uma loja de varejo do Xbox. A loja usa um bot para receber novas solicitações de compra dos clientes. Um cliente pode pesquisar nos milhares de jogos disponíveis. A pesquisa typeahead em Cartões Adaptáveis é usada para pesquisar e selecionar as escolhas dos clientes.

Para usar a pesquisa typeahead em Cartões Adaptáveis

O usuário A abre o bot da loja.
O usuário A envia um comando para o bot para uma nova solicitação do cliente. O bot responde com o Cartão Adaptável que tem Input.ChoiceSet componente.
O usuário A usa a pesquisa typeahead para pesquisar e selecionar as informações com base na escolha do cliente.

A imagem a seguir ilustra a experiência móvel da pesquisa typeahead:

Observação

Você não pode obter experiências cartão avançadas com pesquisa dinâmica, como extensões de mensagem baseadas em consulta.

Implementar pesquisa de typeahead

Input.ChoiceSet é um dos componentes de entrada importantes em Cartões Adaptáveis. Você pode adicionar um controle de pesquisa typeahead ao Input.ChoiceSet componente para implementar a pesquisa typeahead. Você pode pesquisar e selecionar as informações necessárias com as seguintes seleções:

Suspenso, como seleção expandida.
Botão de rádio, como seleção única.
Caixas de seleção, como várias seleções.

Observação

O Input.ChoiceSet controle é baseado no estilo e isMultiSelect nas propriedades.
Para usar a pesquisa de tipo dinâmico no chat em grupo, o usuário deve adicionar groupchat escopo ao escopo de instalação do bot no manifesto do aplicativo e instalá-lo nesse chat de grupo específico.
O número de opções na lista suspensa é limitado a 15.

Propriedades de esquema

As seguintes propriedades são as novas adições ao Input.ChoiceSet esquema para habilitar a pesquisa typeahead:

Propriedade	Tipo	Obrigatório	Descrição
estilo	Compact Expandido Filtered	Não	Adiciona estilo filtrado à lista de validações com suporte para typeahead estático.
choices.data	Data.Query	Não	Habilita o typeahead dinâmico como os tipos de usuário, buscando um conjunto remoto de opções de um back-end.
valor	Cadeia de caracteres	Não	A opção inicial (ou conjunto de opções) que deve ser selecionada. Para várias seleções, especifique uma cadeia de caracteres de valores separada por vírgulas.

Definição de Data.Query

Propriedade	Tipo	Obrigatório	Descrição
type	Data.Query	Sim	Especifica que é um objeto Data.Query.
Dataset	Cadeia de caracteres	Sim	Especifica o tipo de dados que é buscado dinamicamente.
valor	Cadeia de caracteres	Não	Preenche a solicitação de invocação para o bot com a entrada fornecida pelo usuário ao `ChoiceSet`.
count	Número	Não	Preenche a solicitação de invocação para o bot para especificar o número de elementos que devem ser retornados. O bot o ignorará se os usuários desejarem enviar uma quantidade diferente.
skip	Número	Não	Preenche a solicitação de invocação para o bot para indicar que os usuários querem paginar e avançar na lista.

Exemplo

O exemplo de conteúdo que contém pesquisa de typeahead estático e dinâmico com opções de seleção única e múltipla da seguinte maneira:

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

Snippets de código para solicitação e resposta de invocação

Solicitação de invocação

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

Resposta

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

Exemplo de código

Nome de exemplo	Descrição	.NET	Node.js	Manifesto
Controle de pesquisa typeahead em Cartões Adaptáveis	O exemplo mostra como usar o controle de pesquisa de typeahead estático e dinâmico em Cartões Adaptáveis.	View	View	Exibir