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

A funcionalidade de pesquisa Typeahead em Cartões Ajustáveis proporciona uma experiência de pesquisa melhorada no Input.ChoiceSet componente. Fornece uma lista de opções para introduzir texto no campo de pesquisa. Pode incorporar a pesquisa de cabeças-de-letra com Cartões Ajustáveis para procurar e selecionar dados.

Pode utilizar a pesquisa typeahead para as seguintes pesquisas:

• Pesquisa estática
• Pesquisa dinâmica

Pesquisa de cabeças-de-letra estáticas

A pesquisa de typeahead estática permite que os utilizadores pesquisem a partir de valores especificados Input.ChoiceSet no payload cartão ajustável. A pesquisa de cabeças-de-letra estáticas pode ser utilizada para mostrar várias opções ao utilizador. O tamanho do payload na pesquisa estática aumenta com o número de opções especificadas no payload. À medida que o utilizador começa a introduzir os textos, as opções são filtradas, que correspondem parcialmente à entrada. A lista pendente realça os carateres de entrada que correspondem à pesquisa.

A imagem seguinte demonstra a pesquisa de typeahead estática:

Pesquisa dinâmica de cabeças-de-letra

A pesquisa de cabeças-de-letra dinâmicas é útil para pesquisar e selecionar dados de grandes conjuntos de dados. Os conjuntos de dados são carregados dinamicamente a partir do conjunto de dados especificado no payload do cartão. A funcionalidade typeahead ajuda a filtrar as escolhas à medida que o utilizador escreve.

Desktop

Dispositivo móvel

Os clientes móveis Android e iOS suportam a pesquisa typeahead em Cartões Ajustáveis.

Cenário

O João é um funcionário da loja que trabalha numa loja xbox. A loja utiliza um bot para receber novos pedidos de compra dos clientes. Um cliente pode procurar a partir dos milhares de jogos disponíveis. A pesquisa typeahead em Cartões Ajustáveis é utilizada para procurar e selecionar as escolhas dos clientes.

Para utilizar a pesquisa typeahead em Cartões Ajustáveis

1. O utilizador A abre o bot da loja.
2. O utilizador A envia um comando para o bot para um novo pedido de cliente. O bot responde com o Cartão Ajustável que tem Input.ChoiceSet o componente .
3. O utilizador A utiliza a pesquisa typeahead para procurar e selecionar as informações com base na escolha do cliente.

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

Observação

Não pode obter experiências de cartões avançados com a pesquisa dinâmica, como extensões de mensagens baseadas em consultas.

Implementar a pesquisa typeahead

Input.ChoiceSet é um dos componentes de entrada importantes em Cartões Ajustáveis. Pode adicionar um controlo de pesquisa typeahead ao Input.ChoiceSet componente para implementar a pesquisa typeahead. Pode procurar e selecionar as informações necessárias com as seguintes seleções:

• Lista pendente, como seleção expandida.
• Botão de opção, como uma única seleção.
• Caixas de verificação, como múltiplas seleções.

Observação

• O Input.ChoiceSet controlo baseia-se no estilo e isMultiSelect nas propriedades.
• Para utilizar a pesquisa de typeahead dinâmica no chat de grupo, o utilizador tem de adicionar groupchat âmbito ao âmbito de instalação do bot no manifesto da aplicação e instalá-lo nesse chat de grupo específico.
• O número de opções na lista pendente está limitado a 15.

Propriedades do esquema

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

Propriedade	Tipo	Obrigatório	Descrição
estilo	Compact Expandido Filtered	Não	Adiciona o estilo filtrado à lista de validações suportadas para typeahead estático.
choices.data	Data.Query	Não	Ativa o typeahead dinâmico à medida que o utilizador escreve, ao obter um conjunto remoto de opções a partir de um back-end.
valor	Cadeia de caracteres	Não	A escolha inicial (ou conjunto de opções) que tem de ser selecionada. Para seleção múltipla, especifique uma cadeia 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.
conjunto de dados	Cadeia de caracteres	Sim	Especifica o tipo de dados que é obtido dinamicamente.
valor	Cadeia de caracteres	Não	Preenche o pedido de invocação para o bot com a entrada que o utilizador forneceu ao ChoiceSet.
count	Número	Não	Preenche o pedido de invocação para o bot para especificar o número de elementos que têm de ser devolvidos. O bot ignora-o se os utilizadores quiserem enviar uma quantidade diferente.
skip	Número	Não	Preenche o pedido de invocação para o bot para indicar que os utilizadores querem paginar e avançar na lista.

Exemplo

O payload de exemplo que contém a pesquisa de cabeças de letra estática e dinâmica com opções de seleção única e múltipla da seguinte forma:

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

Fragmentos de código para invocar pedido e resposta

Invocar pedido

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

C#

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;
}

Node.js

  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;

    }
  }

JSON

{
    "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
Controlo de pesquisa typeahead em Cartões Ajustáveis	O exemplo mostra como utilizar o controlo de pesquisa de cabeças-de-letra estáticas e dinâmicas em Cartões Ajustáveis.	View	View	Exibir

Confira também

• Cartões e caixas de diálogo
• Ações Universais para Cartões Adaptáveis
• Elementos multimédia no Cartão Ajustável