[00:00] Welcome back, everyone. Alright. It's time to view station details in a session. Now before we can do that, we do need a page for it. So let's head back to the home of the perspective module. We can click the little leftmost tab at the bottom of the workspace there and we'll manually create a page configuration this time. So under page configuration here, we'll click the plus button and we'll add a new page, which gets selected immediately. So when we're manually creating this here, we want to go ahead and make sure we at least leave the slash there and we want to basically define part of a URL that gets us to station details. So I'm just going to type station-details and I'll do this in all lower case and we do need to assign a primary view. So we can just add our station details, that we created. So we'll click the little drop down here. We'll go to primary views, go down to station details and then station details, and we can actually go directly to station details. Now if I right click on station details and I click on launch URL, it will open up a browser, but there will be a problem.

[01:07] And whoops yep, looks like the project isn't aware of any sort of page configuration and that's largely because we didn't save, since we created our page. So we'll just save again. Move our browser back over and there we are. We're up and running. Okay. So we do have this view here and we have two problems. Well one, we need to actually add ways to get to this page in the first place. The second problem is we need a way to get to the different stations and actually, I guess there's a third problem. We're kind of stuck at station one here. So we needed to have a way for this page to be able to switch over to station two or station three. And the way we're going to do that is by using a URL parameters. So basically we're going to add an extra little part here to the URL, that basically allows us to pass in like a number, so like two and we'll make it so that it takes us to station details, but looking at station two. So there's a little bit of setup we need to make this happen. So what I'll do, switch over and for our page configuration.

[02:05] So when your primary view, has a view parameters defined you can actually ref, put a reference to a view parameter in this page URL. So what I mean by that is if I go back to station details and on the view object here, under Params we have the station number spelled exactly like this with a capital N right? So I can actually reference this here which means when we're typing in a URL in the session or trying to go to a specific page, we can actually pass a value to the station number here. So if I go back to the sort of home of the perspective section here. I can do this for the page URL. I'm going to add a slash and then the notation you want to use is you want to put a colon down and then type the name of the view parameter, so station and the capital N, number and of course you can add more. You can put another slash down, put another parameter and so on. I don't need another slash on the back space out of that. I'm going to hit enter here so it updates our page configuration over here.

[03:03] So we can actually navigate to like station details slash three or slash one or whatever and it should go to the appropriate station. Now we made a change to the page URL, so I will save our project here and I'm actually going to close my browser off camera. I'm going to go ahead and launch a new session here. So I'm just going to right click on station details in the page Configuration. I'll launch URL one more time. And it's going to be broken and it's broken because it literally went to colon station number right? And that's fine for now, but if we were to sort of backspace that and I would just put a one here and enter, okay, it takes us to station one. If I change that to two, it takes us to station two. Okay, cool. So we now have the capability to basically point this view to different stations. So I should just say, "Use the data from different stations, right or just change the value of our station number." Okay, so now that that's set up, let's actually add some navigation.

[04:04] So let's add something to the horizontal menu. A component at the top here that allows us to go to the different station details. Back in our designer, up in the project browser if you closed it, you just want to go back to navigation and open up Top Nev. All right, so we will go ahead and select our horizontal menu components and I'm want to add at least three items here. So I'm going to come over to the items property here. I'll click the plus button three times. So we have three menu items. Let's start by configuring one. So the newest item is item two here. Starting with the label I suppose. We'll change the label from menu item, how about station one, and let's change our icon too. We'll go to the icon. We'll go to path and again, we're using the material library so I'll type material flesh and then I won't have you look but there's a business icon I want to use, so I'll type business. Now for the target here, let's cheat a little bit. Back in our browser, I'm going to take this station-details/two, including the starting slash actually.

[05:09] I'm going to go ahead and just copy that. And then we will paste into the target here, right click I'll paste. So /station details/, want to change that to a one and hit enter. Okay. Now let's copy the entirety of this item here. So I'm going to go up to two. I'm going to right click. I'm going to copy. I'll go to three. I'll right click, I'll paste, and then I'll go to four, right click and paste, but then of course, I want this to stay at station two and this one to stay at station three and then of course navigate to the appropriate page with the appropriate view parameter. So two is done. I'm going to collapse two. For number three here which is this one right here, we'll change that to station two. We'll change the label as well and that one's done.

[06:03] We'll go to item four, change that to station three and then station three and then I'll go ahead and save. We will switch back to our browser and we have our items at the top and you'll notice as I start clicking the display path in the alarm status table down below does change depending on which one I click. So it seems like it's working and that about wraps up this video. So in the next video, we'll start taking a look at building some of the mobile screens. So I'll see you then.