Introducción
En el editor del App Designer, el control Tarjeta pequeña le permite representar la información contenida en las formas de una colección por medio de una lista de tarjetas, organizando la información de una manera organizada y atractiva. También incluye una opción para ejecutar acciones especificadas por el usuario.
Agregar un control Tarjeta pequeña a su página
Para agregar un control Tarjeta pequeña a la página de su app, abra el menú Controles (ubicado en la esquina superior izquierda de la pantalla). Luego, ubique el control Colecciones y haga clic en el ícono de flecha para mostrar las opciones disponibles. Desplácese hacia abajo hasta encontrar el control Tarjeta pequeña y arrástrelo a la página que usted está editando.
Administrar el contenido del control
Con el control ya agregado a la página de su app, usted puede administrar el contenido que será mostrado. Para hacer esto, pase el cursor sobre 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, seleccione la pestaña Fijo en la ventana Administrar contenido.
Cada ítem de Tarjeta pequeña incluye campos editables relacionados con el contenido mostrado en cada tarjeta:
•Imagen: Le permite cargar una imagen desde su equipo. Para hacer esto, haga clic en el botón Elegir un archivo..., seleccione la imagen deseada y cárguela.
•Título: Corresponde al título del ítem de tarjeta. El título siempre se muestra en la primera línea de la tarjeta.
•Descripción: Le permite proporcionar una breve explicación de la imagen o del título. Este texto aparece en la segunda línea de la tarjeta.
•Subtítulo: Actúa como un subtítulo para la tarjeta y es útil cuando se necesita contexto adicional. Este texto aparece en la tercera línea de la tarjeta.
•Enlace: Le permite definir la 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 para abrir el enlace en una nueva pestaña.
Una vez que usted termine de configurar los campos, haga clic en Aplicar y cerrar para guardar los cambios.
|
Al agregar contenido estático, todas las opciones disponibles para los controles de Colecciones también están disponibles para el control Tarjeta pequeña. 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, haga clic en el menú de tres puntos en un ítem de la colección. Esto abre un menú desplegable que muestra todos los eventos disponibles. Seleccione el 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 ítem y haga clic en el menú de acciones. Se muestra una lista de actividades pendientes.
b.Seleccione una para ejecutarla y generar un caso.
2.En el editor del App Designer vaya a una página de Detalle previamente creada.
a.Acceda a la página de Detalle desde una colección (por ejemplo, desde una colección Tarjeta pequeña).
b.La página muestra botones asociados con actividades pendientes. Seleccione una para ejecutarla y generar un caso.
Configuración de Nuevo registro
El control Tarjeta pequeña 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 cambiar la apariencia del control ajustando su diseño y layout.
Ajustar el diseño del control
Para ajustar el diseño, pase el cursor sobre el control y seleccione la opción Configuración.
Usted puede modificar los siguientes ajustes de diseño:
1.Estilo
•Alinear: Alinea el texto a la izquierda, centro o derecha del control.
•Tamaño de imagen: Define si la imagen es mostrada en su Tamaño original o Escalada para llenar el contenedor.
•Contenedor de imagen: Define la forma de la imagen (cuadrado o redondo).
•Ancho del control: Define el ancho del control relativo al contenedor.
En las siguientes tablas, usted puede ver cómo las imágenes aparecerán basadas en el contenedor de imagen y el tamaño de imagen:
2.Fuentes
•Familia de fuente: Define la fuente usada en el control (por defecto es Poppins Regular).
•Tamaño de fuente: Define el tamaño del texto.
|
Las configuraciones de Fuentes aplican a los campos Título, Descripción y Subtítulo. |
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 tarjeta mostrados (igual que en Estilo).
•Flujo de contenido: Define cómo las tarjetas son mostradas dentro del control. Usted puede elegir entre:
oLista: Muestra las tarjetas en una lista vertical.
oCuadrícula: Muestra las tarjetas 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 tarjeta.
•Espaciado de ítems: Esta opción define el espaciado entre tarjetas:
oSin espacio: Muestra las tarjetas sin espacios visibles, colocándolas borde con borde y creando un layout denso.
oCompacto: Aplica un espaciado mínimo mientras mantiene la separación visual.
oNormal: Usa un espaciado equilibrado para mejorar la legibilidad.
oAmplio: Incrementa el espaciado para enfatizar la separación entre tarjetas.
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: Define cómo el ancho de cada tarjeta se comporta:
oAjustar a la pantalla: El ancho de la tarjeta se adapta automáticamente al espacio disponible, permitiendo que el layout ajuste dinámicamente el número de columnas.
oDefinir ancho: El ancho de la tarjeta es definido manualmente entre 200 px y 520 px, asegurando un tamaño consistente en todas las tarjetas.
•Número de columnas: Define cuántas columnas se muestran en el layout de cuadrícula.
•Alineación y distribución: Controla cómo las tarjetas son posicionadas dentro del contenedor:
oIzquierda: Alinea las tarjetas al lado izquierdo.
oDerecha: Alinea las tarjetas al lado derecho.
oCentro: Centra las tarjetas dentro del contenedor.
oUniforme: Distribuye las tarjetas uniformemente a través del espacio disponible para que llenen el contenedor.
oEspacio uniforme: Aplica un espaciado igual entre las tarjetas mientras mantiene su tamaño.
Estas configuraciones le ayudan a organizar las tarjetas eficientemente, mantener layouts consistentes y optimizar el uso del espacio en diferentes tamaños de pantalla.
Last Updated 7/14/2026 5:40:21 PM