Búsqueda de escritura anticipada en Tarjetas adaptables
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 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.
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 yisMultiSelect
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 | Yes | Especifica que es un objeto Data.Query. |
conjunto de datos | 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;
}
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 |