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
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 Groupes 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 ¡
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.
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.
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.
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
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
