Let’s Build a No Code Invoice Web App - Part 3
We delve into building a no-code invoicing web app using Bubble.io. Discover how to utilize auto binding to streamline the process and enhance user experience with a currency formatted total price calculation. Stay tuned for the next video where we explore sending invoices via email using Postmarks.
Unlock the power of auto-binding: Create dynamic invoices with real-time updates in Bubble! Learn how to implement this game-changing feature in our auto-binding tutorial.
Master database triggers: Discover how to automate calculations and streamline your invoice app workflow with Bubble's powerful backend features.
Take your Bubble skills to the next level: Learn how to create a professional invoicing system with auto-save functionality and automated calculations.
Introduction to Auto-binding in Bubble
In this Bubble tutorial mini-series where we are building a no-code invoicing web app, we've got as far as being able to create an invoice and then view an invoice on a single page and add items to the invoice just like that. But we are now going to use a process called auto-binding and auto-binding in Bubble is the equivalent of auto save.
Enabling Auto-binding
If I go back into the app and go on to my invoice page then I'm going to enable auto-binding to parent elements. A few things to remember with auto-binding - I'm going to go through every single one of them - is that auto-binding will look to the immediate parent of that element in the elements tree to get the item from the database that it is making changes to.
Setting Up Auto-binding
My group here has a data source of current sales item so it's going repeating group individual sale then the group is taking that individual sale and it's passing it down to my inputs. Here I'll say auto bind to parent or to bind to description. Now I get a warning here auto-binding requires us to make some specific changes to the privacy rules. I'm just going to update each of these first and then I'll take you through how we do that.
Updating Privacy Rules
So quantity, there we go unit price, and lastly total. Okay, so let's get rid of that warning message and that should not be an integer that should be a currency. So we go into data privacy and we are talking about auto-binding to an item so I say allow auto-binding and then I allow auto-binding on each of these fields.
Testing Auto-binding
If I go into my preview, remember my preview is a particular invoice. It doesn't say lorem ipsum here. This is an actual invoice in my database being shown here. And so I can type in test 2, I could put in a quantity, I could put in a unit price and then I could put in a what would that be that be 28? Yeah, I've been test 3, 3 unit price of 3 total 9.
Updating Data Types
Let's update a few parts here, which is the unit price should be currency and I'm saving the price the currency values in my database as a number and that means it is a number. It's just a number. It's not actually attached to is it dollars or anything like that. If I was to save dollar sign and then say 3, then I'd have to save that as text because it's no longer just a number because it contains the dollar symbol. If I did that I'm gonna get frustrated because I won't be able to do simple maths just like this.
Calculating Totals
So I can add in the bottom and I can say I can either refer about so I can either refer to current pages invoices items to get a list of the items or I can just refer directly to the repeating group. This is the items and then I can say items total price sum formatted as currency. Let's see what difference that makes.
Troubleshooting Formatting Issues
So these have auto saved. I've refreshed the page that there and now we're successfully getting 28 plus 9 but not formatted as a currency. What's going on? Maybe I just need to clear that down. Let's try that. That's odd, so I'm gonna use the debugger going on the text text 37 format of ours. I don't think I picked the currency. Simple okay, that's why.
Implementing Automatic Total Calculation
Okay, so they go now there's one extra bit here which you may have noticed and thought well that is suboptimal which is that if I enter in test for and then I say you know 47 unit price 1999. I can't do that in my head. I'd like total worked out automatically and the way we would go about doing that is to use database triggers.
Setting Up Database Triggers
Let's have a look at database triggers. To get to database triggers, I need to go into settings API enable workflow and API backends and then I can now access backend workflows and so I can now add a database trigger. And I'm getting this warning here. I'm gonna demo it but it's not gonna work because I'm running on a free plan.
Configuring Database Triggers
Database triggers basically things that you do a backend workflows. You have to be on a pay Bubble plan. But I can still set up so I can say when invoice line updated. So what's the type? Well the type is going to be when an invoice item gets updated and so I can say when items before quantity is not items now quantity so that's going to say if the quantity changes we're going to run this workflow, but it's not just the quantity it's also going to be or when items before unit price is not items now unit price.
Setting Up the Workflow
So I'm running a check I'm saying if someone changes the unit price or they change the quantity we will run this workflow and this workflow is going to be make changes to a thing. That'll be item now. Now Bubble does give us it's really helpful, but it's a little bit of a kind of bit unusual isn't it to say here is the item before the change here is the item now. But we're going to make the change to the item now and that will be total price equals item now quantity times item now unit price.
Finalizing the Implementation
Yeah, now that's all we need to do. Trust me that's going to work. But I can't demo it because I'm running this on a free plan. But last thing that I would then do is do something like disable the input because otherwise people can override the total overwrite it and then it won't have you know, won't have any respect for what the quantity or the unit price is.
Conclusion and Next Steps
So I'm gonna wrap this video up here, but the next video I'm going to demonstrate how we can send an invoice with individual items in an email using postmark. So do stay tuned like and subscribe for that video.
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.