This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.


Autoplay Off

Supplemental Videos


This lesson examines the Embedded View component, which enables you to put a view inside another view.

Video recorded using: Ignition 8.0


(open in window)

[00:00] In this lesson, we'll talk about the Embedded View component in the Perspective Module. The Embedded View component allows you to place one view inside of another. To begin with, I have two views down below. I have my bigger view, and then I have my smaller view. The smaller view has a label, and a slightly different background color. I would like to embed this smaller view into the bigger view. To begin with, we'll head over to the bigger view. We'll head over to the Component Palette. And under the Embedding category, we have the Embedded View component. I'll drag an instance of this component onto my bigger view. You can see that there's a warning on the component. That's because we haven't specified a path to a particular view that this project has access to. So we can head up to the Property Editor, and under the props category, we have the path property which is actually a drop down, so if you click on the little triangle here, you'll see all of the available views. Now in this case, we are on the bigger view. If I select the bigger view here, so I'm placing an instance of the bigger view inside of itself and hit okay we'll get a different message. So you can't embed a view inside of itself. So we'll head back to the path property, and we'll switch the bigger view over to the smaller view and we'll hit okay. And you can see that it's now displaying our smaller view inside of the component. Now in this case I'm getting a scroll bar because the width of the label here is partially hidden by the view port on my Embedded View. So of course I could resize my Embedded View. The scroll bars appear based off the dimensions and configurations of the smaller view. So for example if we go back to our smaller view, you can see that it's only about 200 pixels tall but my component is considerably larger. So if we go back to my bigger view here, when we try to use the rulers here, you can see that the height here is set to over 300 pixels. Now when you have the Embedded View component selected, if you look in the Property Editor, you can see that there are some default settings here. So we can force the component to use the default height and width of your view. So if I were to check the useDefaultViewHeight, you can see that the height of the view, that's inside of the Embedded View component, is only 200 pixels. Next, I want to talk about passing parameters into the Embedded View. Now on my smaller view here, I did mention that I have a Label component, and the Label component here has its text property bound to on my view, the smaller view, this params property here called myText. So on the view I can change the value of my text, and we'll see the new text on the component. So if you have these params properties configured on your views, the Embedded View component provides you access to these parameters. So if we go back to our bigger view, and if I select my Embedded View component here, under the params property I can specify any params properties that are on the Embedded View. So I'll hit the plus icon here, I'll create a value member, and I want the key to match the name that's on my smaller view, so I'll type in my text. Now when I hit enter, you'll notice that the text on the Embedded View changes immediately, so now I can type whatever I want and pass this value in to my Embedded View. So ideally, you can start using bindings or scripts to change the value of these params properties. So hopefully that gives you a good idea about what the Embedded View component can do.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.