Demo of Return Data from Custom Events

Introduction to Return Data on Custom Events

In this Bubble.io 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 Functions in No-Code Platforms

Often a lot of criticism that comes to way of No-Code platforms like Bubble is that things that are easy to do with like traditional coding are much more complicated, much more bloated to do in a No-Code 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 taking place. You only need to build that once and then you can deploy it in multiple places around your app.

Accessing Bubble Tutorials on Planet No Code

Now, before I dive into a demo, if you're learning Bubble, there's no best place to do it, then 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.

Creating a Header for Lean App Building

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. You can use 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 a 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, then anywhere you place that header is going to have that protectiveness of your pages.

Setting Up the Demo Elements

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 a Custom Event

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.

Setting Up 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. Now, I have 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 rather.

Triggering the Custom Event

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. Going to get rid of that. I'm 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.

The Advantage of Return Data

Now, what would have been really hard at this point once we've separated this into a reasonable element, which I'm going to do in a moment, is basically retrieving this event that we've created. We probably, I mean, in the past, I would have saved it to a field on current user. Yeah, it was in inelegant because you had to basically have these temporary fields to store data that have been produced during the running of a custom event.

Converting to a Reusable Element

So let's break this into a reusable element right now. So I'm going to go for convert to reusable element. I'll say menu date function. And I'm just going to check what's been carried across. Okay, so the custom event hasn't been carried across. Let's create that again. 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 as you work through it. And hopefully by the end of this video, the big reveal of just how helpful it is that we can now have return values.

Setting Up the Return Data

So I'm going to say event created. And this is of type event. And this is particularly the bit that wasn't available 24 hours ago. So let's create a new thing. So then the date is going to be date, we'll say plus seven days. And then we add in return data once more and you think if you're not sure where that was, they put it under navigation. And so now I can say the result of step one.

Finalizing the Reusable Element

Going to get rid of the button. 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 working. Bring that out. So I'll end up like this and put in the reusable elements. Doesn't matter the layout.

Triggering the Custom Event from the Page

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 in this field on my page, separate through the reusable element. And so I'm going to say trigger a custom event from a reusable element. And because I've only got one instance on the page, it's automatically populated these fields. It's taken my reasonable element. It's taken the only custom event on that reasonable element and I now have the date field. So I can put in my date picker.

Displaying the Return Data

OK. 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. So this will be my event and then I'm going to put in my event date.

Testing the Custom Event

So the date today is the 1st of February. And for this to work, we would expect to see the 8th or 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. 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 also actually populates it with the parameters that I've set up, which is the one that I labeled event created. And that is an event.

Understanding the Return Data Structure

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.

Running the Demo

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 element. So we have our create event, 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.

The Impact on Bubble App Development

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. Previously, 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.