[00:00] One of the most fundamental building blocks of a perspective project is a view. A collection of resources bundled in a root container that can be used in a few different ways throughout our project, as a primary view, a dock view, or a pop-up view. In this lesson, we'll explore another key use for views, which is as a form of, well, a perspective template. Views in perspective can be nested inside each other, which is perfect for content that needs to be repeated, swiped through, or even spun up dynamically. Creating so-called template views can also serve as a good way to avoid duplication of effort, either within a project or throughout several. If I have 10 motors, maybe I don't need to create 10 different views, I could just create one view that works for any motor. So let's just walk through a simple example. Let's consider this view I have here, which is set up to show some sign data in my system, specifically from my tags on the left-hand side here. I've already got a nice time series chart across the top that's showing me tag history data for my first signed pen, but underneath it, I'd like to provide just the current value for the pen directly.

[01:03] Now I could just add components in here to show that data point, but say I'd like to use the same display in other places in my project as well or in different projects entirely. For that, let's go ahead and roll up all of our components into a standalone view instead. So to get started, I'm going to find the views folder in the project browser, right click and select new view. Let's set up a view called sign value and let's make it have a route container type of flex. And I'll make sure to leave the page URL checkbox unchecked because that would give this view its own page and I don't really want that. Its main purpose is to be nested inside other views. So with those settings in, we'll click create view and get to designing our view. To get in the spirit of creating a nested view here I'll make my view a little smaller like so. Now I'd like to show two things inside this view a label that says sign one on the left-hand side and devalue on the right-hand side. So to do that in the top right here I'm going to set my direction on my flex container to row, then we can get to adding our components.

[02:05] In my component palette I'll click and drag in a label component and then I'll also drag in an LED display component. I'll begin by configuring my label, so I'll select that, then set the grow value to one. So it takes up all remaining space in the view, I'll also set the text property on the label to sign one. Since we're going to be showing data for just the sign one tag in here. And then for added flare let's go ahead and configure some styling on the label. So next to where it says style I'm going to click the little paint swatch icon to configure an inline style. So maybe I'll expand text and set the font size to 16 points and set the text alignment underneath to center and then I'll click okay at the bottom to finish and I think that looks pretty good for now. The final thing I'd like to do in my view is time I already display to an actual value. So I'll click on the LED display, then click the chain link icon next to value. From in here, I'll configure a tag binding and then on the right hand side I'll select the tag icon, expand tags, expand sign tags and then select sign one and I'll click OK.

[03:12] Now I'm done with the binding so I'll click OK here as well and that's it. I now have that sign value coming through on my LED display. It's now that our view is configured, let's work on how we can incorporate this view into our project. So I'll navigate back into my sign data view. Now there are two ways I can incorporate that new sign value view we just worked on. The first way is to go into our component palette and search for the embedded view components, then I'll just drag that component into my view here. The embedded view component allows us to show any other view inside of this one and to set it up all I need to do is with the component selected, I'll find the path property in the property editor expand the dropdown and select assign value and that will make my sign value view show up. There are some other properties here. We have a Params field that we'll talk about in a later video, and we have used default view width and used default view height. These are going to control whether we use the size of the view as we configured it inside the view or whether we expand or contract the view to match the size of the embedded view components.

[04:15] So I do want to briefly mention there's a slightly more convenient way of adding embedded view components. We can just find the view we'd like to embed in the project browser, click and drag that into my view. And that just adds an embedded view component that's looking at my sign value view already. It's also worth noting that other components also make use of embedded views in one form or another. The carousel components, flex repeater, view canvas and accordion component all are built to work directly with nested views while other components like the table and mat components can work with embedded views in certain configurations. So that wraps up the basics behind nesting views and perspective. In later lessons We'll talk about other features that help us work with views of it better.