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

Setting Up the Data Types

Let's build an 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 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.

Creating the Data Structure

So I'm in 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 a Google sheet or for Excel this is a sheet. It is its own table within the broad app. So we'll say invoice and I'm going to tick private by default because protecting your users data is important obviously if you're building and launching a no code app and so I want it so that whatever my user creates it's private to them. So let's say invoice and then we'll also say item.

Defining Invoice Fields

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 a 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. That will also be a number.

Setting Up the User Interface

Okay so I've got the basics in place let's add in a button and create an invoice. This is really how quick and easy 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. Okay and let's put this in the middle. I'll say create invoice.

Creating a Workflow

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 is 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 an input because I'd like to give the invoice some sort of title.

Adding Input Fields

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. 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 input descriptions value. That's it.

Testing the Workflow

So that's going to create an entry in the database. Let me demo that to you. So if I click preview 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 that data, invoices, we now have got that invoice in there. I'm going to leave that in place.

Displaying the Invoices

So I now want to show a list of my 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.

Privacy Rules and Data Access

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.

Customizing the Repeating Group

I'm going to get rid of a fixed number of rows and then let's start putting that description field 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 and clicking on the other and then I right click and I'm saying group in a row. Let's bring this to the center. I'm also going to apply gap between them. Bring that down. Okay the margin was playing around there and now I'm just going to have the margin back in here.

Formatting Dates

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 to 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.

Testing the Updated Interface

Okay so now if I go back to the preview I can see there's item 1 in my repeating group and I go back to preview. Let's add in test 2. 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.

Conclusion and Next Steps

I'm going to finish this video here because I'm going to record an immediate follow-up video which will be part 2 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 2 to follow how we do that.