<< Clic para mostrar Tabla de Contenidos >> Navegación:  Automatización de Procesos con poco código > Studio Cloud -ambiente de autoría > Bizagi Apps > App Designer > Editor del App Designer > Controles > Visibilidad de controles por dispositivo

Introducción

La Visibilidad de controles por dispositivo le permite definir si un control en una página de su app se muestra en Desktop, Tablet o Mobile.

 

 

Esta funcionalidad le ayuda a diseñar apps adaptativas que ajustan su contenido según las dimensiones del dispositivo del usuario, mostrando únicamente los controles adecuados para cada tamaño de pantalla. Al configurar la visibilidad a nivel de control, puede presentar controles detallados en pantallas grandes, simplificar los diseños para usuarios móviles y organizar las páginas sin depender de estilos adicionales ni configuraciones externas.

 

Bizagi Apps identifica automáticamente la categoría del dispositivo según el ancho de la pantalla. En la siguiente tabla se resumen los valores utilizados para cada categoría:

 

 

Esta configuración se evalúa durante la renderización de la app publicada y aplica tanto a páginas Públicas como Privadas.

 

Acceder a la Visibilidad de controles por dispositivo

Puede configurar la Visibilidad de controles por dispositivo desde las propiedades de cada control dentro del editor del App Designer. Para encontrar esta configuración, siga los pasos a continuación:

1.Haga clic en el control que desea configurar.

2.Seleccione la opción Visible para para abrir el panel de configuración del control en la parte derecha de la pantalla, con la pestaña VISIBILIDAD ya seleccionada.

3.En esta pestaña encontrará dos secciones:

•Personas: gestiona la visibilidad para determinadas Personas.

•Dispositivos: gestiona la visibilidad para Desktop, Tablet y Mobile.

 

 

 

Configurar la visibilidad de controles por dispositivo

La sección Dispositivos contiene tres opciones de visibilidad: Desktop, Tablet y Mobile. Cada opción determina si el control debe mostrarse en esa categoría de dispositivo. La siguiente tabla explica el comportamiento de cada opción:

 

 

 

Puede ajustar la visibilidad en cualquier momento habilitando o deshabilitando los tipos de dispositivo deseados. Los cambios se guardan automáticamente.

 

Identificar la visibilidad de controles por dispositivo en la página

Puede identificar la Visibilidad de controles por dispositivo directamente en la página mientras edita. Cuando pasa el puntero sobre un control o lo selecciona, se muestran los íconos de dispositivo para Desktop, Tablet y Mobile. Cada ícono representa si el control está configurado para ser visible en ese dispositivo.

 

El estado de visibilidad se indica de la siguiente manera:

•Un ícono de dispositivo resaltado indica que el control es visible en ese dispositivo.

 

 

•Un ícono de dispositivo no resaltado indica que el control está oculto en ese dispositivo.

 

 

Estos indicadores reflejan la configuración definida en VISIBILIDAD > Dispositivos y proporcionan una referencia visual rápida sin abrir el panel de configuración.

 

Ejemplos prácticos

Los siguientes ejemplos ilustran cómo aplicar la Visibilidad de controles por dispositivo a escenarios comunes.

 

Mostrar un control solo en Mobile

Esta configuración es útil cuando desea presentar una acción simplificada o un control compacto específicamente para usuarios móviles. Para lograrlo, siga estos pasos:

1.Seleccione el control.

2.Abra VISIBILIDAD > Dispositivos.

3.Habilite Mobile.

4.Deshabilite Desktop y Tablet.

 

Ocultar un control en Mobile

Algunos controles, como tablas o párrafos largos, pueden no mostrarse bien en pantallas pequeñas. Para ocultar un control en Mobile:

1.Seleccione el control.

2.Vaya a VISIBILIDAD > Dispositivos.

3.Deshabilite Mobile.

4.Mantenga habilitados Desktop y Tablet, si corresponde.

 

Mostrar controles diferentes por dispositivo

En algunos casos, puede querer mostrar un control en Desktop y Tablet, y un control diferente en Mobile. El siguiente ejemplo muestra una configuración común:

 

 

 

 

Puede usar este enfoque para presentar la misma información en diferentes formatos dependiendo del tipo de dispositivo.

 

Comportamiento automático de los contenedores

La Visibilidad de controles por dispositivo también afecta a contenedores como filas, columnas y secciones. Si todos los controles dentro de un contenedor están ocultos para un dispositivo específico, el contenedor también se oculta automáticamente. Esto evita espacios vacíos en el diseño. La misma lógica se aplica de forma recursiva a contenedores anidados.

 

Actualizaciones dinámicas al redimensionar

Cuando un usuario navega por la app publicada, la visibilidad se actualiza automáticamente si el ancho de la pantalla cruza un punto de corte. Los controles aparecen u ocultan según corresponda, sin necesidad de actualizar la página. Los contenedores también ajustan su visibilidad en función de esta configuración. Esta capacidad le permite validar el comportamiento de la página para cada dispositivo directamente desde el navegador.

 

Interacción con la Visibilidad por Personas

La Visibilidad de controles por dispositivo se evalúa junto con la Visibilidad por Personas. Un control se muestra únicamente si está habilitado tanto para la Persona activa como para la categoría de dispositivo correspondiente. Ambos mecanismos son independientes pero complementarios, y se encuentran en la pestaña VISIBILIDAD para centralizar la configuración.

 

Notas importantes

La configuración de la Visibilidad de controles por dispositivo aplica exclusivamente a la app publicada. En el editor del App Designer, todos los controles permanecen visibles para permitir su configuración sin restricciones.

 

Mejores prácticas

Cuando diseñe para múltiples dispositivos, considere utilizar contenido breve y controles simplificados para Mobile. Prefiera elementos compactos, como tarjetas, en lugar de controles amplios como tablas. Si utiliza controles diferentes para cada dispositivo, asígneles nombres claros y descriptivos. Verifique siempre el diseño final utilizando las vistas de Desktop, Tablet y Mobile.

Last Updated 7/16/2026 6:20:06 PM