Introducción
En el editor del App Designer, el control Paneles le permite personalizar la información mostrándola como una lista de tarjetas en una forma organizada y visualmente atractiva. Este artículo explica cómo agregar el control a su app, así como las diferentes formas de configurarlo y personalizarlo según sus necesidades.
Agregar un control Paneles a su página
Para agregar el control Paneles a la página de su app, abra el menú Controles (ubicado en la esquina superior izquierda de la pantalla). Luego, busque el control Colecciones y haga clic en el ícono de flecha para mostrar las opciones disponibles. Desplácese hacia abajo hasta encontrar el control Paneles y arrástrelo a su página.
Opciones de menú en Paneles
Las opciones disponibles en el control son las siguientes:
Opciones de administración
En esta sección del menú, usted puede administrar los datos que su control utilizará para la visualización. Dependiendo del tipo de contenido, ya sea estático o dinámico, siga las instrucciones a continuación:
Contenido estático
Si usted desea trabajar con contenido estático, seleccione la pestaña Fijo, donde encontrará las siguientes opciones:
En la parte superior de la interfaz, usted encontrará la opción Campos visibles, que le permite definir qué campos se muestran en cada tarjeta.
A continuación, usted encontrará la opción Campos adicionales. En esta sección le permite incluir tantos campos como sea necesario y asignar nombres personalizados, usados para filtrar resultados en el control de Búsqueda en Colecciones.
Luego, usted encontrará la opción Enlaces. En esta sección, usted puede personalizar el enlace que aparece en los elementos del control, como configurar el ícono y definir un tooltip para proporcionar información adicional al usuario.
Finalmente, usted encontrará la opción Ítem, donde puede configurar hasta diez elementos dentro de su control. Cada elemento incluye los siguientes campos:
•Imagen: Le permite cargar una imagen desde su equipo.
•Título: Aparece debajo de la imagen y define el título del elemento.
•Texto: Le permite incluir texto descriptivo para cada elemento.
•Enlace: Le permite redirigir a los usuarios a una página dentro de la app o a una URL externa. Si usted selecciona una página interna, debe especificar la página de destino. Si usted selecciona un enlace externo, debe proporcionar la URL. Usted también puede configurar que el enlace se abra en una nueva pestaña.
Una vez que usted termine de configurar el contenido estático, haga clic en el botón Aplicar y cerrar.
Contenido dinámico
Usted puede agregar contenido desde las Vistas, Mis cosas o Casos de Personas utilizando el Asistente de Conexión (ver Contenido dinámico).
Una vez configurado, el control muestra etiquetas que indican el mapeo de datos y la fuente de datos en la esquina inferior derecha.
El control también le permite ejecutar:
•Eventos como Acciones
•Actividades como Acciones
Eventos como Acciones
Eventos como Acciones le permite acceder a los eventos relacionados con una entidad una vez que su app es publicada desde una Colección con datos dinámicos, de la misma manera en que las acciones son accedidas desde una vista con datos dinámicos.
Para acceder a eventos desde colecciones, haga clic en el menú de tres puntos en el elemento de la colección. Esto muestra un menú desplegable con todos los eventos relacionados con la entidad. Haga clic en la opción correspondiente al evento que usted desea ejecutar.
Actividades como Acciones
Los usuarios pueden visualizar y ejecutar actividades pendientes de un proceso desde el menú de tres puntos en un elemento de colección o desde una Página de Detalle. Esto permite que los usuarios las ejecuten más fácilmente y más rápido sin ninguna configuración adicional.
Una vez que usted ha publicado su app, hay dos formas de visualizar las actividades pendientes:
1.En el editor del App Designer ingrese a una página donde una colección ha sido configurada.
a.Seleccione un elemento de la colección y haga clic en el menú de acciones. Se mostrará una lista de actividades pendientes.
b.Para ejecutar una, simplemente selecciónela y se generará un caso.
2.En el editor del App Designer ingrese a una Página de Detalle previamente creada.
a.Acceda a la Página de Detalle (por ejemplo, desde una colección Tarjeta pequeña). La página muestra botones asociados a actividades pendientes.
b.Seleccione una actividad para ejecutarla y generar un caso.
Configuración de Nuevo registro
El control Paneles incluye el botón Nuevo registro. Haga clic en el botón 
para abrir una forma y agregar un nuevo registro.
Opciones de diseño
En esta sección del menú, usted puede configurar el estilo, colores y bordes de su control.
En las opciones de Estilo, usted puede definir las siguientes propiedades:
•Alinear: Alinea el control a la izquierda, centrado o a la derecha.
•Tamaño de imagen (px): Define si la imagen usa su tamaño original o se escala para llenar el contenedor.
•Contenedor de imagen: Define si la imagen se muestra como un rectángulo o como un círculo.
•Ancho del control (%): Ajusta el ancho del control como un porcentaje.
En la opción Fuentes, usted puede seleccionar la familia de fuente y el tamaño. La fuente por defecto es Poppins Regular.
En la opción Colores, usted puede seleccionar diferentes opciones para el fondo, borde, título y texto. Cuando usted agrupa el contenido usando la opción Agrupar por, o configura acciones en su control, usted puede definir dos colores adicionales:
•Color de pestaña de grupo activo: Color de fondo del botón de grupo activo. El grupo activo es el valor de la categoría actualmente utilizada para filtrar el contenido dinámico.
•Color de botón de acción: Color de fondo de los botones que ejecutan Eventos o Actividades configurados como Acciones en el control.
|
•Haga clic en el botón Restablecer para restaurar la configuración por defecto. •Las propiedades con valores heredados muestran un punto azul. Pase el cursor sobre él para ver la fuente. Cuando se modifica, aparece una opción Restablecer para esa propiedad. |
Opciones de visibilidad
En esta sección del menú, usted puede definir la visibilidad del control desde la pestaña VISIBILIDAD.
Esta opción contiene dos secciones:
•En la sección Personas, puede seleccionar las entidades o Personas que tienen permiso para visualizar el control.
•En la sección Dispositivos, puede configurar la visibilidad del control por dispositivo (Desktop, Tablet o Mobile). Para más información, consulte Visibilidad de controles por dispositivo.
Opciones de layout
En esta sección del menú, usted puede configurar el layout del control.
Usted puede definir:
•Ítems mostrados: Define el número de tarjetas mostradas por el control.
•Layout de tarjeta: Define cómo la imagen y el contenido están organizados dentro de cada tarjeta. Las opciones disponibles son:
oIzquierda
oSuperior
oDerecha
Cuando Izquierda o Derecha es seleccionado, la opción Auto ajustar se vuelve disponible. Cuando está habilitada, el layout cambia automáticamente a Superior cuando el ancho de la pantalla es inferior a 830 px, asegurando comportamiento responsivo a través de dispositivos.
•Flujo de contenido: Define cómo las tarjetas son mostradas dentro del control. Usted puede elegir entre:
oLista: Muestra las tarjetas en un layout de una sola columna.
oCuadrícula: Muestra las tarjetas en un layout de cuadrícula con múltiples columnas.
•Espaciado de ítems: Esta configuración define el espaciado entre tarjetas:
oSin espacio: Muestra las tarjetas sin espacio visible entre ellas, colocándolas borde con borde y creando un layout denso.
oCompacto: Aplica un espaciado mínimo entre tarjetas, maximizando la densidad del contenido mientras preserva la separación visual.
oNormal: Aplica un espaciado equilibrado, mejorando la legibilidad.
oAmplio: Incrementa el espaciado para enfatizar la separación entre tarjetas y crear un layout más abierto.
oPersonalizado: Permite definir un valor de espaciado específico entre 0 px y 80 px.
Configuración de Cuadrícula personalizada
Cuando Flujo de contenido está configurado en Cuadrícula, configuraciones adicionales de layout están disponibles para controlar cómo las tarjetas son mostradas y cómo se adaptan a diferentes tamaños de pantalla.
•Modo de ancho de tarjeta: Esta opció define cómo el ancho de las tarjetas se comporta:
oAjustar a la pantalla: El ancho de la tarjeta se adapta automáticamente al espacio disponible. Esto permite que el layout se ajuste dinámicamente, incrementando o reduciendo el número de columnas dependiendo del tamaño de la pantalla.
oDefinir ancho: El ancho de la tarjeta es definido manualmente entre 200 px y 520 px. Esto asegura que todas las tarjetas mantengan el mismo tamaño independientemente del espacio disponible.
•Alineación y distribución: Esta configuración controla cómo las tarjetas son alineadas y distribuidas dentro del contenedor:
oIzquierda: Alinea las tarjetas al lado izquierdo del contenedor.
oDerecha: Alinea las tarjetas al lado derecho del contenedor.
oCentro: Centra las tarjetas dentro del contenedor.
oUniforme: Distribuye las tarjetas uniformemente a través del espacio disponible, asegurando que llenen el contenedor.
oEspacio uniforme: Aplica un espaciado igual entre las tarjetas mientras mantiene su tamaño.
Estas configuraciones le ayudan a mantener layouts consistentes y optimizar el uso del espacio a través de diferentes tamaños de pantalla.
Last Updated 7/14/2026 3:47:21 PM