[00:00] Welcome back, everyone. All right. It is time to create the smaller version of station details. Now we're not going to copy this entire view over. I don't really need most of the components and most of the configurations here but a couple of things we will add to the smaller version, we will add on the view. We will add a station number parameter that way the smaller station details knows which station it should be showing. So we can create the parameter and then add bindings to all the components inside that look at the parameter. And then I'm actually going to copy this instance of the flex repeater. We'll use this as the base for all of the data cards. We'll just add a couple of extra entries and make some additional modifications to it. Now this current station details view we have here this is really the larger station details, right? So, so kind of to compare it to what we do with navigation where we have a large or small and both of those go inside of a breakpoint container in a different view. This station details is really the large station detail. So I'm going to rename it.

[01:01] So the station details view, not the folder but the view I'm actually going to rename. I'll just right click and rename it. Has to be a station details/large. I'll hit Enter, there we are. So it does cause the designer to reload the view when you rename it like that. So that's kind of why I was jumping around back and forth there and let's create a new view inside of this station details folder. So I'll select the folder, I'll right click on the folder and I'll create a new view. This will be Station Details Small and we will use a Flex container as the root container type again. We don't need to page URL. We can actually just use the same page configuration that we created earlier on. So I'll click the Create View button here. All right. So to start with on station details, a small here on the the view object, I'm going to add a view parameter. So I'll click the little plus button here, I click value. And I'm just going to use the same naming convention. So StationNumber with a capital N and I'll tab over and we'll just give this a value of one.

[02:04] Now for the next part I did want to copy that flex repeater. So let's switch back to Station Details Large, I'll switch back to it down below or you can just click on it in the project browser and let's deeply select down until we can select our flex repeater. So I will double click on the flex repeater which deeply selects the Flex Container. I'll double click again, which takes it to the vessel container. And I will single select from here which will select our flex repeater. I will right click on the flex repeater and I will copy it. I'll switch over to the station details. I'll right click and paste. All right. And let's add one more component in here. Let's go to the component panel and let's get another flex container, go to Flex Container. We'll drag that down. And then I will deeply select into this flex container here I'll double click and let's add a button component. So we'll go back to component panel here clear that out, look for a button and we'll drag that in. So we'll create a, this button we'll stylize it and we'll configure it so that it, it does some navigation to Station 1 and then we'll duplicate it and make it do the same to the other stations.

[03:10] All right. But we'll come back to the buttons later. For now let's start with the flex repeater at the top. So I'm going to click outside of that Flex Container so that the deep selection changes to the routes. I will select our flex repeater here and we need to add a couple more cards. So I feel like I want our UDTs here I'm going to ignore the pump and the alarm stuff for this. But I would like to add at the tank capacity and then the valve flow. So we want to add two more instances inside of here. Now I'm not going to reorder these. I did these alphabetically initially. I'm just going to add them at the bottom of this. So let's come over to instances here. I'll get the little plus button once, twice and then we want to copy the configuration from these existing entries here. Now, something I did want to mention real quick here. If I take a look at one of the bindings here on our data cards so I've got a value here and I'll click the binding icon. Now this is binding is still using a parameter and that parameter is still looking on the view.

[04:04] It's checking for a parameter or param named station number. So the reason that I'm still getting live data here is because I went ahead and I created that station number view parameter on this view first, and then I copy this flex repeater over. So if you did that backwards, then the flex repeater would probably not work initially, but you just want to make sure that the parameter reference here does in fact match the parameter that we added on the view here. Anyways, let's go back to our flex repeater here and we want to go ahead and make sure instances 3 and 4 have our three parameters. So I'm actually just going to copy 2. So I'm going to get the element or instance 2 here. I'm going to right click copy. And just like we did before I'll right click on instance 3 and I'll paste so that it adds a name value and units. I'll then right click on 4 and paste. So it does the same. We'll need to copy the bindings over 2, but for right now let's just change the static values in a name and unit.

[05:05] I'll change the name here. So for this first one here, we'll leave this to tank capacity. So we'll type in Tank Capacity as the name there. And that will probably be as a unit. That'll probably be a percentage. And then for the last one here, we'll show valve flow. That should have a unit of GPM. Alright, now I'll copy the binding. So I'll right click on value here. That will copy the binding and then I'll right click on the value under 3 I'll paste the binding and then I'll right click on the value under 4 and paste the binding again. And then of course we want to update the bindings on these two instances. So they're looking at the correct task. So for a 3 here, which is supposed to be looking at tank capacity, we'll click the binding icon next to value and we'll change the tech path to Tank capacity. We got a good value there. And then for 4 here, we'll go to value click the binding icon, and this should go to valve flow, and we had a good quality value there.

[06:13] All right. Excellent. I'll collapse the instances property here because we're done with that for now. The next thing I think I want to focus on are the flex settings for the flex repeater it's looking at a little cramped up here. So I think I'd like to add a little bit of spacing. Let's start by changing the grow property on the flex repeater here to one, that way it takes up more of the available space in its parent container. And since we're looking at spacing here this flex container down below probably doesn't need to be that tall. Let's, let's let that in change it spaces to something smaller, maybe, maybe 150? We could probably do a little bit smaller. How about 125 pixels? Yep. That, that looks fine. And then we'll go back to our flex repeater here. I'll select that. And these could reasonably be a little bit taller each of the little data cards there. So why don't we go ahead and tell these to also grow so we can go to element positions here and we can specify that they are allowed to grow.

[07:08] So then they'll take up all that space there. Now that is a little large though. I would like a little bit of padding actually on the edges as well on the sides as well as in between. So what we can do is we can go to element style and apply styling to each of the instances. So for element style I'll click the little icon just to the right of element styles that calls open the style editor and let's go to border, excuse me, not border. Let's go to margin and let's add a little bit of a margin around. So how about six pixels? Maybe a little bit more about eight. Okay. It seems a little better and the text could be larger too. So let's go up the text here and maybe you try. How about 30? 30 works. Let's do 30 pixels and we'll click OK here. All right. The data cards are looking good. We're not quite done with this view yet but this video is running a little long. So in the next lesson we'll take a look at the navigation buttons at the bottom. I'll talk to you then.