[00:00] When a Vision template is added to a window like so, this new template instance will be the exact same size as its definition. With the template instance selected, I can resize it and we see the components within the template get larger or smaller. I can right click on the template instance and revert its size back to the master template size. Now, as with every component you place on a Vision window, you can configure the layout of your template instances by right-clicking, and going to the layout menu. Here, I can configure my template instance to have a relative or anchored layout. We can learn more about component layouts in the component layout lesson. By default, the relative layout is used, which means this template instance and all of its components will auto-scale based on the size of the container it is in, our pop-up window in this case.

[01:04] What if instead of having all the template's components follow the same relative layout, I wanted them to behave differently. Every Vision template will have one or more components in it. These individual components can have their own custom layout settings. By default, these layout settings are ignored due to a template property called "enable layout". With this property set to false, ignition will ignore whatever layout configuration is on the components and they will all be set to relative and will not maintain aspect ratio. This is why my valve here looks skewed, as it is not maintaining the aspect ratio. It is just getting larger or smaller as its container changes size. If I go back to my valve template definition, I can enable its layout. Now all of the layout settings of my templates components will be respected. My valve graphic here, just like all the other components in my template have a relative layout and we'll maintain aspect ratio.

[02:07] Going back to my template instance I can see that my valve graphic grows or shrinks as I resize my instance, but it's aspect ratio is maintained and it is no longer skewed. Now, these same rules apply to all of my templates. This other template I have here has its layout setting disabled so as before, all of its components will gracefully auto-scale as I resize my template instance. What if I just wanted my text field here to grow? And I wanted my label to just remain the same size? I could go to its template definition, I can enable layout, and then I can set my label to have an anchored layout, North and West. I can now set my text fields layout to be anchored and I will anchor it to all four sides like so. Now heading back to my pop-up, I can see that my text field will resize gracefully and will stretch to all four sides while my label remains in the upper left hand corner per my layout configuration.

[03:12] It is important to note that these layout settings will be respected on my Vision client. If I save my changes and head to my client, I can resize the popup where my templates are and I will see them behave just like I did in my designer.