[00:00] Welcome back everyone, all right. So we have station details large and station details small. So we need to basically have another view to embed both of these. Now we're going to deviate a little bit from how we did our top navigation. Basically I do want a banner at the top of station details regardless of which version we're looking at, that basically states which station is currently selected. So we're not going to follow the exact same naming pattern here that way, as we did with our top nav break point, but all the same we will go ahead and create a new view here. So in these station details folder, I'm going to right click create a new view. This will be station details main. And I'm actually going to configure this as a flex container. And we'll embed a breakpoint container component inside of this for the switching between large and small. So we'll do flex container, and we already have a page configuration we created earlier, so I'm not going to check this page URL property. I'll click create view, and let's add a couple of components here.

[01:04] So to start with, I'm going to head over to the component panel over here, let's grab a label, was kind of throw a little label to the top here. So there'll be a little banner that states the station one details or station two details, or what have you. And then after that let's get a breakpoint container point, we'll drag a breakpoint container here, we'll drag that in and I will select the break point container. Well, let's set grow to one, so it takes up all the space there. And before we dig in too deep let's go ahead and take care of the label. So I do need the label to be aware of which station is currently selected, as well as just having an idea of a station being selected if you will. So what that ultimately means is all kind of stick to the same pattern we've been doing elsewhere, let's add a view parameter to this station details main, we'll have like another station number parameter. It'll have all the components inside of this view here. Use that station number as a way of knowing which station they're supposed to be showing data for. So I will select the station details main view object here, let's add a parameter, a little plus button here, I'll select a value and type station number with a capital N.

[02:10] Now I'm typing it like this for a very specific reason. If you recall, we created back on the home of the perspective module here. When we configured the station details page, we created or specified I should say this URL parameter. We're saying that the primary view for this page will have a view parameter called station number with a capital N. So I'm kind of rehashing a little bit of what we talked about with the URL parameters lesson. But the point here is that the parameter reference here on the page configuration, needs to match the spelling and casing of the view parameter on the primary view. Which is going to be the station details main view that we're building right now. Now we're also getting a warning here, that's just because we no longer have a view by this name anymore. I wouldn't worry about that too much right now, we'll come back to this and fix this later on. So we go back to station details main, we have station number, let's just give it to an actual numerical value, I'll just type in a one here, okay.

[03:08] So let's go to the label at the top, I do want to use a little bit of concatenation. So again, station, space number, space details. So with this label selected here, let's go to the text property, we'll click the binding icon. And earlier, long long time ago in this series, we did use an expression to concatenate a string for us. We're going to do the same thing. So we'll pick on an expression type. I'll resize this, and I will hold control and scroll my mouse wheel to increase the font size a little bit. We will head over to the rights, let's click on the signal button here, so I can take a look at the functions. We'll go down to strings we'll select concats, and the first thing I want is, "Station without trailing space" we'll put a closing quotes, put comma down. And then I want to get a reference to that station number of parameter we just created. So we'll click the little property browse button here. Then we'll go up to view under prams we'll select station number and click okay Well then put a comma after that and then we'll put another string, but an open quotes I'll put a leading space details, closing quotes and then we'll put a closing parenthesis down.

[04:21] So that way it looks something kind of like that. All right, we'll click, okay. And since we're looking at the label let's put a little bit of styling on this. So maybe make the font a little bit bigger and maybe maybe I have it stand out a little bit change the background color. So let's go to style here. We'll click the little modify style button here. Let's increase the text. So we've got a text and, oh, I don't know how about 20 seems fine. We'll do 20. And let's take a look at the actually, first of all let's add a little bit of a little bit of space in here to it. I don't necessarily want the text to write up on the left there. So let's go to a margin and padding and maybe add a little bit of a padding here. So how about 16, 15, 15 seems fine.

[05:05] We'll do about 15, 15 or 16 pixels seems fine. Let's also change the background color. So we'll use those variables again. So we'll type our apprentices stash dash. I'm looking at the neutrals here. So how about neutral 80 Or eight zero. So it's like a darker background color which means we'll want a lighter foreground color. So we'll go back up the text here. Oh, let's put a closing parenthesis there going a text, color up in parenthesis dash dash neutral 10 and closing parenthesis. There we go. So something kind of like that, that looks fine to me. So I'll click okay here to close that down. Okay, now it's time for us to embed our station details, large and small views. So what I'm going to do now is I'm actually going to close those other views. So I'm going to right click on the station details main here I'm going to close the others. And that allows me to go ahead and drag a large and small into our breakpoint container.

[06:07] So first of all let's deeply select the breakpoint container. So I will select over here. So select the breakpoint container and then I'll do a double click so that the break point containers deeply selected are currently looking at the large child. So I will find station details, large. I will click and hold, I'll drag it into the breakpoint container and drop it. So it created an embedded view component for us to change the name, to match the view we dragged in. And it also defined the station number of view parameter that lives on the station details, large view. So it saved us a couple of steps doing this. Okay, so here's where things could get a little tricky largely due to the sort of naming conventions we've been using here. So we have three different station details, views, and all of them have a view parameter titled station number. Now the important lesson here is that station details main is what our page configuration is leading to. And then the idea is that when we navigate, we pass a value into some URL parameter.

[07:03] That's going to be handed over to mains station number parameter. But the idea is that we want main to be passed to some numerical value. And then we want the instances of large and small to have their station number parameters bound to mains station number. So we're going to go to each of these embedded view instances. We haven't created small yet, but we will. We're going to bind the station number parameter on our embedded views. To main's station number view parameter. So what I'll do is I will select the embedded view right? So the station details large is selected now. I will come up to the params area and for this station number here, I'll click on the binding icon. We will configure a property binding I'll click the browse property button here, and we will go up to, and again, this little view here or this little pop-up area here shows you all the properties that are available for the view, you are editing in the designer.

[08:02] So it's basically routed if you will, or from the perspective of a station details main. So if I go up to view and prams here, then this is looking at the station number on station details main. So I'll select that and click okay. Which gives us a value of one I'll click okay. And will be good time to try to test this out in the designer. So if we select the view object, the main view object, if I change this to a two and hit enter, it should change the values. I should change the label but it should also change the value send. It's just changing the alarms are now looking at alarms from station two. If I change this to a three, right. It does switch over. So now I'm looking at it and you can kind of compare tag values too, right? So if you look at like the pH value for station three that seems to match up now, too, right? So just a simple property binding there, but again a little bit of an understanding of how these view parameters sort of correspond when you're starting to embed a view inside of another view. So let's go ahead and make sure that the break point container is deeply selected. So one of the ways we can do that from, we can do that from the project browser, you can just right click on the break point container and you can deep select that which will deeply select that component.

[09:11] Let's switch over to the small child. Let's click in our little workspace here and let's drag. We'll find the station details small. Let's drag this into the break point container. And just like last time we need to bind the station number parameter that's on station details small to the parameter that's on station details main. So for the station number here I'll click a little binding icon. We'll do another property binding click the browse property button there. And again, we'll start at the top. We'll go to view. We'll go to params. We'll go to station number and click, okay. And click okay, here. We're now looking at station 3's information. Now's a fantastic time to save your project. And this video is run a little bit long and the next video we need to go ahead and we need to make some corrections to our navigation. And then we'll wrap up the series.

[10:03] I'll see you then.