Hello 👋
Déjà 3 semaines ! Comment se passe ton développement ? Est-ce que les tips t’ont aidé et donné des idées ? N’hésite pas à me faire un feedback.
Petite nouveauté cette semaine avec 3 tips + 1 partagé par notre premier contributeur Peter P !
Bonne lecture, et bonne chasse aux oeufs ce week-end pour les amateurs de chocolat 🍫🐣
Charles
Les tips Bubble
Quand c’est l’heure, c’est l’heure
Tu l’auras remarqué : le Date/Time Picker est un peu fourbe. A vide, tu distingues bien la date à l’intérieur, alors qu’en réalité il n’a aucune valeur chargée.
Si tu choisis de changer juste l’heure, il attendra que tu sélectionne le jour également pour donner une valeur à l’élément.
Pire : il se peut que la valeur chargée ne soit pas la valeur affichée.
Pour ne pas avoir un champ vide non renseigné par l’utilisateur, tu peux mettre en Initial Content -> Current Date Time, comme ça tu charges par défaut la date du jour + l’heure, libre à l’utilisateur de la modifier ensuite mais au moins il y aura une valeur.
En haut, l’input n’a aucune valeur (chargement par défaut). En bas, l’input a comme Initial Content le Current Date Time.
Comme tu peux le voir, il y a un problème d’affichage car j’ai choisi des créneaux de 30 minutes pour l’heure donc Bubble arrondit. Si tu charges une date dedans, la valeur affichée ne sera donc pas bonne : l’utilisateur devra cliquer et choisir 12:00 s’il veut midi.
A toi d’arbitrer donc selon ton usage de cette feature !
Appelles-moi si tu peux 📞
Tu veux certainement implémenter un bouton pour tes utilisateurs mobile, ce qui leur permettrait d’appeler, d’envoyer un SMS ou un mail ? Rien de plus simple !
La cible de ton lien doit être :
mailto:emaildestinataire@mail.com pour envoyer un mail
tel:06xxxxxxxx pour appeler ce numéro
sms:06xxxxxxxx pour envoyer un texto à ce numéro
Tu peux l’utiliser directement avec l’élément Link > External link > tel:06xxx ou dans un workflow avec l’action Open an external Website > tel:06xxx
Ce que tu ne sais peut-être pas, c’est que tu peux charger l’élément mailto: avec plus de paramètres :
cc : pour rajouter un mail en copie
bcc : pour mettre un destinataire en copie invisible
subject : pour rajouter un sujet
body : pour pré-remplir le corps du mail
Pour tester, crées un bouton avec un workflow Open an external website et le lien :
mailto:charles@coachmvp.fr?cc=autremail@coachmvp.fr&bcc=un_autre@coachmvp.fr&subject=Coucou&body=J'espère que tu vas bien
Pour insérer les paramètres, tu dois mettre un “?” après le mail, puis séparer chaque paramètre et sa variable des autres avec “&”. Ton logiciel de mail s’ouvre.
Pratique, non ?
Tu peux charger aussi le lien sms:06xxx avec un paramètre subject mais ça ne fonctionne pas sur tous les appareils donc c’est moins intéressant.
Vide la corbeille 🗑
Imagine que tu as une table Rapport avec un champ Document Justificatif de type File (je sais que c’est pas vrai, mais imagine). Tu supprimes un Rapport inutile via workflow et tu te dis que tu en est débarrassé.
Sauf que.
Bubble va te conserver le fichier physique que tu avais uploadé et lié au champ Document Justificatif. Pour rappel, tu as 500Mo de stockage avec le plan Free, autant te dire que ça va vite ! Tu vas donc devoir supprimer le fichier physique en même temps que l’objet qui y fait référence.
Tu vas pouvoir gérer ton workflow de suppression ainsi :
Data > Delete an uploaded file > le lien vers le champ fichier de l’objet en question
puis Data > Delete Thing > l’objet que tu veux supprimer
Comme ça tu es tranquille : pas de surcharge du stockage pour rien !
A noter que si tu veux juste supprimer le fichier physique, tu dois vider ensuite le lien vers le fichier au sein de ton objet. Fais le grâce à Data > Make change to Thing > l’objet en question > et dans le champ en question, ne met aucune valeur.
Si tu ne fais pas ça, si tu cherche à voir si le champ du fichier joint est vide, tu auras quand même une valeur alors que l’objet physique est supprimé.
Le hack de la communauté : utilise le survol dans les workflows
Je te rajoute un tips supplémentaire fourni par un membre de notre communauté : Peter P (si tu en as un aussi à partager, fais signe!).
Nativement dans les workflows, tu ne peux pas utiliser de condition When X is hovered. Pour hacker ça (à tes risques et périls quand même, peut-être qu’un jour Bubble va le corriger) ajoutes sur un Group ou un bouton une condition When this X is hovered.
Ensuite, clic droit > Copy expression et tu colles dans la partie conditionnal du workflow et tu remplace l'élément cible par lui-même.
Tu peux désormais déclencher n'importe quel WF au roll, changer un custom state à la volée, afficher une vue, un focus group, etc. sans clic !
https://bubble-hack-hovered.bubbleapps.io/version-test
Bon pour mobile c'est inutile mais ça reste un tips 🤓
Merci Peter 🙏
Le mini-tuto : le contenu parfait ruine tes designs !
Ce vendredi, c’est @manjdesigns qui te rappelles que ton design doit être adapté à des contenus qui ne lui sont pas favorables afin de fonctionner partout.
Voici donc un design en tuile. Va t’il fonctionner avec du contenu réel ?
Que va t’il se passer si quelqu’un utilise une image blanche ? Le coeur du Like ne sera plus visible car il est blanc sur blanc !
Résolvons ça avec un fond transparent derrière l’icone Like. Ça marche !
Pour les longs titres : ne les laisse pas dépasser ! Sous Bubble, veille aussi à l’espace d’interligne de tes titres afin que le retour à la ligne soit harmonieux.
Pour les cartes (tu vois très bien ce dont je parle, dans ces fameux Repeating Group), on peut les laisser aléatoires selon la hauteur du contenu.
Ou alors changer la hauteur de la carte. Ou changer le design pour être adapté aux longues tuiles.
En résumé, le contenu idéal imaginé sur les maquettes n’est souvent pas reproductible sur ton vrai projet.
N’hésite pas à utiliser des textes trop longs, des images moches et mal centrées. Bref : utilises le contenu que tes utilisateurs posteront réellement.
L’inspiration Bureau
Par @tranmautritam
Une page d’accueil qui respire, très fonctionnelle pour un eshop. Les + :
➡️ un focus sur le produit / service
➡️ un design bon pour le responsive car les blocs s’y prêtent bien
➡️ des éléments distincts : logo + menu (à cacher en responsive) + menu minimal (à garder sur mobile) + photo d’un produit + un slogan accrocheur
L’inspiration mobile
Par @amir.uix
Un design qui reprend tout ce qu’il faut pour un eshop minimaliste, avec :
➡️ des visuels vibrants grâce à la transparence des images
➡️ une disposition efficace qui met en avant l’information utile
A noter que ce design sera possible lorsque vous serez responsable du choix des photos produit car il faudra un fond transparent et donc un PNG que Bubble gère sans souci. Comme vu dans le mini-tuto avant.
Ca y est !
Tu as fini la lecture pour ce vendredi 🎉🥳.
J’espère une fois de plus que tu as trouvé des tips utiles qui te resserviront dès que tu auras fermé ce mail.
Comme d’habitude, n’hésites pas à me faire tes remarques, qu’elles soient positives ou négatives. Cette newsletter est faite pour toi, elle doit t’apporter du contenu utile !
Si tu aimes ce format, n’hésite pas à le partager, ça pourrait intéresser tes amis et connaissances.
A vendredi prochain 👋
Charles
Nocodeur & formateur Bubble
coachMVP.fr