Agregar lista (colección)
Convierte un Contenedor de tu pantalla en una LISTA dinámica: repite un diseño por cada elemento de un JSON. Sirve para catálogos, chats, historiales… donde los
Convierte un Contenedor de tu pantalla en una LISTA dinámica: repite un diseño por cada elemento de un JSON. Sirve para catálogos, chats, historiales… donde los elementos pueden ser más o menos cada vez, sin crear un componente por elemento. Cómo se arma: 1) En el lienzo crea el Contenedor que llevará la lista y, DENTRO de él, el diseño de UN elemento (un contenedor con sus textos, imágenes, botones…). Ese diseño es la PLANTILLA. Los hijos que tenga el contenedor son plantillas. REGLA: el contenedor de la lista solo puede tener CONTENEDORES como hijos directos (cada uno es la plantilla de un elemento y ya puede llevar adentro textos, botones, imágenes…); si tiene un control suelto al lado, o está vacío, no se puede elegir. 2) En este paso elige ese Contenedor en «Contenedor de la lista» y dile de dónde vienen los datos. 3) Dentro de la plantilla, escribe {{item.campo}} en cualquier texto o propiedad para tomar el dato del elemento (ej. {{item.nombre}}, {{item.precio.total}}); {{index}} es el número del elemento (1, 2, 3…). Entradas: • Acción — «Reemplazar» borra lo que había y muestra los datos nuevos; «Agregar al final» suma a lo que ya hay (útil para paginar); «Vaciar» limpia la lista. • Contenedor de la lista — el Contenedor anfitrión. • Datos — un arreglo JSON de objetos (o un objeto que traiga uno adentro, como la respuesta de una Petición HTTP: elige ▾ → «Resultado de un paso anterior»). • Ruta de los datos (opcional) — dónde está el arreglo dentro de los datos, con puntos (ej. data.items). • Orden — «Invertido» muestra del último al primero (un chat, lo más reciente arriba). • Plantillas por elemento — «Una sola» dibuja UNA plantilla por elemento (si hay varias, la regla de cada una decide cuál toca, ej. tipo es igual a producto; la que no tiene regla es la de respaldo). «Todas las que cumplan» dibuja varias juntas. Dentro de la lista: los eventos (al tocar, al mantener…) de los controles de la plantilla corren con los datos de SU elemento: en cualquier campo de sus pasos, ▾ → «Campo del elemento de la lista» (ej. id, o $index para el número, o $item para el elemento entero). «Modificar control» sobre un control de la plantilla solo cambia el de ESA copia. Límite: 500 elementos. No tiene salidas.
Entradas
- Acción (select)
- Contenedor de la lista (sus hijos son las plantillas) (controlRef)
- Datos (arreglo JSON) (text)
- Ruta de los datos (opcional, ej. data.items) (text)
- Orden (select)
- Plantillas por elemento (select)
