Anvil: Web apps with nothing but Python Transcripts
Chapter: Application first steps
Lecture: Validation user inputs for measurements

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Well we've got our UI in place, but if I run it
0:04 and I click on this Add Measurement, you can see
0:07 not too much is happening.
0:08 Let's go and actually have that button click do something
0:12 and makes sure we have the right kind of data and then
0:15 almost save it back to the database.
0:16 We haven't created that yet, but when we do, it will just be
0:19 a one stop, one line, to finish this off.
0:22 So far, we've been in this visual bit
0:24 on the design side of the form.
0:26 Let's go to the code behind over here
0:28 and hide that so we have the most room.
0:31 Actually, we need one quick thing before we do that.
0:33 We need to hook into this event when somebody clicks this.
0:36 So we can just double click it, make sure the name
0:39 is set to something you would
0:40 like to have because it's going to be
0:42 part of the method here.
0:44 And then, we are going to go write what code we need to do.
0:48 So we're going to have a couple of steps here.
0:51 Let's separate it out. Let's actually
0:53 you can override as many functions as you want
0:55 these are just python classes right? So I can come over here
0:57 and write one called sync_data.
0:59 The idea is it's going to take all the elements, UI elements
1:03 like the text box's text and turn that into a number
1:06 or given us an error message if it's impossible.
1:10 So for a moment I write pass. Let's go down here
1:12 what we are going to do is we are going to say
1:14 and be an error that maybe, maybe has returned
1:18 and we are going to auto-complete on that, that's awesome.
1:20 And we'll say if error is return, which means just stay on
1:25 the form, this sync data is going to set the error
1:27 let's go and actually do it this way, let's say self.
1:30 it was a label_error_message.text = error
1:35 and let's do a visible = True.
1:40 And then we're going to return.
1:41 So if there is an error, we're going to show it.
1:43 And also let's go at the beginning
1:48 before we do any of this, let's say
1:51 also we are going to hide it but in case there is an error
1:53 we are going to show it but again and set the error.
1:56 And then, later, I'll just print
2:00 would have saved the data on the measurement.
2:04 The other thing I want to do is have a way to easily
2:06 communicate what those values are we got.
2:09 So let's just go over here, we'll have a self.weight = 0
2:11 self.rate = 0, and self.date = None.
2:19 The date is the day we said we recorded the measurement.
2:22 And we can even come down here
2:24 and say what measurements
2:26 or what values we are going to put
2:27 and we can do a little format, just like standard Python.
2:31 So we can do it like this.
2:33 Why am I so fascinated that I can write this code?
2:36 Because this code runs in your browser
2:39 on top of a Javascript engine. It's super cool.
2:43 But we get a right Python which is the way we like it.
2:45 This is good.
2:46 Let's go over here and just put an error message for now.
2:48 This will always fail. Try to run it.
2:53 It will go click this, it's going to return an error
2:55 the system will see there and error, it's going to show
2:57 the error message and set it to whatever we return.
3:01 Uh, that didn't work so well, did it?
3:03 What step did we get here?
3:04 Ah, because I forgot the word return.
3:07 You know, details. Okay, try again.
3:11 This will always fail.
3:12 Okay, so our validation is working
3:13 whatever message gets back, if there is any from
3:15 that sync_data, it's going to show that as an error.
3:19 So let's go and actually to the validation here.
3:21 So there are several layers of what we need to do.
3:23 First, if there is no data
3:26 we can say if not self.text_box_rate.text
3:32 alright if it's empty
3:34 then we can return some kind of message like
3:36 heart rate is required.
3:41 We can do something similar for the others.
3:47 Let it fall through but return none is probably good here.
3:50 We're going to say, if you haven't filled out the heart rate
3:52 that's required. If you haven't filled out the weight
3:53 that's required and if you haven't selected a measurement
3:56 date that's required. Let's just check those real quick.
4:00 So click that heart rate is required, so put a 79
4:04 weight, 170, whatever it is.
4:07 Measurement and date is required pick one of those.
4:10 Boom, would have actually saved this
4:13 it didn't really work because we didn't actually
4:15 get the data but we're on the right path.
4:17 So that's working well. The next thing we need to do is
4:20 we need to try to get those values because
4:22 maybe this is like some text value but
4:24 it's not a number, right? Not a proper integer.
4:27 So over here, we're going to say self.weight
4:30 and let's just do Exception
4:36 and we'll return a known error here
4:40 alright so we're going to return the error message here
4:42 but probably the most common thing is it's possible
4:44 we get some kind of conversion error
4:46 that's going to show up as a type error swool.
4:51 And then, in this one we are going to return invalid format.
4:56 Okay, so in here, what are we going to do?
4:57 We're going to convert from a string to an integer.
5:00 So we're going to take the string and
5:01 pass it to the end constructor
5:04 self.text_box_weight.text, and you know what?
5:08 We're going to do something real similar for the rate.
5:17 For the date it's already in the right format.
5:19 So we just go to date_of_measurement.date
5:21 as the selected date, and there we go.
5:24 So if those all work right
5:26 we should have those set when we get back here and
5:28 we'll have a go.
5:29 So, I think we'll have it right.
5:30 Let's give it a shot here.
5:32 We'll put this away for a minute and come over here
5:34 and we add a measurement, a heart rate is required, okay
5:37 so let's say the heart rate is 71
5:41 and let's say the weight, 170 or whatever it is
5:45 measurement date is required, let's say it's today
5:49 You ready? This should work.
5:51 It should convert those all out and then print them
5:52 into this little output window.
5:54 Boom. Notice the red dot in the upper left.
5:56 That means there is new output that would have gone
5:59 to the terminal or somewhere.
6:01 Go look back at it and you see we would
6:02 have saved the measurement, it would have been 170 pounds
6:06 on August 2nd with a heart rate of 71 beats per minute.
6:11 It works! How cool is that?
6:13 Now we haven't saved that to the database
6:14 we just printed it with the console
6:16 you're going to see it's actually about
6:17 the same amount of work.
6:19 Right, so there it is our add measurement component
6:21 is done and we're ready to start using it.