How to Generate an Invoice Number Automatically in Bubble.io [2024]

Introduction to Invoicing App in Bubble

I've got the beginnings of an invoicing app built with no code in Bubble just here. And I'm going to add to it and show you how you can add in auto numbering so that each invoice has a number and that number is an incremental one based on the number of invoices. But before I do that if you're learning Bubble if you're learning no codes be building a startup, then click the link down in the description and head over to our website where you can find hundreds of Bubble tutorial videos and resources. Sorry for that.

Creating an Auto-Incrementing Invoice Number

So let's dive into this and the first thing I'm going to do is show where I think it makes the most sense to put this which is on the create invoice action. So we can say create invoice and I'm gonna now add in a field called invoice number. Now you need to decide here whether it is just going to be a number. But sometimes invoicing has a prefix to do with the company's name, but I'm just gonna say it's going to be a number. So I'm gonna put number in there. Number okay, and this is the main bit and you can apply this at other points.

Implementing the Auto-Numbering Logic

But I think it makes sense to do it when you create the invoice because in the invoicing software I've used in the past say like free agent or fresh books. It's you want to anchor the number to the invoice when you create it. You wouldn't want to have a series of invoices in drafts where they could be kind of overlapping of numbers. So we'll say do a search for invoice count plus one.

Displaying the Invoice Number on the Page

Now if I go on to my invoice page and you can check out how I've created all of this in our previous videos. But effectively the page is of type content invoice. So it's always going to be linked to with a single invoice from the database. So let's now add in I'll just do a bit of text fact. Let's have it in here I'll just add in number. Now I say current pages invoice number. That's good have a bit unpleasant formatting it's been two spaces why not.

Testing the Auto-Numbering Feature

Okay, so let's go and run this in preview refresh. So I'll say new invoice create invoice. Okay, so it's created the invoice now if I click through to here, we should hopefully see invoice number 5. Again, remember that I'm not doing a count on this page I did the count when I created the invoice so that this is now kind of fixed in stone that this invoice is number 5. Let me give you another demo just to prove that this is all working. Say new invoice to create so this should be 6. There go invoice 6.

Conclusion

So that's how you can add auto incrementing numbers to an invoicing app built with Bubble.