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

Headshot of Matt the Planet No Code Bubble Coach

Need 1 to 1 help?

Your no-code consultant & Bubble tutor.

Learn how to easily generate automatic invoice numbers in your Bubble.io app without any coding required. Perfect for solopreneurs and startups diving into the world of no-code development.

Introduction to Building an Invoicing App with Bubble.io


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 increment of one based on the number of invoices. But before I do that, if you're learning Bubble, if you're learning no code, if you're 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 for solopreneurs. So let's dive into this.


Adding Invoice Auto-Numbering


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.


Creating the Invoice Number Field


So we can say create invoice, and I'm going to 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, say, the company's name. But I'm just going to say it's going to be a number. So I'm going to put number in there number. Okay.


Setting the Invoice Number on Creation


And this is the main bit and you can apply this at other points, 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 freshbooks, 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


And now if I go onto 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
. So let's now add in, I'll just do a bit of text. Let's add it in here. I'll just add in number.


Viewing the Invoice Number in the Interface


And then I say current pages invoice number.

And that's going to have a bit of unpleasant formatting. It's been two spaces, why not? Okay, so let's go and run this in preview refresh.


Testing Invoice Creation and Auto-Numbering


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 five. Okay, remember that I'm not doing a count on this page. I did the count when I created the invoice.


Demonstrating Multiple Invoice Creation


So this is now kind of fixed in stone that this invoice is number five. Let me give you another demo just to prove that this is all working. Say new invoice to create. So this should be six. There you go.


Conclusion: Adding Auto Incrementing Numbers in Bubble.io


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