[00:00] Welcome back everyone. All right, it's time for us to build the station details screen. But before we do I wanted to take a moment to talk about the screen. Since it's going to be a tad bit more complex than the others we've worked on thus far. So here I have a low-fidelity mockup of what we're going to build here. The point of the screen is to display real time data for all tags, from any one station. The idea being that users can pick a station and then we'll take them to a copy of this view that focuses specifically on the station that the user selected. We'll be using flex containers here just as we we've been doing so far, and they've been very useful in regards to positioning and scaling, but they do present a bit of a design challenge. Components in one of these containers are presented in a single direction per container, so left to right or top to bottom. To get the desired look in this, mockup here we're going to have to make use of several containers.

[01:01] Now there's likely several ways we could approach this but I'll show you how I'm going to do it. In this image I added borders that represent the Flex Containers I'm going to add. So ultimately we'll use four Flex Containers but let's talk about the direction for each. So starting at the root we'll set the direction to column. So we'll go top to bottom. We'll add two children inside of the root container. We'll add another flex container that's going left to right, and then we'll add an alarm status table as the second component. Now this flex container going left to right we're going to place two more Flex Containers inside of there. Both of these flex containers will be set to columns. So they'll both go top to bottom. And then from here we'll populate those inner most containers with the various display components that will help us visualize our data. All right, so this does pose an interesting question. What about the mobile experience? Well since the view is going to be relatively complex we're just adding further complexity by making sure that this view resizes precisely in the way we want on a more narrow screen, we could probably make it work but let's take a more deliberate approach and make a dedicated mobile version of the screen later on.

[02:12] We can use a break point container to handle switching between the two versions. Now at this point in this series we have not really looked at the break point container yet but basically it can switch between two different sets of components depending on how much available, which there is. So when there's a lot of available with we can use the larger desktop version and then when there's less, we can show the mobile version. So ultimately we'll have a third view we'll need to make for the breakpoint container. But for now, let's just focus on the desktop version of the station details view. Welcome back we're in the designer here, as we've been doing it's time to create a New View because we will have different versions of station details. Let's add another folder. So in the project browser, under views and primary views I'm actually going to right click on primary views.

[03:01] I'll create a New Folder and we'll call this Station Details and we'll click the Create Folder button and we're going to focus on the desktop version first. So I'll right click on Station Details. Let's create a New view here and we'll call this Station Details. We're going to be using a lot of Flex Containers. So the root container type will be switched to a Flex Container. And I'm not going to worry about a page URL. Now we can add one a little bit later on. so we'll click Create View. Okay, so I did say that I wanted the root flex container to be set to column. And fortunately for us, it currently is. So we need to add two components in here. The first would be another Flex Container. So to the component panel here, we'll clear that out and we'll search for Flex under Container. I'll grab the Flex component and drag that in. And then I wanted an alarm status table component. So we'll type in alarm and we do have our alarm status table here. We'll drag that in and drop it.

[04:03] Now you may or may not have rows in this component already. If you're familiar with how the ignitions vision module worked with alarms perspectives works very similarly if not that's okay. But basically this component is showing all configured alarms in the system. We haven't really talked about alarms in this project yet but if you opted into the quick start workflow you have a bunch of alarms and tags with alarms on them, I should say already. So you probably have a bunch of rows as a result we'll end up adding our own alarm later on and we'll we'll play around the table a little bit. So it only shows alarms that tie to our station UDTs, but for right now I'm going to largely ignore this component safer maybe making it a little bit smaller. So in the property editor here under a toolbar I'm going to set enabled to false and I really don't need it to be this large here. So I'm actually going to grab the bottom and just kind of shrink it up a little bit. We can play around with the scroll bar and the size of it later on, but that's fine for right now. All right, so the next thing we're going to do is I'm going to select the Flex Container we placed here.

[05:03] So really the first component we added and I'm actually going to change the grow property here to one I'll hit Enter. There are so, I kind of want this to take out more of the available space, so that should be just fine. Okay, so I did say inside of this Flex Container there'll be two more Flex Containers. However, this one needs to be set to a row. So let's go ahead and deeply select into here. So we'll deeply select that did change the deep selection. So now the one titled Flex Container is deeply selected and no longer the root container is no longer deeply selected and this is already set to row for us. So when you drag a Flex Container over from the Component panel over here it is set to row by default. So we're already set with the direction here, but let's add two more flex and containers. So back to the panel clear that out, let's find Flex and we'll drag number one and number two. I wanted to show off some of the data points from our various UDTs here.

[06:04] Now, if we go ahead and we look at one of our UDTs so we do have a tank we're well aware of the vessel or the tank capacity we were playing around with later. We do have some pumps, pump tags or really one pump faulted tag and then a valve flow tag there. So how about we use the secondary component here to visualize the pump fault in the valve float tags here. Now we do have a bit of a unfortunate situation here with the naming conventions. We have a bunch of things just called Flex Container which is going to get real confusing later on. So let's rename some of these innermost containers or at least make sure everything has a unique name. So for the right most Flex Containers we just added here. So flex container zero in my case. I'm going to change the name here. We'll put the pump and valve components in here. So pump and valve container I'll hit Enter. And then for the left-most container here, this is going to have, are the rest of our tank tag. So I guess I could call it a vessel container I suppose I'll hit Enter.

