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

A funcionalidade de pesquisa de digitação antecipada 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 de digitação antecipada com Cartões Adaptáveis para pesquisar e selecionar dados.

Você pode usar a pesquisa de digitação antecipada para as seguintes pesquisas:

• Pesquisa estática
• Pesquisa dinâmica

Pesquisa estática de digitação antecipada

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

A imagem a seguir demonstra a pesquisa estática de digitação antecipada:

Pesquisa dinâmica de digitação antecipada

A pesquisa dinâmica de digitação antecipada é ú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 conteúdo do card. A funcionalidade de digitação antecipada ajuda a filtrar as opções à medida que o usuário digita.

Implementar a pesquisa de digitação antecipada

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

• Lista suspensa, como a seleção expandida.
• Botão de opção, como seleção única.
• Caixas de seleção, como várias seleções.

Propriedades do esquema

As propriedades a seguir são as novas adições ao esquema para habilitar a Input.ChoiceSet pesquisa de digitação antecipada:

Data.Query

Quando você define a associatedInputs propriedade sob o Data.Query objeto e a define como auto, o Teams inclui todos os valores de entrada do card na solicitação de consulta de dados enviada ao bot. Se você definir o valor como none, o Teams não incluirá nenhum valor de entrada na solicitação de consulta de dados. Essa propriedade permite que o bot use valores de entrada como filtros de pesquisa para refinar a pesquisa dinâmica de digitação antecipada. Para obter mais informações, consulte Entradas dependentes.

Exemplo

O conteúdo de exemplo que contém pesquisa de digitação antecipada estática e dinâmica 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"
}

Trechos de código para invocar solicitação e resposta

Invocar solicitaçã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"
                }
            ]
        }
    }
}

async def on_invoke_activity(self, context: TurnContext):
    if context.activity.name == 'application/search':
        dropdown_card = context.activity.value.get("data", {}).get("choiceselect")
        search_query = context.activity.value.get("queryText", "")

        url = f"http://registry.npmjs.com/-/v1/search?{urllib.parse.urlencode({'text': search_query, 'size': 8})}"
        async with aiohttp.ClientSession() as session:
            async with session.get(url) as response:
                if response.status == 200:
                    data = await response.json()
                    npm_packages = [
                        {
                            'title': obj['package']['name'],
                            'value': f"{obj['package']['name']} - {obj['package'].get('description', 'No description available')}"
                        }
                        for obj in data.get('objects', [])
                    ]

                    return self._build_search_response(dropdown_card, npm_packages)
    return None

Entradas dependentes

Você pode criar Cartões Adaptáveis no Teams em que o valor de uma entrada depende do valor de outra. Por exemplo, considere um Cartão Adaptável com duas Input.ChoiceSet listas suspensas: uma para selecionar um país e outra para selecionar uma cidade específica dentro desse país. A primeira lista suspensa deve filtrar as cidades exibidas na segunda lista suspensa. Isso pode ser feito criando uma Input.ChoiceSet lista suspensa com pesquisa dinâmica de digitação antecipada que depende de uma ou mais outras entradas no card.

Como funciona

Para criar entradas dependentes em um Cartão Adaptável, use as seguintes propriedades:

1. valueChangedAction: defina essa propriedade em qualquer elemento de entrada, como Input.Text ou Input.ChoiceSet. Esta propriedade permite definir a Action.ResetInputs ação, que dispara uma solicitação de consulta de dados para o bot quando um usuário altera o valor de uma entrada no card.

2. Action.ResetInputs: essa ação redefine os valores das entradas especificadas para targetInputIds seus valores padrão.

3. associatedInputs: Defina essa propriedade no objeto Data.Query . Essa propriedade garante que, quando o Teams fizer uma solicitação de consulta de dados ao bot, ela inclua os valores de todas as entradas no card.

Action.ResetInputs

A Action.ResetInputs propriedade redefine os valores das entradas em um Cartão Adaptável. Por padrão, a Action.ResetInputs propriedade redefine os valores de todas as entradas em um Cartão Adaptável. Se você precisar redefinir valores de entrada específicos, defina as IDs dos elementos que contêm esses valores na targetInputIds propriedade.

Exemplo

Considere o exemplo anterior: um card com dois Input.ChoiceSet menus suspensos que permitem aos usuários selecionar um país e uma cidade dentro desse país. O conteúdo de card a seguir demonstra como usar as valueChangedAction propriedades and associatedInputs para implementar o card.

• A valueChangedAction propriedade é definida ao lado da country entrada para garantir que, sempre que seu valor for alterado, o city valor da entrada seja redefinido.
• Como a city entrada é necessária, redefinir seu valor força o usuário a selecionar uma nova cidade sempre que o valor mudar country .
• Com a propriedade definida, quando o associatedInputs Teams envia uma solicitação de consulta de dados para o bot, ela inclui o valor da country entrada. Assim, quando o usuário começa a city digitar na entrada, o card retorna uma lista de cidades para o país selecionado.

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

O trecho de código a seguir mostra um exemplo de uma solicitação de invocação de bot para o conteúdo do card:

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

Exemplo de código

Confira também

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