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.
Build an invoicing web app: Create professional invoices with custom data types and dynamic repeating groups in Bubble.io!
No-code invoice generator: Learn how to set up privacy rules and create a user-friendly interface for managing invoices and items.
Master Bubble.io basics: Discover how to use inputs, buttons, and workflows to build a functional invoicing system from scratch.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.