Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Navigating between views
Lecture: Pinning the active navigation element
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Our app is pretty good, it has navigation. It's setting the title as we navigate over as here you can see, but when we click on these
0:09
we don't have them highlighted. They should be kind of this blue color to indicate here's where you are in the navigation as well.
0:16
But lets go and make that work finally. So the last thing that we want to do here is we're going to have a set_active_nav
0:26
and we'll have it state or something like that. This is going to be a string that we're going to pass in
0:31
so that will let us do things like over here on add we can say set_active_nav add, keep this nice and short home, compare, account
0:49
and I'm just making this stuff up. We're going to have it mean something in a second. What we're going to do down here
0:55
is we're going to say form = get_form(). My form, I'm going to pass this idea onto it. Again, we could do this up here but I kind of like having it
1:06
the idea of setting the nav just focused on this one function even if we're going to delegate it. So what we've got to do is
1:13
to find a function like this over our home form 'cause the form is really in charge of it's elements, right?
1:20
In charge of it's navigation and it's links and so on we shouldn't really be working with these too much outside of here
1:25
but we're going to write some simple code we'll say something like self link going to pass self in this world so we'll say self.link_home.role equals
1:36
it's either going to be selected or empty. Selected is a string, or empty. So we'll do a little ternary expression selected if state is home else None.
1:49
And we're just going to do exactly this for all of the navigational elements, there's only three so we have link add, the navigation element is add
1:58
and then the last one link is compare. What's nice, if it's none of those it deselects all of them, right
2:06
if we pass account it's going to unselect home add in compare. All right let's see if this works.
2:12
So here we are, we go home, we go add, notice how it sticks it's gray, go to compare, sticks but if I click on account all those on the left go away.
2:23
How slick is that, right? Super easy, home sticks, add sticks, compare sticks. And even when the app starts up
2:32
it's already got home selected, why is that? That's because at the very top here we're actually using the navigation to go home
2:39
not just internally loading that control. That means all the cool stuff of setting the title clearing the title, setting the selected elements
2:47
potentially checking for users all of that stuff is happening as we build out this navigation, very very cool
2:53
so hopefully you're starting to see the value of this navigation module over here and also just how cool is it that we can write these Python libraries
3:01
these Python modules and share them through our application? It's pretty cool.