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

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.