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

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

Learn how to create an invoicing app with no code using Bubble.io in this tutorial. Discover the power of no-code app development and streamline your invoicing process effortlessly.

Welcome to part 2 of Building a No Code Invoicing app

Looking at how to build an invoicing app with no code. And we've got as far as being able to create different invoices and set due dates. Let me give you a quick demo. There we go. There's our test three invoice.

There's the updated due date for the 18th. Let's immediately make an improvement here that's going to help the UX. That's the user experience on our button. Click workflow. We're currently creating a new invoice and I'm going to say reset relevant inputs because that means that when a user clicks the button, so we'll say test for change this to 17th, create invoice, it resets it back.

So that that's useful if the users need to really quickly, rapidly enter data, create more than one entry for that data type. So in this video I'm going to show you how we can click through from a cell in this repeating group to a page all about an invoice and then seeing how time goes, being able to add individual items to that invoice. In fact, I think we will definitely get there because if you're learning bubble, then we've got hundreds of bubble tutorial videos. By clicking the link down in the description, you can get access to them. Let's go back into our app here, and I'm now going to add a new page and this will be called invoice.

Setting up the Invoice Page

And this is going to be a template for each invoice. So I don't need to, if I have ten invoices in my app, I don't need ten different pages. I can just do one page, setting it up as a template for invoices. So I'll click create and first thing I'm going to do is change the type of content to invoice because I want bubble to insist that every time I link through to this page I have to send one invoice from the database. Otherwise it's not going to function very well as a template.

So let's not pay too much attention to design, but I am going to make it into column and then let's take our text here and make it header because this is going to be our current pages invoice description and I'm going to copy and paste it and hold shift to select both of them and group them into a row space between. Because in here I'll put current pages, invoices, due date format as something like that. Cool. Okay, here's a quick tip. We can see that that's way bigger than it needs to be is pushing our canvas all around.

Of course that doesn't matter to our end user. They're not going to see that the due date is taking up four lines. But I can use the placeholder text just to help me visualize the space that is required for each element. Okay, let's now talk about adding in. No, let's think through to it.

Linking to the Invoice Page

We'll link through to it, make micro steps in our progress. So I want to be able to click anywhere in this cell and for it to link through to a page all about that invoice. So I'm going to select both of them elements in my cell. You can see the two text labels here. I'm going to group them into a row and then when this row is clicked, notice I'm doing the group rather than the individual elements.

That's so that if anything inside that group is clicked, this workflow still takes action. So I'm going to add in a workflow and say, navigation, go to page invoice. Okay, this is a required field because I have to send an invoice through to the invoice page and so I can say current sales invoice. Let's give a demo of that. We'll go preview.

So if I click on test two, it takes me through to the test two page. Isn't that quick? Easy, simple. The power of no code. The power of no code.

Adding Individual Items to the Invoice

App development with bubble. What's next? So back to our invoice page. We want to add in individual items. Now this is going to be very similar to what we did on the previous page of adding in invoices.

So I'm not going to pay attention to the design here. I'll say add item and then I need a repeating group because I want to list through the items that have been added to this invoice. So we'll have so data type is item, fixed number of rows. No, I'm not going to do a search for here because if my app takes off, I could have thousands of invoice items and I don't want to have to search through thousands of items to find the right item for this invoice or the right list of items for this invoice because that's inefficient. I don't want to go from thousands of entries in my database to five because there are five items in this invoice.

I'd rather just say, here's my list of five. So I'm going to say current pages, invoices items, because that's a field list of items on my items, data type. Let me just point that out to you in case that's not clear. So we're going to data, data types, invoice items, list of items. Okay.

That's why it works like that, because a repeating group has to take a list. So let's set this up. I'm going to set this up to be really easily editable in the future. So I'm going to put an input in rather than a text label. So my input will be, let's make that a little bit higher.

52 is quite a good height for text. And we'll make this a little bit longer. Again, I'm not paying much attention to design here. If I'm using a lot of fixed widths as pixel values, that's not going to be great. If you want to make this responsive, it's best to use percentage or to use conditional tab to make it adaptive to page width.

But this is going to be item description. That's going to be a type text and it should not be empty. And I'm going to copy and paste this into there. And this will be much smaller because this will be quantity. So I'll just put in Q for quantity.

I want this to be a row. There we go. And then we're going to have unit price. So this will be currency that make it a little bit wider.

And then I'm also going to have in total. Right, that I'm going to just show you some tips to make this a little bit neater. I'm grouping all of the elements. I'm going to group them into a row because then I can use space between.

Much better. Okay, I'm going to update one of my data fields here. Item price. I didn't think of this earlier. So I'm going to say this is the unit price and then we'll say total price.

Adding Items to the Repeating Group

Okay, so when someone clicks add item, we need to create a row in this table. So let's say add item. Create a new thing item. Now, I've not got a form next to my button. I'm going to allow people to edit the data as soon as it's in that table, that repeating group.

But you could do it differently. Basically what I'm saying is I'm not filling in any of these fields here. But at the moment, if I create an item, there's no association between that item and the invoice that's being displayed on this page. So I then add a second step, I say make changes to a thing. Current pages invoice and I'm going to say items.

That's my list of items. Add result of step one. So now this is adding it into that list and I have some sort of relationship in my database between the invoice and the items. So let's go back into preview.

Ah, okay, right, here we go. Didn't spot this, didn't think of it. I'm getting lorem Ipsum, which is dummy text. And that's because the URL I've gone to is for a invoice, but I've not supplied by clicking the preview button in the editor. I've not said oh, preview this particular invoice.

In fact, I don't have any invoice. I don't have invoices. I don't have any invoice items in my database. So this is not particularly helpful. In fact, it's quite misleading.

What I need to do is go to index, then preview. In fact, let's open this in a new tab. Now if I click through onto one of my invoice pages, I get actual data on the invoice and I don't get any dummy content. So now if I click add item, I only get the ones that I click in by clicking add items. So if I type in here, widget one and then refresh, nothing happens.

Okay, I'm gonna just got an hour time. I'm gonna cover how we can auto save changes to the repeating group in the next video.

Latest videos

crossmenu