How to “join with” a line break

Using the Join With Text Modifier in Bubble.io

When working with Bubble.io to build your SaaS app, you can use the join with text modifier to change how a list of text items is expressed in your Bubble app. I've got a list of dates here. It's generated by this date picker if you want to check out how to. What we're doing with this we're excluding days of the week, but that's another video go and check that out.

Improving Date Formatting with Join With

I've got a list here at the moment. They're separated by commas and that's not very clear because the date format that I picked is separating the elements of the date format by commas also, so it's not clear that this is an actual gap between. So I'm gonna demo how to use join with and I'm gonna show how you can use join with with a line break.

Planet No Code: Your Resource for Bubble Tutorials

But before I launch into that, Planet No Code, we have been recording Bubble tutorials for it feels like a very long time now and you can find even more tutorial videos than you can find on our YouTube channel. We have more on our website and many are exclusive to our members. So if you're learning Bubble, head over there and join our community.

Implementing Join With in Bubble

Let's dive into the Bubble app here and you can see I've just got a list of dates. And I've formatted them in that format and now I'm gonna add the modifier to the end here of join with or the operator join with and so I could say join with and I could put in like a pipe symbol and then let's go back and refresh it. You can see it's added in the pipe symbol. What if I wanted to add a bit more of space between it? Well, I just go back in and I can add a space before and after. There you go, space has been added in.

Using Line Break with Join With

And finally, how do you add in a line break because if I was just going here and press enter it auto completes it. It's not helpful. That's not what I want. So I go join with and then I write in line_break and that tells Bubble to actually treat it as a proper line break like a return on your keyboard.

Conclusion and Further Resources

So very quick demo there. Please like and subscribe to support our channel to get more videos like this and yeah, we can check out our website Planet No Code. You can even book a one-to-one session with me. We call it Bubble coaching and I can help accelerate your Bubble app development.