Dominar la distribución de elementos en una cabecera y conectar acciones mediante workflows son dos habilidades fundamentales para construir aplicaciones funcionales en Bubble. Aquí se explica paso a paso cómo resolver el problema del alineamiento cuando necesitas iconos a la derecha y cómo lanzar un pop up con tu primer flujo de trabajo.
¿Por qué los iconos se alinean siempre a la izquierda en la cabecera?
El grupo de la cabecera está configurado como un contenedor tipo fila con alineamiento a la izquierda [0:06]. Esto significa que cualquier elemento que arrastres dentro de él se posicionará automáticamente a la izquierda, uno tras otro. Si intentas colocar dos iconos nuevos esperando que queden a la derecha, verás que Bubble los empuja al mismo lado izquierdo.
La solución más sencilla es crear dos subgrupos dentro de la cabecera:
- Un grupo izquierdo con alineamiento a la izquierda.
- Un grupo derecho con alineamiento a la derecha.
¿Cómo agrupar elementos que ya están colocados?
Cuando ya tienes elementos en la cabecera, existe un truco práctico [1:07]. Selecciona el primer elemento (por ejemplo, la barra de búsqueda), mantén pulsada la tecla Shift y haz clic en los otros dos iconos. Con los tres elementos seleccionados, pulsa el botón derecho del ratón y elige la opción de agrupar en un container tipo fila.
Ahora necesitas un segundo grupo que ocupe el espacio restante:
- Crea un nuevo grupo en la zona derecha de la cabecera [1:37].
- Alinéalo al centro y configúralo como tipo fila.
- Elimina el parámetro de ancho fijo para que se extienda y ocupe toda la zona restante.
- Cambia su alineamiento a derecha [2:02].
Con esta estructura, los iconos que coloques en el segundo grupo se posicionarán automáticamente a la derecha de la cabecera.
¿Qué son los workflows y cómo se crean en Bubble?
Un workflow o flujo de trabajo es la forma en que Bubble define qué ocurre cuando el usuario interactúa con un elemento [2:30]. En este caso, al presionar el icono de "más", queremos que aparezca un pop up para crear una nueva tarea.
¿Cómo añadir un pop up y vincularlo a un icono?
Los pop ups son un tipo de contenedor que se muestra por encima de cualquier otra información en la página [2:52]. Para crearlo:
- Selecciona Pop up en el panel de elementos y arrástralo al tamaño deseado.
- Asígnale un nombre descriptivo, como "Pop up nueva tarea" [3:07].
Para conectarlo con el icono, selecciona el icono y pulsa el botón Start edit workflow [3:25]. Bubble te lleva al editor de workflows, donde ya aparece la condición: "cuando el icono nueva tarea es presionado".
Desde ahí, añade una acción seleccionando element actions (acciones de elementos) y elige show (mostrar) [4:27]. Bubble te preguntará qué elemento mostrar: selecciona el pop up nueva tarea. Con eso, tu primer workflow está completo.
¿Cómo organizar los workflows para no perderlos?
Cuando tu aplicación crezca y tengas cientos de flujos de trabajo, encontrar el correcto puede ser complicado. Bubble ofrece dos herramientas de organización [3:48]:
- Colores: asigna un color a cada workflow desde el desplegable. Una técnica útil es mantenerlo en gris mientras trabajas en él y cambiarlo a azul cuando esté completo y aprobado.
- Carpetas: crea carpetas temáticas (por ejemplo, "cabecera") para agrupar flujos relacionados. Después, usa el buscador de workflows para filtrar por carpeta.
Estas prácticas de organización son sencillas al principio, pero se vuelven imprescindibles a medida que el proyecto crece.
Previsualiza el resultado pulsando el botón de preview desde la zona de diseño [5:05]. Si el pop up aparece al hacer clic en el icono, has completado con éxito tu primer flujo de trabajo en Bubble. Si tuviste algún problema con el alineamiento o el workflow, comparte tus dudas en los comentarios.
