Demo of Return Data from Custom Events
Learn how to effectively create functions using Bubble.io's new feature called Return Data on custom events in this tutorial video. With reusable elements, you can easily deploy complex calculations and formulas across multiple pages in your app, simplifying your app development process.
Unlock the power of functions: Learn how to create reusable elements for complex calculations in Bubble's new custom events feature.
Simplify your app development: Discover how to build lean, efficient headers and deploy them across your Bubble app with ease.
Master the art of data manipulation: See how to input dates, perform calculations, and return custom events in Bubble's latest update.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.