In this bubble tutorial video, we're going to be looking at a new feature called Return Data on custom events. This is less than 24 hours old and we're going to be demoing in this video. And I'm really excited to share it with you because I think it will effectively mean that you can use reusable elements to host and hold functions.
The Advantage of Using Reusable Elements
Now, often a lot of criticism that comes the way of Noco platforms like Bubble all is that things that are easy to do with traditional coding are much more complicated, much more bloated to do in a Noco platform. But this allows you to effectively create functions.
What's a function? Well, you put data in one end of like a formula or a calculation and you get something that you've determined out the other end. And the advantage of doing that with a reusable element is that you can have your complex formula, the calculation you're taking place. You only need to build that once and then you can deploy in multiple places around your app.
Learning Bubble on Planetnocode.com
Now, before I dive into a demo, if you're learning bubble, there's no better place to do it than Planetnocode.com. We've got a thriving community of no coders and bubble app builders just like yourself. And you can access hundreds of bubble tutorial videos just like this one over on our website.
Demo: Creating a Header
So let me dive into the demo. So first thing I'm going to do is basically create a header because often I find that a header is a great way of building your app in a lean manner. For example, if you want to protect certain pages in your app, I advise using a header for that because header has a reusable element which we're going to turn this into because that allows you to put, the user is not logged in action in the header.
Adding Calculation to the Header
Then anywhere you place that header is going to have that protectiveness of your pages. I'm not going to focus too much on design here, but effectively we want to do some sort of calculation. So I'm going to add in a button and add in a text field. And let's say we want to, if I put in a date picker, let's say we want to add like seven days to a particular data that is provided. Now this isn't particularly complex to do, but I'm using it as an example for a much larger formula or kind of calculation that takes place.
Creating Custom Events
And that's right, we will create events as well. So I'm going to call this create event and I'm going to add in a workflow. Now, in order to tap into this, I'm going to add in a custom event and call this new event. What we're going to do then is say that when a user enters a date, we're going to create an event in seven days time. The adding of the seven days is going to be our calculation.
Defining Parameters and Return Values
So we're going to take in a parameter which is date. In fact, let's make it really clear. Let's say starting date. And this is the new bit that bubble has added in in the last 24 hours. Not the parameter here that's been around before, but the layout is new and then the returns value, we're going to return an event.
Creating a Reusable Element
Now this app is one that I've used for many tutorials. I already have an event type that's data type that's got a date label and a label label date field. So when this is clicked, we're going to trigger a custom event because the button can run it. But I also want to be able to reach into the reusable element and run the custom event. So this will be add event.
Restructuring the Workflow
Going to get rid of that by playing around with it earlier. And then we input the starting date. So the starting date will be our date field and then in our custom event we will create a new thing date and we can say starting date plus seven days. Now, what would have been really hard at this point, once we've separated this into a reusable element, which I'm going to do in a moment, is basically retrieving this event that we've created in the past. I would have saved it to a field on current user.
Breaking it into a Reusable Element
It was inelegant because you had to basically have these temporary fields to store data that had been produced during the running of a custom event. So let's break this into a reusable element right now. So I'm going to go for convert to reusable element and I'll say menu date function and I'm just going to check what's being carried across. Okay, so the custom event hasn't been carried across. Let's create that again.
Creating Custom Events in Reusable Elements
Say create new event. Into this goes date. And maybe I'm doing this a little bit of a long winded way, but I'm wanting to just show kind of the changes as you work through...
Displaying the Return Data
So I now have a custom event in my reusable element. Let's go back to my demo page, and we'll just delete all that previous bit of working, bring that out, so, and delete this and put in the reusable element.
Triggering Custom Events from Reusable Elements
It doesn't matter the layout, right, so this is a reusable element. Now, before we could tap into custom events in the reusable element. Let me show you. So this button and this field are on my page, separate to the reusable element. And so I'm going to say trigger a custom event from a reusable element.
Displaying Data Using Return Values
And because I've only got one instance on the page, it's automatically populated these fields. It's taken my reusable element. It's taken the only custom event on that reusable element. And I now have the date field, so I can put in my date picker.
Testing the Functionality
Okay. And then I want to be able to do something with the date that is returned. So let's add in a group because we'll display data in it. And again, this is a slightly odd example. I'm demonstrating the principle, not a particularly good application of it.
Implementing Return Data
So this will be my event, and then I'm going to put in my event date. So the date today is the 1 February. And for this to work, we would expect to see the eighth of February appear in this box. But it's not quite ready yet, because I've got to do something with the return data. So I can say, now display data in a group.
Finalizing the Implementation
Here's the group ready to take my event. And then, just like in many other places throughout the bubble ecosystem, you can say the result of step one, and it automatically populates it with the parameters that I've set up, which is the one that I labeled event created. And that is an event. Let's just have a little refresher on that. Why do I see that?
Well, it's because I've said that there is a field in return data called event created of type event. And step two, I'm sending that data through, so I believe on the forum page where they preview and demo this new feature. They give an example such as you could have conditional statements on here, so that if only certain conditions are met, you send back different sets of data. But let's go back to our page and actually test this out so nothing is displayed. I haven't created any events.
I'm going to pick today's date, create event, and there we go. Let's watch it in the debugger. So we trigger the custom event. We then go as if we're going into the reusable elements. So we have our create event.
The Impact of Return Data on Reusable Elements
Custom event runs it. I clicked on slow by accident there rather than next. Anyway, there you go. You can see it runs through it automatically and very helpfully for us. So I think that this is seriously going to change the approach that I have going forward for bubble app development, because it means that if you've got any complex calculations and you want to run them on multiple pages, you can basically make that function, that formula a custom event in a reusable element.
And now you can place data in and you can retrieve data out of it all within the workflows on the page. Previous you would have probably had to work with back end elements, back end workflows in order to achieve this, but now you can just do it with reusable elements.