Distribución de Repeating Group en rejilla ( en flexbox ) óptima en Bubble

En ocasiones no resulta nada fácil la disposición de los elementos en parrilla ( grid ) de un repeating Group en Bubble, es por eso que vamos a puntualizar una serie de recomendaciones para su óptima distribución ;

1 ) Como siempre es conveniente que este albergado en un Main Group o Body , que nos permita distribuir el repeating group y el resto de elementos del diseño ;

2 ) Crearemos un grupo donde incorporar el Repeating Group , este grupo debe ajustar el contenido al ancho , fit width to contect . Dentro de él pondremos nuestro Repeating Group.

3 ) En el Repeating Group es recomendable que nuestro layout sea fila si queremos una distribución de contenidos tipo parrilla, ya que queremos que estos bloque sean repetidos ajustándose al ancho de la pantalla.

4 ) Dentro del Repeating Group , crearemos un nuevo grupo , esta vez sí con la distribución idónea ; donde albergaremos elementos repetidos en columna ( como en la imagen ) horizontalmente .

5 ) Por último nos aseguramos que el repeating group es Wrapped horizontally una propiedad que permite que los bloques de la fila fluyan y no permanezcan en la misma línea como lo haría, por ejemplo , una nube de tags. En nuestro caso es la distribución que vamos buscando.

Bualá , nuevos layout de rejilla responsive listo ¡

Un setup óptimo para tu apps en bubble

Muchas de las dudas en Bubble en cuanto a diseño vienen originadas por las mejores prácticas a la hora de diseñar la estructura una página de nuestra app tipo , pues bien , hoy vamos a presentar una de ellas.

Una escructura en T, que es la más estándar para cualquier página , siempre está compuesta por un <header > y un <body > que recrearemos en Bubble como un header reutilizable y flotante en todas nuestras páginas y un contenido en disposición vertical , y por tanto de columna . Este diseño coincide además con el que podría ser una web común como un blog.

Una metodología óptima a la hora de crear un nueva páginas es , en primer lugar , crear una página con layout “ align to parent “ de esa manera no está condicionada su morfología, ya que sobre ella posaremos tanto elementos visibles o no .Esos elementos No visibles se mantendrán siempre igual en cualquier pantalla y resolución, estando asociados a la distribución neutral de la página.

Posteriormente crearemos un grupo principal , al que llamaremos BODY en un principio en disposición de columna,  y a su vez todos subgrupos contenidos en la página tendrán una disposición de columna o , de fila y en casos muy puntuales fijos.

Este grupo principal que los reúne a todos si es importante que disponga del tamaño máximo para la web , que podríamos determinar en 1280px en anchura ( 4 veces la anchura mínima determinada por móvil 320 px ) y una alto de por ejemplo 800px.

Y una vez creado este grupo principal que los reúne a todo ya sí podremos crear nuestro , por ejemplo , formulario de alta y su header , suponiendo que queramos hacerle contener la misma escructura que al resto.

El header debe estar contenido justo debajo de nuestra página , ya que el objetivo es que sea libre para disponer de su propia estructura,  y ser utilizado como elemento reutilizable.

Group Header y Group Body quedaría por tanto como los grupos principales.

Y por último una vez creados toda la estructura de la web  , y podemos duplicarla utilizando el diseño principal como plantilla.

Plugin en Bubble para notificaciones Notifier

Los plugins de notificaciones son muy útiles para crear workflow automáticos que muestren ventanas emergentes adaptables a cualquier dispositivo.

El plugin Notifier es de tipo ELEMENTO , eso implica que debes incorporar el elemento en cada página donde deba funcionar. Puedes descargarlo en la sección plugins;

Podremos una vez instalado y colocado nuestro elemento en la página, configurar sus parámetros como duración , posición , etc.

En nuestro workflow podremos incluiremos una acción ” Notify Notifier … ” donde se muestra nuestro elemento llamado Elemento A , y el tipo .

  • Success ; para notificación de acciones correctas.
  • Blank; para notificación de acciones en general.

Añade texto enriquecido a tus textos en Bubble

El Editor de Texto Rich text editor un elemento que permite a los usuarios escribir un texto con formato enriquecido con colores, fuentes, viñetas, enlaces, etc. Utilízalo si quieres que los usuarios escriban un mensaje más largo.