[07:07] And in the very least now we do have different names for all of them here. So should hopefully be easier to Identify. Okay, so let's start off with the vessel container. So I'm going to deeply select into that. So let's see the deep selection changed. Let's add another instance of a vessel components. So we'll go ahead and search for our vessel should be under symbols. Now we could use the view we created earlier that we use on the overview. I don't necessarily need all the bells and whistles so like the alarm banner and stuff like that. So I'm okay with just grabbing a standalone component here. So I'll grab vessel and drag it into the container here. Now we're going to put a secondary component in here later called a Flex Repeater. You probably saw it a little bit earlier when I was searching this guy right here. I'm not quite ready yet. So we need to do a little bit of extra work. Basically that component allows you to create a multiple instances of the same view as it's pretty useful for repeating different views.

[08:02] But we'll talk about that. We need to create a view to repeat first. So we'll talk about that later. But for right now I did say I wanted these inner most Flex Containers to go from top to bottom. So again, with a vessel container deeply selected we'll just change the direction to column. And I would like to make this vessel a little bit taller. So I'm actually going to click elsewhere inside of the vessel container just to drop selection and fix that little selection highlight there. And then I'll go ahead and resize a vessel. something like that's fine I suppose. We can play around with that a little bit more. And I would think I would like to maybe try to center this as well. Again we're going to have another component in here later but for right now, maybe I'll just do like space evenly. There you go kind of moves it to the center. And I still have vessels selected here. So how about we change the text. So instead of deleting it this time, how about we move the words vessel here above the graphic and then we'll apply our style class to the value display there. So what we'll do is we'll go to label and then to location we'll change the location to top, and then for value we'll go ahead and go down to style and we'll change classes.

[09:11] We'll go ahead and click on the little drop down there and we'll select our text data stock class we applied earlier. Okay, that seems fine to me. I'm going to go up a level in deep selection. So I'll kind of click outside of the vessel container. Let's go ahead and select our pump and valve container. And again you can always just select it from the project browser. If that's easier to find, we want to deeply select this. So now that I have it highlighted here I will double click into it. And we do have, again we have more symbol components here. So if I clear this out here, if actually I collapse everything under symbols. We do have a pump and we do have a valve. So I think I'll go ahead and drag the pump in and then I'll drag the valve in as well. And again I would like these to be top to bottom instead of left to right. So we'll get the component panel out of the way here. And because we do have a pump and valve container deeply selected, we'll switch this over to column.

[10:06] And let's start with the size a little bit here. I'm going to select pump, and then I will drag it down just to increase the size here and looking at the position properties and the property editor a basis of about 180 pixels seems about right. So I'll actually go and just type in 180 here. And then for the valve, we'll play around with it. But ultimately 180 pixels also looks about right. And similar to how we did the vessel. Let's put the text at the top and then we'll apply our style of class to the value display. So we'll start with pump, I'll go to the label. And again, because these are all similar components they do have some common properties. So they all have a label object and a value object. So they work very similarly. So label we'll go to location here, go to top and then for value, we'll go to style classes and text data. And we'll do the same thing for the valve.

[11:00] So the valve, label, location, top, value, style and then we'll apply our style class. Now I'm not really a fan of how close these two are together. We could play around with the justification on the container here. We can try to, I'll space them evenly. It looks a little too far if I'm being completely honest. Yeah, these aren't quite doing it for me. So what I think I'll do is I'll center it and I'll kind of click elsewhere in the container just to drop that selection there. So again I don't want the value from pump to be that close. So what I think I'll do is that we can actually add a little bit of padding here or actually a margin. Actually we'll add a little bit of a margin between these two. So just to give us a little bit of a space. So that's actually a styling attributes. So I will select the valve here and then let's go to the style object on the component. So not inside of a value or label, but just at the root there that style there. Let's open up the style editor.

[12:00] We do a little graphic here. So if there was a border on the component padding means that space inside of the boarder margin means spacing outside of the border. And we can kind of play around with it too. So I think about 50 pixels at the top there. As a nice little gap between the two components if you wanted to see what that looks like I'll backspace there and a type 50 inside of a padding there. So you noticed that within the selection of the component it just adds some pixels right there. So it kind of sometimes you want that look, sometimes you don't. I think I do want the margin in this case here. So I'll just type 50px there and I'll click OK. Next I want to change the labels on these two components here so they can better illustrate what they represent. So let's try to incorporate something similar to the tag names here. Since I have valves selected here, let's go back to label and for the text, how about valve space flow. And then for the pump, we'll select the pump here. We'll change it from pump to pump space status. There we go.

[13:03] And I'm okay with the vessel. I guess we could say like vessel details but that's fine. Okay, so let's go up a level. I don't necessarily need these two, the vessel container and the pumping valve container. They're a little off center, there are a little to the left. Let's try to center them a little bit more. So let's go up a level. I'll click outside of the pump and valve container to move the deep selection up a level here. And then for this container here since this is the one that's going in the direction row. So instead of having everything start at the flex start there, we could probably give a space evenly a shot. Let me go ahead and clear the selection there. And yeah, actually it looks fine. It looks pretty good actually, so okay, cool. I'm happy with that. All right now we have quite a bit more to do. I mean, this is me kind of playing around with the proof of concept, just because I wanted to talk about sort of the structure and the layout of this view but obviously we need to hook up some bindings and start getting some live data into here. But this video has gone on a little long.

[14:00] So in the next video, we'll come back to this view here and we'll start hooking up some bindings. So I'll see you then.