Introducción
En el editor del App Designer, el control Colección de Listas le permite representar la información contenida en colecciones en forma de una lista, organizando la información de una manera organizada y visualmente atractiva. También incluye la opción de ejecutar acciones especificadas por el usuario.
Agregar un control Colección de Listas a su página
Para agregar el control Colección de Listas 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 Colección de Listas y arrástrelo a su página.
Administrar el contenido del control
Con el control ya agregado, usted puede administrar el contenido mostrado en él. Para hacerlo, haga clic en el control para mostrar las opciones de configuración y luego seleccione la opción Administrar Contenido.
Hay dos tipos de contenido al agregar datos a un control de colecciones:
•Contenido estático: Contenido fijo que no cambia con el tiempo.
•Contenido dinámico: Contenido recuperado de las Vistas, Mis cosas, o Casos de Personas.
Contenido estático
Al agregar contenido estático (seleccionando la pestaña Fijo), el ítem de Colección de Listas incluye los siguientes campos editables:
•Título: Corresponde al título del ítem de la lista. El título siempre se muestra en el lado izquierdo del ítem.
•Texto: Proporciona una breve descripción del título. Este texto se muestra junto al título.
•Enlace: Le permite definir navegación, ya sea a una página interna dentro de la app o a una URL externa. Usted también puede habilitar la opción de abrir el enlace en una nueva pestaña.
|
Al agregar contenido estático, tenga en cuenta que todas las opciones disponibles para los controles de Colecciones también aplican al control Colección de Listas. Para más información, consulte Contenido estático. |
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, existen 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 Colección de Listas incluye un botón Nuevo registro. Haga clic en el botón 
para abrir una forma y agregar un nuevo registro.
Definir la apariencia del control
Usted puede modificar la apariencia del control ajustando su configuración y layout.
Ajustar la configuración del control
Para ajustar la configuración, pase el cursor sobre el control y seleccione la opción Configuración.
Usted puede configurar:
1.Estilo
•Alinear: Alinea el texto a la izquierda, centro o derecha del control.
•Ítems mostrados: Define el número de ítems de la lista mostrados.
•Ancho del control: Define el ancho del control como un porcentaje del contenedor.
2.Fuentes
•Familia de fuente: Define la fuente usada para el texto (por defecto es Poppins Regular).
•Tamaño de fuente: Define el tamaño del texto.
|
Las configuraciones de Fuentes aplican tanto al campo Título como al campo Texto. |
3.Colores
Usted puede configurar lo siguiente:
•Color de fuente: Define el color del texto.
•Color de fondo: Define el color de fondo del control.
•Color de borde: Define el color del borde entre los ítems de la lista.
•Color de ícono: Define el color de los íconos, si están presentes.
Cuando usted agrupa 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.
Ajustar el layout del control
Para ajustar el layout, pase el cursor sobre el control y seleccione la opción Layout.
Usted puede configurar las siguientes opciones:
•Ítems mostrados: Define el número de ítems de la lista mostrados (igual que en Estilo).
•Flujo de contenido: Define cómo los ítems son mostrados dentro del control. Usted puede elegir entre:
oLista: Muestra los ítems en una lista vertical.
oCuadrícula: Muestra los ítems en un layout de cuadrícula.
•Layout del ítem: Define si el texto es posicionado a la izquierda (Básico izquierdo) o a la derecha (Básico derecho) dentro de cada ítem de la lista.
•Espaciado de ítems: Esta configuración define el espaciado entre los ítems:
oSin espacio: Muestra los ítems sin espacios visibles, colocándolos uno junto a otro y creando un layout denso.
oCompacto: Aplica un espaciado mínimo mientras mantiene la separación visual.
oNormal: Usa una cantidad de espaciado equilibrada para mejorar la legibilidad.
oAmplio: Incrementa el espaciado para enfatizar la separación entre los ítems.
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, las siguientes opciones están disponibles:
•Modo de ancho de tarjeta: Esta opción define cómo el ancho de cada ítem se comporta:
oAjustar a la pantalla: El ancho del ítem se adapta automáticamente al espacio disponible, permitiendo que el layout ajuste dinámicamente el número de columnas.
oDefinir ancho: El ancho del ítem es definido manualmente entre 200 px y 520 px, asegurando un tamaño consistente en todos los ítems.
•Número de columnas: Define cuántas columnas se muestran en el layout de cuadrícula.
•Alineación y distribución: Esta configuración controla cómo los ítems son posicionados dentro del contenedor:
oIzquierda: Alinea los ítems al lado izquierdo.
oDerecha: Alinea los ítems al lado derecho.
oCentro: Centra los ítems dentro del contenedor.
oUniforme: Distribuye los ítems uniformemente a través del espacio disponible para que llenen el contenedor.
oEspacio uniforme: Aplica un espaciado igual entre los ítems mientras mantiene su tamaño.
Estas configuraciones le ayudan a organizar los ítems de la lista eficientemente, mantener layouts consistentes y optimizar el uso del espacio en diferentes tamaños de pantalla.
Last Updated 7/14/2026 5:41:13 PM