Improving the User Experience
Welcome to part two of my mini-series looking at how to build an invoicing app with no code. 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.
Creating an Invoice Page Template
In this video, I'm going to show you how we can click through from a seven this repeating group to a page all about 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. And this is going to be a template for and for each invoice. So I don't need to if I have 10 invoices in my app, I don't need 10 different pages. I can just do it with one page setting up as a template for invoices.
Setting Up the Invoice Page
So I'll click create. And first thing I'm going to do is change the type of content to invoice because I want it 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 a column. And then let's take our text here and make it header because this is going to be our current page's invoice description. 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.
Design Tip for Visualization
OK, 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 place of the text. Just to help me visualize the space that is required for each element.
Linking to the Invoice Page
OK, let's now talk about adding in. No, let's link through to it. 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. OK, this is a required field because I have to send an invoice through to the invoice page. And so I can say current cells 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 app development with Bubble.
Adding Individual Items to Invoices
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.
Setting Up the Repeating Group
So I'm going to say current pages invoice. 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. That's what 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. Fifty two is quite a good height for text. I'm going to make this a little bit longer. Again, I'm not paying much attention to the design here. 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 tabs 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.
Adding More Fields to the Repeating Group
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 a unit price. So this will be currency. That'll make it a little bit wider. And then I'm also going to have in total. Right. 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.
Creating a Workflow for Adding Items
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. You could... basically what I'm saying is I'm not filling in any of these fields here. But at the moment, if I create a 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.
Testing the Invoice Page
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, you know, by clicking the preview button in the editor, I've not said I'll 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 item. So if I type in here, widget one, and then refresh, nothing happens. Again, I'm going to just got an hour on the time. I'm going to cover how we can auto save changes to the repeating group in the next video.