#100DaysOfWeb in Python Transcripts
Chapter: Day 52: Anvil - Full Stack Web Apps
Lecture: Add new document validation
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We have our ad new document form here, and it's working pretty well in terms of UI, but it has no responsiveness, nothing happens right?
0:09
So let's go to the code side and add that. First thing that we want to do is we want to populate this combo box here. Now you can go type in the items,
0:18
if this was like a set of things you knew, like what color of items you want? we only have three colors, type it in here. Or what month of the year?
0:26
that doesn't change just type it here. But, when we're working with things that are going to change, like categories out of our database,
0:34
we want to do that in code. So, let's write some categories. Now, for just until we get to the database part, I'm going to just type them out here.
0:45
Let's suppose we have four categories that we're ultimately going to store in the database that can change and grow.
0:51
Then we'd able to do things like go to the database and say show me all the documents that have science,
0:56
that are tagged with science or something to that effect. So we'll go over here, and we'll go to self.dropdown.items I want to set that to two things.
1:06
What we need to do is give it a tuple, for everything in the categories, we want to give it a thing to show, and then the actual value.
1:13
So I actually want to have two things, I want it to start out selected with just nothing. So let's say something like this.
1:25
So, this is what's going to appear, the words select the category with the value of None, so we can test that they're selected nothing.
1:31
And in here, we're going to create a c, c maybe we'd use ID or something, for now we're just going to use this. For c categories, I'll test that.
1:43
Select a category, oh yeah that's sweet. Okay, so this is good. Now the next interesting thing really has to do when we click on this button.
1:53
I'm going to click on button six, so if I just double click right here, it's going to add that code. Let's tighten that up a little.
1:59
It's going to call this function. So we either want to save the thing and maybe navigate away, or if there's missing data,
2:08
like they haven't given it a name, they can't save it right? So let's do a little validation bit here. Now let me just type this out
2:16
and then I'll talk you through it. Alright, so we're going to do a quick validation. And the way we get the values, out of say the text box,
2:23
is just the dot text properties. And we're also going to strip that down, make sure they didn't just put white space.
2:29
For the drop down, it's selected value right, that's the second element right here. Either the text of the category or nothing.
2:37
And if they haven't typed anything into this textarea, a multiline text box, then we're going to say you can't create empty documents.
2:44
So let's go over here, we don't have to pass anything along, because these are all part of this object here. Now if there are errors, more than one,
2:54
we want to show them all. So we'll say if errors, and then what do we do here? Let's add a label where we can put an error, maybe give it a nice color.
3:06
We can use a little divider here like this. Here we go, made it a little bold, put it in the center, give it a nice red color, say this is an error.
3:20
Now when it runs, before there's errors, we don't want that to show up right? We don't see this is an error. So let's go and have that removed.
3:27
Also, I put a divider, but for the sake of size, let's do this. So at the beginning, we're going to come over here and just say clear this out.
3:38
But if for some reason there is an error, we want to set this. And let's actually do a cool little trick here. We'll say join on the error.
3:50
So when they get a list of errors, and then we're going to separate them with new lines, which preserve themselves from when this ges to the web.
3:55
So let's try this, try our validation. So if I just hit go, we should get three errors. Bam, look at that. Document name is required,
4:03
document category is required, and cannot create empty documents. Let's pick science. Now just the name is required.
4:10
The name, now some details have to be provided. Now that almost worked, didn't it? Actually, there's no more errors,
4:21
we just need to call this at the beginning every time. So let's go over here, and zero that out every time we validate,
4:29
or we could maybe do it here, take your pick. Or do it else, whatever. I'll leave it like this. Now once I fill this out, boom, it's gone.
4:42
That would've created the document if we had implemented.