Cómo crear un asistente de autocompletar en Power Apps / Power Platform
Este tutorial enseña a crear un asistente de autocompletar en Power Apps / Power Platform que sugiere valores mientras el usuario escribe. Es útil para acelerar la introducción de datos, reducir errores tipográficos y mejorar la experiencia del usuario en formularios o búsquedas.
Requisitos previos
- Cuenta con acceso a Power Apps.
- Una fuente de datos simple: lista de SharePoint, Excel en OneDrive o Dataverse con la columna a sugerir.
- Conocimientos básicos de Canvas Apps: galerías, Text Input y funciones Filter/StartsWith.
Paso 1: Preparar la fuente de datos
Elija o cree una fuente de datos con los valores a sugerir. Por ejemplo, una lista de SharePoint llamada "Productos" con la columna "Title" que contiene nombres de productos. Tener datos limpios facilita las sugerencias.
// Exemplo de itens (na prática estão na lista do SharePoint ou Excel) // Title
// Monitor 24"
// Teclado Mecânico
// Rato Óptico
// Monitor 27"
Paso 2: Crear un Canvas App y conectar la fuente de datos
Abra Power Apps Studio, cree un Canvas App (Tablet o Phone) y añada la fuente de datos elegida desde el panel Data.
Data sources -> Add data -> SharePoint -> selecionar site -> Produtos
Paso 3: Añadir un control Text Input para la escritura
Inserte un control Text input y establezca su Name en txtSearch. Este será el campo donde el usuario escribe y que dispara las sugerencias.
// Propriedades principais
Name: txtSearch
HintText: "Pesquisar produto..."
Paso 4: Añadir una galería para presentar sugerencias
Inserte una Gallery (vertical, sin encabezado) debajo de txtSearch. Configurela para mostrar solo las sugerencias filtradas de la fuente de datos, usando StartsWith o Filter para la coincidencia.
// Propriedade Items da Gallery (chamada galSuggestions)
Items:
If(
IsBlank(txtSearch.Text),
[],
FirstN(
Filter(Produtos, StartsWith(Title, txtSearch.Text)),
10
)
)
// TemplateLabel.Text: ThisItem.Title
Paso 5: Permitir selección y rellenar el campo
En el template de la galería, añada un botón o haga el propio template clicable. Al seleccionar un elemento, actualice txtSearch.Text con el valor elegido y oculte las sugerencias (por ejemplo, limpiar la galería).
// OnSelect do template (ou botão dentro do template)
Set(varSelected, ThisItem.Title);
UpdateContext({showSuggestions: false});
Reset(txtSearch);
// Preencher o campo de destino se existir outro campo, por exemplo txtChosen
txtSearch.Text := varSelected
// Em Canvas Apps, para forçar atribuição use:
// Set(varChosen, ThisItem.Title)
Nota: Text input Text es una propiedad de solo lectura en runtime — en vez de asignar la Text directamente, use una variable para vincular el valor mostrado. Por ejemplo defina Default del txtSearch como varChosen.
// Default do txtSearch
Default: If(IsBlank(varChosen), "", varChosen)
Paso 6: Mejorar la experiencia (debounce y mostrar/ocultar)
Para evitar muchos filtros mientras el usuario escribe, use un temporizador (Timer) para aplicar un pequeño retraso (debounce). Mostrar/ocultar la galería con una variable hace la interacción más limpia.
// Adicionar um Timer (Name: tmrDebounce)
Duration: 400 // 400 ms
AutoStart: false
Repeat: false
// OnChange do txtSearch
UpdateContext({showSuggestions: true});
Reset(tmrDebounce); Start(tmrDebounce);
// OnTimerEnd do tmrDebounce (faz o filtro ao terminar)
// Forçar refresh da Galeria ao terminar (a Items já usa txtSearch.Text)
UpdateContext({doFilterToggle: !doFilterToggle});
Paso 7: Manejar errores y optimizar
Errores comunes: usar Filter en grandes fuentes de datos sin delegación. Para listas grandes, prefiera funciones delegables (StartsWith es delegable en SharePoint para texto). Si la fuente supera los límites de delegación, considere índices, vistas filtradas en el servidor o usar Azure Functions/Custom Connector.
// Exemplo de fallback para grandes volumes
Items:
If(CountRows(Produtos) < 2000,
Filter(Produtos, StartsWith(Title, txtSearch.Text)),
FirstN( Filter(Produtos, StartsWith(Title, txtSearch.Text)), 100 )
)
Verificar el resultado
Probar la app: escriba en txtSearch y verifique que la galería muestra sugerencias relevantes en tiempo real. Seleccione una sugerencia y confirme que el campo principal recibe el valor. Compruebe también comportamientos para términos inexistentes y para entradas vacías.
Conclusión
Ahora tiene un asistente de autocompletar funcional en Power Apps / Power Platform que mejora la rapidez y calidad de los datos. Próximos pasos: añadir ordenación por relevancia, resaltar el texto correspondiente en las sugerencias o integrar con Dataverse para lógica más avanzada. Consejo: pruebe ajustar el Duration del Timer para equilibrar rapidez y número de llamadas delegadas.