Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Let’s Build a No Code Invoice Web App - Part 3

We delve into building a no-code invoicing web app using 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.


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 and bubble is the equivalent of autosave.

Enabling Auto Binding

So if I go back into the app and go onto my invoice page, then I'm going to enable autobinding to parentelements thing. A few things to remember with autobinding, I'm going to go through every single one of them, is that autobinding 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. So my group here has a data source of current sales item.

So it's going repeating group, individual cell. Then the group is taking that individual cell and it's passing it down to my inputs. So here I'll say autobind to parent, autobind to description. Now I get a warning here. Autobinding requires us to make some specific changes to the privacy rules.

Updating Privacy Rules

I'm just going to update each of these first, and then I'll take you through how we do that. 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.

Data Privacy and Auto Binding

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.

Previewing the Invoice

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 two, I can put in a quantity, I could put in a unit price and then I could put in a, what would that be? That would be 28.

I could put in test three, three unit price of three, total, nine. 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 number. And that means it is a number. Well, 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 three, then I'd have to save it as text because it's no longer just a number because it contains the dollar symbol. If I did that, I'm going to get frustrated because I won't be able to do simple maths just like this. So I can add in the bottom and I can say, I can either refer, 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 list of items and then I can say items total price sum formatted as currency. Let's see what difference that makes. So these have auto saved, I've refreshed the page, they're there.

Formatting Currency

And now we're successfully getting 28 plus nine, 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 going to use the debugger going on the text. Text 37 formatted as. I don't think, I don't think I picked the currency symbol, that's why.

Okay, so there you 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 four 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. So let's have a look at database triggers.

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. I'm getting this warning here. I'm going to demo it, but it's not going to work because I'm running on a free plan.

Database triggers, basically things that you do with backend workflows. You have to be on a paid 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. 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 will be item now.

Now bubble does give us, it's really helpful, but it's a little bit of, a 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. Okay. 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. So I'm going to 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 postmarks. So do stay tuned like and subscribe for that video.

Latest videos