Búsqueda de escritura anticipada en Tarjetas adaptables

Artículo
05/25/2023

La funcionalidad de búsqueda de typeahead en tarjetas adaptables proporciona una experiencia de búsqueda mejorada en el Input.ChoiceSet componente. Proporciona una lista de opciones para escribir texto en el campo de búsqueda. Puede incorporar la búsqueda de typeahead con tarjetas adaptables para buscar y seleccionar datos.

Puede usar la búsqueda de typeahead para las siguientes búsquedas:

Búsqueda estática
Búsqueda dinámica

Búsqueda de encabezado de tipo estático

La búsqueda de encabezado de tipo estático permite a los usuarios buscar desde los valores especificados en Input.ChoiceSet la carga de la tarjeta adaptable. La búsqueda de encabezado de tipo estática se puede usar para mostrar varias opciones al usuario. El tamaño de carga en la búsqueda estática aumenta con el número de opciones especificadas en la carga. A medida que el usuario comienza a escribir los textos, se filtran las opciones, que coinciden parcialmente con la entrada. La lista desplegable resalta los caracteres de entrada que coinciden con la búsqueda.

En la imagen siguiente se muestra la búsqueda de encabezado de tipo estática:

Búsqueda dinámica de encabezados de tipo

La búsqueda dinámica de encabezados de tipo es útil para buscar y seleccionar datos de grandes conjuntos de datos. Los conjuntos de datos se cargan dinámicamente desde el conjunto de datos especificado en la carga de la tarjeta. La funcionalidad typeahead ayuda a filtrar las opciones como tipos de usuario.

Escritorio
Móvil

Los clientes móviles de Android e iOS admiten la búsqueda de tipoahead en tarjetas adaptables.

Escenario

John es un empleado de la tienda que trabaja en una tienda minorista de Xbox. La tienda usa un bot para realizar nuevas solicitudes de compra de los clientes. Un cliente puede buscar en los miles de juegos disponibles. La búsqueda de typeahead en tarjetas adaptables se usa para buscar y seleccionar las opciones de los clientes.

Para usar la búsqueda de typeahead en tarjetas adaptables

El usuario A abre el bot de la tienda.
El usuario A envía un comando al bot para una nueva solicitud de cliente. El bot responde con la tarjeta adaptable que tiene Input.ChoiceSet el componente .
El usuario A usa la búsqueda de encabezados de tipo para buscar y seleccionar la información en función de la elección del cliente.

En la imagen siguiente se muestra la experiencia móvil de la búsqueda de typeahead:

Nota:

No puede obtener experiencias de tarjeta enriquecidas con búsqueda dinámica, como extensiones de mensajes basadas en consultas.

Implementación de la búsqueda de typeahead

Input.ChoiceSet es uno de los componentes de entrada importantes en tarjetas adaptables. Puede agregar un control de búsqueda typeahead al Input.ChoiceSet componente para implementar la búsqueda de typeahead. Puede buscar y seleccionar la información necesaria con las siguientes selecciones:

Lista desplegable, como la selección expandida.
Botón de radio, como selección única.
Casillas, como varias selecciones.

Nota:

El Input.ChoiceSet control se basa en el estilo y isMultiSelect las propiedades.
Para usar la búsqueda dinámica de typeahead en el chat de grupo, el usuario debe agregar groupchat ámbito al ámbito de instalación del bot en el manifiesto de la aplicación e instalarlo en ese chat de grupo determinado.
El número de opciones de la lista desplegable está limitado a 15.

Propiedades de esquema

Las propiedades siguientes son las nuevas adiciones al esquema para habilitar la Input.ChoiceSet búsqueda de typeahead:

Propiedad	Tipo	Obligatorio	Descripción
style	Compact Expanded Filtered	No	Agrega estilo filtrado a la lista de validaciones admitidas para typeahead estático.
choices.data	Data.Query	No	Habilita typeahead dinámico como tipos de usuario, mediante la captura de un conjunto remoto de opciones de un back-end.
valor	Cadena	No	Elección inicial (o conjunto de opciones) que se debe seleccionar. Para la selección múltiple, especifique una cadena de valores separados por comas.

Definición de Data.Query

Propiedad	Tipo	Obligatorio	Descripción
type	Data.Query	Sí	Especifica que es un objeto Data.Query.
Dataset	Cadena	Sí	Especifica el tipo de datos que se capturan dinámicamente.
valor	Cadena	No	Rellena la solicitud de invocación al bot con la entrada que el usuario proporcionó a `ChoiceSet`.
count	Número	No	Rellena la solicitud de invocación al bot para especificar el número de elementos que se deben devolver. El bot lo omite si los usuarios quieren enviar una cantidad diferente.
skip	Número	No	Rellena la solicitud de invocación al bot para indicar que los usuarios quieren paginar y avanzar en la lista.

Ejemplo

La carga útil de ejemplo que contiene la búsqueda de typeahead estática y dinámica con opciones de selección única y múltiple de la siguiente manera:

{
  "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 solicitud y respuesta

Invocación de la solicitud

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

Respuesta

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

Ejemplo de código

Ejemplo de nombre	Descripción	.NET	Node.js	Manifiesto
Control de búsqueda de typeahead en tarjetas adaptables	En el ejemplo se muestra cómo usar el control de búsqueda de typeahead estático y dinámico en tarjetas adaptables.	View	View	Ver