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

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

Learn how to build a custom invoicing web app without any coding knowledge using Bubble.io in this step-by-step tutorial. Dive into the world of no-code development and create your own personalized invoicing system with ease.

Building an Invoicing Web App with Bubble.io

Let's build a invoicing web app using no code. And we're going to be using Bubble.io in this demonstration. Bubble.io is a fantastic web app, no code development tool. And they've got native mobile app development coming at some point later on this year. And before I dive in, if you're looking to learn no code web app development, then click on the link down in the description because we've got hundreds and hundreds of bubble tutorial videos just like this one.

Setting Up Data Type

And this is going to be the perfect beginning step for if you just want to get started in bubble or if you want to build a invoicing app or build invoicing into your app. I'm going to cover all of the basics in this video. So I met with the Bubble editor here and first thing I'm going to do is set up a data type. And so this, you can think of this as like for a Google sheet or for Excel. This is a sheet.

It is its own table within the broader app. So we'll say invoice. And I'm going to tick private by default because protecting your user's data is important, obviously, if you're building and launching a no code app. And so I want it so that if whatever my user creates, it's private to them.

Defining Invoice Fields

So let's say invoice and then we'll also say item. So what should the invoice have? Well, the invoice can have a due date and it's going to have a list of items. So I say items and then I take not from any of the basic types, but from the data types that I've created my item. And I say that this can be a list. Perfect.

And then item will say it will have a description that's going to be of type text. And we'll say it will have a quantity and that will be a number. And we'll also have a price or individual price. Yeah, that will also be a number. Okay, so I've got the basics in place.

Creating an Invoice

Let's add in a button and create an invoice. This is really how quick and easy it is building an open app with bubble because I'm just going to add in a button. In fact, let's set this up so the layout is just a little bit better. So I'm going to change this into a column. I'm going to group this in another column so that I can put some padding around it.

Here we go. And let's put this in the middle. I'll say create invoice. Now I want to do something when this button is clicked. So I'm going to say add a workflow and then go create data, create a thing.

What I do, I'm creating an invoice. So let's create an invoice. And are there any fields we can set at this point? No, there aren't. I am going to add in a input because I'd like to give the invoice some sort of title.

So let's add in an input here and I'll say describe your invoice, make it last. Also center it and let's just add a small bit of spacing between them. Actually that should go above it, shouldn't it, really? If it's going to be a form, describe your invoice.

Right. So now when we go in here, create a new invoice, there is a field that I want to edit. I'll call that description.

And we've basically got a bubble form because I now say, well, the description is my inputs descriptions value. That's it. So that's going to create an entry in the database. Let me demo that to you. So if I click preview, so I'll say test one, create invoice, it appears like nothing's happened.

That's because we've not said that anything should happen on the front end for the user. Because if I go into close and then data and then appdata invoices, we now have got that invoice in there. I'm going to now leave that in place. So I now want to show a list of my created invoices.

Showcasing Created Invoices

And to show a list I need to use a repeating group. So I'm going to add a repeating group into here, make it last, give a little bit of space. And what's this going to be a list of? Well, it's going to be a list of invoices. And where do I find those invoices? Well, I'm just going to do a search in the database for all invoices.

Now, we've talked very briefly about privacy rules. You should definitely check out other videos that I've done to get a deeper look into privacy rules. But when we do a search for at least in a repeating group like this, it's going to obey the privacy rules. Privacy rules take precedent. So when I say do a search of the database for all invoices, what I'm really saying is do a search of the database for all invoices that this user can access, I'm going to get rid of the fixed number of rows and then let's start putting that description filled in there.

So now I'm dealing with one invoice and I can say current sales invoices description and I'm going to go back a step actually and add in the date. So we can add in here due date but I want it to be on the same row as my description text. So I'm clicked on one, I'm holding shift, I'm clicking on the other and then I right click and I'm saying group in a row.

Let's bring these to the center. I also going to apply a gap between them. Bring that down.

There we go. The margin was playing around there and now I'm just going to add the margin back in here. Right.

Let's make the initial content today.

And then because I'm not american I'm going to format the date like that and say week starts on Monday. So let's update this workflow because I can now save the date. So same thing. We look for our input, which is our date time picker.

Okay. And that now means that if I copy and paste this I can say due date and I can choose how to format that and I want those to also be in a row. So change that to a row. Change this to say 200.

Okay. So now if I go back to the preview, I can see there's item one in my repeating group and not that one.

I go back to preview.

Let's add in test two. Okay. Today's date, create invoice. And you see it's been added in there. And of course it's been added into the database because our repeating group is a list of invoice items this user can access in the database.

I'm going to finish this video here because I'm going to record an immediate follow up video which will be part two, which is we need to be able to click through and view one invoice and start adding items to that invoice. So join me in part two to follow how we do that.

Latest videos

crossmenu