#100DaysOfWeb in Python Transcripts
Chapter: Day 52: Anvil - Full Stack Web Apps
Lecture: Linking the forms
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So we have our cool little app here, we've got our various forms, and we've got a navigation. Let's go ahead and actually run this,
0:07
we've not run it yet. So, what happens when you run it? Well it actually just kicks off, I think, a docker image on the Anvil servers.
0:14
So let's click this and get started. Oh, before we do, let's give it a name. I'm going to call this HighPoint-100days. Now we can hit run.
0:26
Now notice it's running right here, this little helper thing up at the top, and then press stop and get back. But anything below this, this is our app,
0:34
this is what people will see. You can even expand and collapse the little side thing. But if we click on these notice, not so much is happening, right?
0:42
Our forms are not showing. But still, look, our app is running. And if we wanted to see it on other browsers
0:47
or on our phone or something you can even go over here. But we're not going to that yet, we're just going to hit stop.
0:53
Now remember, don't close your browser, you're not going back to an editor, you just want to hit stop, you're already here.
0:59
So how do we link these things together? Well, this is where this goes from kind of interesting to really different and interesting.
1:07
Watch what happens when I hit code here. We've already seen that we have our code in the background, okay, and let's open our app browser for a minute.
1:15
So what we need to do is import these other forms, in Python, so here's how it goes. From add_doc_form, import add_dock_form.
1:26
So this is the standard way you get access to these other forms. You're going to need this for all the various sub forms here.
1:38
All right, so we have them all imported, now what? So we're going to write a little bit of code here, that when the page loads, after init components,
1:49
when the page loads we want to show the home details form. So notice we have a content panel here,
1:57
and what we're going to do, is we're going to put instances of these forms into the content panel, and that's the thing contained in the middle.
2:04
So we'll say self, notice the nice Intellisense, cotentpanel.items, not items, what you want to say clear, like that. So, in case something was here,
2:13
we want to get it out, and we're going to do this every time we navigate, but also at the beginning basically. Say self.contentpanel.addcomponent,
2:22
and we're going to create, we want to create a home details form like that. And that's going to do it.
2:29
All right, now let's run this and see if it works. Boom! Look at that. HighPoint Home. Now none of this is working, so let's go link those
2:35
three things up and replicate it for the various operations we have here. So we go back to design, and we just double click home,
2:42
and notice link home clicked, and here's a function. Go back to design, do it for all docs, do it for add_doc.
2:51
So notice, here are the various things that we can do. We can go home, and let's actually, do this over here. Call self.link, clicked, home, like so.
3:05
Do the same thing with the other little forms for the various other pieces. So what have we got here? The all_docs. And this would be add_doc.
3:18
Okay, great, it's almost finished. Let's run it and see where we are. Notice up here our title, HighPoint Home, HighPoint Home,
3:27
and we click here, we get all documents, add a new document, but notice this is not changing. This is subtitle, but this is label title.
3:34
Let's fix that. Now one thing that's cool, is notice over here on the right. These are all the stuff,
3:42
things we can work with, and if you expand it, it shows you you can set the icon, text, etc., etc. So what we want to do is set the text here.
3:51
So we'll set it home there. This one let's say All Documents. And this one be Add a document. How cool! Look at that.
4:04
Very, very nice, I love how this is coming together. So, I think our navigation is basically done. The next thing that we got to do,
4:11
is let's focus on adding a document. Because it's not super interesting to show the documents, until we have the ability to add them.
4:18
So we're going to focus on adding a document next.