Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Rounding out the UI
Lecture: Designing the account page
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Here we are in our app again. And we have our anonymous landing page, homepage working well and we also have our homepage.
0:08
We've got add, we've two more to work on compare, that's kind of involved we'll get to that in a minute.
0:13
Also the account, now that is not super interesting. It's cool, we can check you have to have the right page to be logged in to go there.
0:22
But other than that we have nothing going on. So you already saw me drag and drop a bunch of stuff in there. Let me just do that again real quick and
0:28
then we'll fill in the interactive bits or the part that loads up with the data. And here we have a nice, new account page.
0:37
So this is going to be our account details. Now notice it's going to show a couple of things. Maybe it'll also show our email
0:43
but it's basically going to show our account type whether or not we have a pro paid account or not.
0:49
And a couple things about us we haven't spoken about yet. So I'll give you the rundown. That's our height and our gender.
0:55
So later when we get to the compare section we want to show your stats against some average stats. How we going to do that?
1:05
Well it doesn't make sense to compare guys and girls. We would obviously compare folks only with their gender and with their height.
1:12
If you're six foot seven or five foot should probably weigh something different on average. The average person, of that size
1:18
weighs something different. So we're going to have this data here. Now in order for us to actually have our height
1:27
and our gender, we need to go over here to our data table or our users and again add some more stuff. So we have API key and we also saw
1:37
we have whether or not it's pro That's going to drive that account type. But let's do the other two here. Let's go and add a text column.
1:49
Called gender. Alright so we have a gender and we're going to add another number column called height. And so that'll have the gender and the height.
2:06
We can use that actually, to show something on that page. With this data in here, we'll be able to go and load up those details.
2:16
We still need away to actually set them hang tight for that. But here we can actually put something in here.
2:23
So we need to come up with something for the value. This says pounds, pounds don't know why I said that. I want inches and value in inches.
2:37
Okay so when it loads up, we're going to put your value in inches here. And initially it's not set, but eventually it will.
2:45
So we'll come over and say the user is data access member or caching our user and I'm going to import that bit.
2:56
There's other stuff that we don't really need that, that, that, that, that. I have the user, like that. I'm going to log them in.
3:08
If it needs to or it will just give us the user if it's already gotten it. So let's put in here, we want to say
3:16
valueandinches.text= and we've got a bit of problem because we might not have user height set value set for the user.
3:26
So we come over here we can say, something cool. We can actually say that .format value=height. If we have that
3:45
if we have a value there, else it could just be with a backslash. I think this'll work. Not set. Something to that effect and
3:58
a quote and a parentheses. Let's make this a little bit simpler. Height=user of height. And let's just see what we get.
4:11
It put none in there, it might leave it empty. I'm not entirely sure. I'm going to find out though. Alright go to our account over here.
4:19
None inches. Okay well, that's not super but it's okay. We're going to actually set up something that will actually pull that in for us.
4:27
You know what forget it. I'm just going to leave it like this and it's going to be good enough. The other one, we wanted to self.label_gender.text=
4:39
use your gender and again that'll be something like none not going to leave it that way but that's what it's going to say.
4:47
Alright, none and none, and then our account type that one we can work with already. self.label_account_type.text = pro if user is pro
5:02
else it's going to be basic or something like that. The other thing we need to do we don't want to show them this button here if they're not already
5:12
if they already are pro. So let's go and do one more thing say self.label, actually button sorry. Button.visable= whether or not they're a pro.
5:24
I think that'll round out other than the fact that the data is missing. Count, alright basic, well that didn't work. Let's see what we're putting here.
5:46
None or not, for some reason, we set it false but I think leaving it like this will do it. Final test, it's going to be the time it worked.
5:59
There we go. So we have the basic account we can click this and go pro, obviously that's not written. Save that for eCommerce chapter
6:06
but when this is pro, this button will go away. Alright, so I think this is great. The last thing we got to do is get this data.
6:14
Now remember when you create all the forms through this little section in about getting our height and actually already through the elements in here
6:22
it's going to ask you for your height in inches and your gender if you try to go to your account page or the compare page and
6:28
you don't yet have those details that we need set. So we're going to gather them one and only one time and then send you along.
6:34
So next, what we have to do is actually find a way to show this before we can show them their account page or the compare page, which is super easy.
6:43
We'll can do that in navigation and set it on the server and we'll be all good.