Este campo define lo que contendrá la entrada antes de que el usuario la modifique o justo después de que se restablezca la entrada o el grupo que la contiene. Por ejemplo, para permitir a los usuarios modificar su biografía, el contenido inicial será probablemente “Biografía del usuario actual”.

El podemos por tanto editar el texto , o solo una parte de el texto.

Y el resultado final se verá reflejado

Cómo crear breamcrumbs en la cabecera de nuestra web bubble

Crear nuestros breamcrumbs en Bubble es muy sencillo con la librería de Frames , ya que podemos descargar ese componente y nutrir a nuestra página web de la eficientes migas de pan.

Si aún no has descargado los componentes de Frames puedes añadirlos descargando el plugin aqui.

Una vez descargado pulsando en ” sections ” podemos encontrar los breamcrumbs para nuestra app bubble+

Y aquí podemos ver como queda .

CustomStates las variables temporales en tu aplicación Bubble

Con Bubble podemos crear elementos que contiene datos adjuntos, pero que no necesariamente se guardan en la base de datos. y servirían como unas VARIABLES TEMPORALES . Esto se hace a través de CUSTOM STATES. Aunque se trata de una característica avanzada, es extremadamente útil si necesitas almacenar alguna información.

Para crear custom state puedes seleccionar un elemento y asociarlo , aunque idealmente y para no perder la relación de todos lo custom states por página . Podemos crear nuestros custom states desde la página .

Por ejemplo , si nuestros inputs contienen enlaces , y de entrada no sabemos cuanto enlaces serán creados , podremos crear una variable temporal que recoja estos enlaces y posteriormente decidir acciones sobre ellos . Crearíamos por tanto el CUSTOM STATE link.

Cómo enviar un webhooks desde Bubble API

La API de workflows te permite ejecutar flujos de trabajo de la API en una solicitud POST o GET. Al utilizar estos workflows de la API, puedes crear cosas, registrar usuarios, enviar correos electrónicos y aprovechar los plugins para acceder a servicios externos.

Puedes definir los workflowss como los harías para una página normal, acción por acción. Pero, los flujos de trabajo de la API son un workflows ( Como lo son los recurring Event y los database change triggers )  lo que significa que se ejecutan independientemente de cualquier página de su aplicación y, por lo tanto, algunas acciones no están disponibles

Puedes crear workflows de la API después de marcar la casilla “Habilitar workflows de la API y workflows backend” en la sección de la API en la pestaña de configuración.

Posteriormente y una vez obtenida la dirección webooks a la cual enviar datos , desde por ejemplo una aplicación com Integromat ( ahora Maker ) , debemos pegarla en nuestra API , configurar las opciones que puedes ver a continuación y listo , ya tenemos nuestra conexión API por webbook lista para enviar datos a Integromat , una vez definamos el formato de datos json que queremos enviar y hacerlo con los inputs de nuestros formulario, por ejemplo.

Cómo cambiar los toscos mensajes de error en tu app de Bubble con el editor metatags SEO

Aquí te dejamos una forma muy buena , no solo de editar el texto de los mensajes de sistema de tu aplicación , sino también de poder aplicar sobre ellos hojas de estilo CSS.

Y consiste en una vez modificados los mensajes de la forma habitual , es decir , dentro de Settings > Languages en el editor de Bubble . Nuestro amigo Eli nos descubre además una forma de aprovechar la edición de los CSS que ofrece el editor de metatags SEO . De esa manera podemos embeber CSS en el header del código fuente de nuestra APP , Genial !

Cómo hacer una cabecera flotante en Bubble

Cuando tenemos una cabecera header que queremos hacer flotante podemos hacerlo de la siguiente manera . Primero lo ideal es que esa cabecera sea un elemento reutilizable ( reusable group )  y posteriormente debemos marcar.

Las opciones son las siguientes y nos permiten configurar a que grupo se pegará nuestra cabecera ;

TOP ; para pegar nuestro header arriba

BOTTOM ; Para utilizarlo como nuestro pie de página

BOTH  ; cuando utilizamos , por ejemplo menús a la izquierda , y que queremos que se pague tanto a la parte de arriba como a la abajo .

La opción Horizontally float relative to,en un menú expandible podemos decidir que se despliegue a la izquierda o a la derecha.

El floating zindex nos permitirá seleccionar la capa visible superior o inferior.