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