#100DaysOfCode in Python Transcripts
Chapter: Days 85-87: Fullstack web apps made easy
Lecture: Linking the forms

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