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.

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.

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.

SearchFields: campos de datos del origen de datos en los que se busca cuando el usuario escribe 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.

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).

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.

1. Seleccione Insertar > Entrada > Cuadro combinado y asígnele el nombre "Combobox1".

2. 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.

3. En el mismo panel, seleccione Editar (junto a Campos).

4. En el panel Datos, abra la lista Texto principal y luego seleccione la columna Nombre principal que se mostrará en el control Cuadro combinado.

5. 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

1. 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

1. Seleccione Insertar > Etiqueta de texto y luego seleccione Etiqueta.

2. 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.

1. Seleccione Insertar > Entrada y luego seleccione Cuadro combinado.

2. 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.

3. En el mismo panel, seleccione Editar (junto a Campos).

4. En el panel Datos, abra la lista Texto principal y luego seleccione la columna que desea mostrar en el control Cuadro combinado.

5. Establezca la propiedad IsSearchable en false.

6. Establezca la propiedad SelectMultiple en false.

7. 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.