Control Cuadro combinado en Power Apps
Un control que permite a los usuarios seleccionar entre las opciones proporcionadas. Admite tanto la búsqueda como la selección múltiple.
Descripción
Con un control Cuadro combinado puede buscar los elementos que va a seleccionar. La búsqueda se realiza del lado del servidor en la propiedad SearchField, por lo que el rendimiento no se ve afectado por orígenes de datos grandes.
El modo de selección individual o múltiple se configura mediante la propiedad SelectMultiple.
Cuando se buscan elementos que se van a seleccionar, en todos los elementos puede elegir mostrar un valor de datos único, dos valores o una imagen y dos valores (Persona) mediante la modificación de la configuración de diseño en el panel Data (Datos).
Cuando se visualiza en pantallas pequeñas, el menú desplegable de la lista de elementos se convierte en un control de pantalla completa para una mejor usabilidad.
Nota
Si desea buscar elementos con números, convierta los números a texto con la función Text(). Por ejemplo, Text(12345).
Limitaciones
El control cuadro combinado presenta estas limitaciones:
- Cuando se usa un control Combo box en una galería, sus selecciones no se conservan cuando el usuario se va desplazando por la galería. Esto no ocurre si se usa un control Combo box en una galería que no permite el desplazamiento. En estos momentos no existe una solución alternativa.
Selector de usuarios
Para usar Cuadro combinado como selector de personas, elija la plantilla Persona desde la configuración de diseño del panel Data y configure las propiedades de datos relacionadas que se mostrarán para la persona que aparece a continuación.
Propiedades clave
Items: el origen de datos del que se puede elegir.
DefaultSelectedItems: los elementos seleccionados inicialmente, antes de que el usuario interactúe con el control.
Nota
La propiedad Default está en desuso, use DefaultSelectedItems en su lugar.
SelectedItems: lista de los elementos seleccionados resultante de la interacción con el usuario.
SelectMultiple: si el usuario puede seleccionar un solo elemento o varios.
IsSearchable: indica si el usuario puede buscar elementos antes de realizar la selección.
Nota
IsSearchable solo se puede habilitar en un origen de datos que contenga al menos un campo de texto. La expresión Items debe ser delegable para que las consultas se deleguen con la búsqueda. Es decir, no se admiten instrucciones If en la expresión Items.
SearchFields: campos de datos del origen de datos en los que se busca cuando el usuario escribe texto.
Nota
Para buscar en varios campos, establezca la propiedad SearchFields en este formato: ["MyFirstColumn", "MySecondColumn"]. Solo se admiten campos de texto.
Propiedades adicionales
AccessibleLabel: etiqueta para lectores de pantalla.
BorderColor: el color del borde de un control.
BorderStyle: si el borde del control es Solid, Dashed, Dotted o None.
BorderThickness: el grosor del borde de un control.
DisplayFields: lista de campos que se muestran en cada elemento que devuelve la búsqueda. Lo más fácil es configurarlo mediante el panel Datos de la pestaña de la opción Propiedades.
Nota
Para actualizar varios campos de visualización en una plantilla determinada, establezca la propiedad DisplayFields en este formato: ["MyFirstColumn", "MySecondColumn"].
DisplayMode: indica si el control permite entradas de usuario (Editar), solo muestra datos (Ver) o si está deshabilitado (Deshabilitado).
FocusedBorderColor: el color del borde de un control cuando el control recibe el foco.
FocusedBorderThickness: el grosor del borde de un control cuando el control recibe el foco.
Height: la distancia entre los bordes superior e inferior de un control.
InputTextPlaceholder: texto informativo que se muestra a los usuarios finales cuando no hay elementos seleccionados.
OnChange: acciones a realizar cuando el usuario cambia una selección.
OnNavigate: acciones a realizar cuando el usuario selecciona un elemento.
OnSelect: acciones para llevar a cabo cuando el usuario toca o selecciona un control.
TabIndex: orden de navegación del teclado en relación con otros controles.
Visible: indica si un control aparece o está oculto.
Width: la distancia entre los bordes derecho e izquierdo de un control.
X: la distancia entre el borde izquierdo de un control y el borde izquierdo de su contenedor primario (la pantalla si no hay un contenedor primario).
Y: la distancia entre el borde superior de un control y el borde superior de su contenedor primario (la pantalla si no hay un contenedor primario).
Nota
Las propiedades del borde de control flotante están controladas por las propiedades Frontera.
Ejemplos
Cuadro combinado básico
Los pasos de este ejemplo se aplican a cualquier origen de datos que proporciona tablas, pero para seguir estos pasos exactamente, utilice un entorno con una base de datos de Microsoft Dataverse con datos de ejemplo.
Seleccione Insertar > Entrada > Cuadro combinado y asígnele el nombre "Combobox1".
En el panel Propiedades del lateral derecho de la pantalla, abra la lista Seleccionar un origen de datos (junto a Items) y, luego, agregue o seleccione un origen de datos, como la tabla Cuentas.
En el mismo panel, seleccione Editar (junto a Campos).
En el panel Datos, abra la lista Texto principal y luego seleccione la columna Nombre principal que se mostrará en el control Cuadro combinado.
Mientras mantiene presionada la tecla Alt, seleccione la flecha hacia abajo para abrir el control Cuadro combinado.
El control muestra los datos de la columna Nombre principal que especificó en el origen de datos que especificó.
(Opcional) Mostrar el primer registro de forma predeterminada
Establezca la propiedad DefaultSelectedItems en esta expresión, reemplazando DataSource con el nombre de su origen de datos:
First(DataSource)
(Opcional) Mostrar el valor de nombre de cuenta seleccionado en una etiqueta
Seleccione Insertar > Etiqueta de texto y luego seleccione Etiqueta.
Seleccione la propiedad Text a esta expresión, reemplazando Text con la siguiente fórmula:
If(CountRows(ComboBox1.SelectedItems)>0, Concat(ComboBox1.SelectedItems,'Account Name',", "), "NO SELECTED ITEM")Nota
La instrucción If comprobará cómo pueden existir los elementos seleccionados y los mostrará en una etiqueta delimitada por comas o en un mensaje de "NINGÚN ELEMENTO SELECCIONADO" cuando esté vacío.
Simular un comportamiento desplegable simple
Si configura IsSearchable a false y SelectMultiple a false, puede lograr la misma funcionalidad de un menú desplegable.
Seleccione Insertar > Entrada y luego seleccione Cuadro combinado.
En el panel Propiedades del lateral derecho de la pantalla, abra la lista Seleccionar un origen de datos (junto a Items) y, luego, agregue o seleccione un origen de datos.
En el mismo panel, seleccione Editar (junto a Campos).
En el panel Datos, abra la lista Texto principal y luego seleccione la columna que desea mostrar en el control Cuadro combinado.
Establezca la propiedad IsSearchable en false.
Establezca la propiedad SelectMultiple en false.
Mientras mantiene presionada la tecla Alt, seleccione la flecha hacia abajo para abrir el control Cuadro combinado.
El control muestra los datos de la columna que especificó en el origen de datos que especificó.
Nota
El texto "Buscar elementos" ha desaparecido y solo podrá seleccionar un elemento.
Instrucciones para accesibilidad
Contraste de color
Debe haber un contraste de color adecuado entre:
- ChevronFill y ChevronBackground
- ChevronHoverFill y ChevronHoverBackground
- SelectionColor y SelectionFill
- SelectionFill y Fill
- SelectionTagColor y SelectionTagFill
Y esto, además de los requisitos de contraste de color estándar.
Compatibilidad con el lector de pantalla
La propiedad AccessibleLabel debe estar presente.
Nota
En pantallas táctiles, los usuarios del lector de pantalla pueden desplazarse por el contenido del cuadro combinado secuencialmente. El cuadro combinado actúa como botón que muestra u oculta su contenido cuando se selecciona.
Compatibilidad con el teclado
TabIndex debe ser cero o superior para que los usuarios del teclado puedan desplazarse hasta él.
Los indicadores de foco deben ser claramente visibles. Use FocusedBorderColor y FocusedBorderThickness para conseguirlo.
Nota
La tecla de tabulación permite desplazarse hasta el cuadro combinado o fuera de él. Las teclas de dirección permiten desplazarse por el contenido del cuadro combinado. La tecla escape cierra la lista desplegable cuando está abierta.
Nota
¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)
La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).