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;

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.

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.

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 .

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.

Hoy hemos descubierto un nuevo plug-in para Bubble que permite convertir tu repeating group en un galería en la cual hacer scroll horizontal o vertical , el plugin puedes verlo aquí ,

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.

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 !

Navigate to Settings > Languages in the Bubble editor. Locate the setting for ‘When the app has been updated and the user should refresh’ pic.twitter.com/3F6JlM4WNx

— Eli 🇺🇦 (@elibeachy) December 31, 2020

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.

Después de crear un producto por medio de sus inputs ( Nombre , descripción , precio … ) y si alguna vez editarlo , podríamos hacer que una vez hagamos click sobre el producto ya creado ( idealmente sobre un icono de lápiz “ editar “ ) , vayamos a la página de ese producto pero en modo edición .

Esta página podría ser una página versátil , pero permitiera tanto la creación como la edición del propio producto. Tan solo será necesario diferenciar una de la otra por medio de uno u otro texto introductorio al usuario.

Una vez tengamos un listado de productos ( un repeating group ) al hacer click sobre su call to action “ lápiz “ , podremos editar el producto activando un workflow de “ go to “ … para enviar a la página del propio producto, pero esta vez , a su versión de edición de producto.

La página de producto que nosotros hemos llamado submit  , que es en realidad la misma que para la creación de producto  , incluiremos un curret.s cell product , utilizando su unique id generado automáticamente por Bubble  , y crearemos a su vez el parámetro PRODUCTO así ;

Volveremos entonces a la propia página de los inputs , para localizar el grupo que su vez contiene a todos los grupo que incluyen inputs en productos . Daremos a ese grupo principal o “padre “ ( parent Group )  la capacidad de leer esos datos de la URL , en este caso lo haremos marcando como fuente de datos ,  la variable PRODUCTO , que es su vez el id único de la tabla de datos que contiene PRODUCT como hemos comentado.  

Nuestra App leerá de la URL tipo parameter  , de esa manera la llamaremos “ producto “ y será vera por tanto como :

../submit?producto=XXXXXXXXXXXXXX

en la url de la página en bubble . Nuestro Grupo Padre tendrá que buscarla en nuestra base de datos , en tabla PRODUCT.

Una vez hecho esto , todos los grupos incluidos en ese grupo principal o grupo padre deberían heredar esa característica en cascada . Para conseguirlo debemos recordar marcar en cada input que el valor inicial  ( initial content )  vendrá dado por el ese grupo padre.

De esa manera conseguiremos que cada acceso a la página de edición donde la app detecte la existencia del párametro ?producto=XXXXXXXXXXXXXX , todos los campus inputs ,  estarán rellenados previamente.

¿ Cansado de la claridad del editor blanco inmaculado de Bubble? Déjalo así si quieres ;

De momento esto es solo posible con una extensión en Chrome que puedes descargar aquí https://chrome.google.com/webstore/detail/bubbleio-editor-dark-mode/infkadcekhdmdjeiapipcbanolpmlpln