Templates para crear tu SaaS en bubble

Ya sabes que puedes contar con excelentes templates que te ofrecen geniales recursos visuales , en este caso para crear un proyecto SaaS. Este template es absolutamente espectacular , y lo creado el equipo de Wolazo , lo puedes descargar aqui https://bubble.io/template/saas-landing-page—wolazocom-1669894560013×272449052603842560

Una vez configurada en tu App

El resultado es el siguiente ;

Caso de sincronización de campos en base datos en bubble

En ocasiones nos veremos obligados a ordenar el repeating group en Bubble de mayor a menor valores de un campo u otro . Por ejemplo , si deseamos ordenar un listados de productos de mayor a menor número de votos obtenidos por los usuarios nos enfrentaremos al siguiente problema ; la tabla votos en nuestra base de datos es diferente a la tabla del repeating group que contiene nuestros productos ( llamada PRODUCT ) , eso nos obliga a mantener campos sincronizados en ambas tablas de la siguiente manera.

Para hacerlo debemos realizar acciones simultáneas en ambas bases de datos mediante nuestro workflow

Finalmente la sincronización de campos permite en este caso mantener los mismo valores en una tabla y otra, permitiendo, por ejemplo en este caso, ordenar un repeating group de la siguiente forma.

Cómo usar las condiciones para alterar visualmente un elemento en Bubble

En bubble podemos modificar el estado de un elemento dependiendo de si ha sido apuntado ( focused ) , ha sido presionado con el ratón o con la yema del dedo ( pressed ) o ha sido tapado con el ratón ( hovered ) .

Por ejemplo , podemos alterar la vista de la caja del buscador al posar el ratón sobre él, usando la condición siguiente ;

Ampliando de esa manera su ancho al máximo posible ( 100 % ) .

Cómo usar los group focus en Bubble

Un group focus es un grupo que se oculta automáticamente cuando el usuario hace clic fuera de él. Se posiciona en relación con otro elemento , es decir está anclado siempre a otro elemento. Esto es especialmente útil para los menús desplegables , o ventanas flotantes que deben desplegarse a la interacción del usuario , por ejemplo los resultado en nuestro buscador web.

Cómo crear un pop-up reutilizable en Bubble

Esta vez hemos querido reconocer esta gran idea de Tass , en su cuenta @TipsBubble

Nos ha parecido un curioso método de ahorrar tiempo , aquí te la dejamos.

Cómo crear una relación de dependencia en base de datos ( uno a muchos ) en Bubble

Es necesario siempre guardar el padre en el hijo, en las relaciones uno ( padre ) a muchos ( hijos )

Una vez creados los custom data types ;




En un caso práctico , si por ejemplo queremos crear un nuevo hijo perteneciente a un padre , primero seleccionaremos el padre de una lista ( lista mostrada , por ejemplo, en un dropdown ) 


 Y luego en la lista de hijos debes incluir el que acabas de crear.




En cambio a la hora de borrarlos , lo primero es buscarlo en la lista del padre

Y luego eliminar al hijo

Porque sino se podría crear inconsistencia en la base datos , al estar borrando el origen antes que las propias tuplas pladre / hijo.

Recordemos que las tuplas en base de datos relacionales con el conjunto de datos único formado por la unió de dos o más tablas. 

Cómo mostrar mensajes de alerta en otra página de Bubble

Cuando validamos un dato o bien queremos que el usuario acceda a cierta información informándole de una acción pasada, podemos hacer que nuestro mensaje de alerta se muestre en la página de destino.

Para ello debemos crear una acción en nuestro workflow de Go To .. “ e indicar la página de destino alimentado la URL con un parámetro.

Posteriormente , y ya en página de destino , tan solo debemos utilizar la acción “ Do when … “ para indicar que cuando se reciba un parámetro en URL con valor product_created.

Realizamos una acción , en este caso “ Show a message… “ .

Cómo incluir multiselect dropdowns en nuestros inputs de Bubble

Si te has preguntado como poder incluir en tu formulario un selector de tags , puedes hacerlo fácilmente con el multiselect drown que te permitirá seleccionar entre varios opciones múltiples . Tendrás que buscarlo entre los plugins de bubble.

Esta función permite tanto la selección de opciones alojadas en la base de datos ( preestablecidas ) , o bien otras nuevas creadas a través del mismo dropdown , como siempre , utilizando workflows.

Para crear nuevas tags introduciéndolas en este selector debemos añadir la siguiente condición en nuestra workflow