Thursday, July 21, 2016

Template Layout and Resizing

First of all, I want to say sorry for neglecting the blog for a couple of years. Starting this week, I want to post a new blog entry once a week. I have realized that there are a lot of little things that I know that can really make a difference when developing in Ignition. Stay tuned and follow me for new and exciting tips and tricks on Ignition.

This week I want to touch on template's layout and resizing. I find that a lot of people get tripped up with how the layout works and what happens when you resize the template. For this post, I want to explain exactly how it works.

By default, when you drag a template onto the window from the Project Browser, the size of the instance is exactly the same size as the master template (template definition). You can make the size of the template instance on the window larger or smaller but it only changes the size of that instance. Usually people want to make the template instance larger that what was defined.

However, if you modify the size of the master template it will NOT automatically resize the template instance on the window. For that, you must locate the template instance (everywhere it is being used), right click and select "Revert to Master Size."


That will change the size of the template instance on the window to the size of the master template.

Putting a template on the window is the same idea as putting a Vision component on the window. It is very important to note that you are now dealing with 2 different layouts: the layout of the template on the window AND the layout of the components inside of the template. By default, the layout of the template instance on the window will be "Relative - Maintain Aspect Ratio" and the layout of the components inside of the template is "Relative - Stretch."

The layout of the template instance dictates the layout of the components inside of the template. In other words, if the template instance does not resize than the components inside of the template will not resize as well. Also, the template instance can have a different layout than the components inside of the template. For example, you may want the template instance to fill out the entire window using anchored layout but you want the components inside of the template to maintain their aspect ratio.

So here comes the issue that everybody runs into: you set the layout of the components inside of the template to anchored or to maintain the aspect ratio but when you resize the template on the window it ignores that layout and stretches the components.

That happens because a template acts the same way as a "Component Group" by default. That means the layout is stuck to "Relative - Stretch." If you want the template instances to respect your layout settings, you need to set the "Enable Layout" property to true in the template definition.


That little checkbox will allow you to control the layout inside of the template. With that you can now control both layouts: on the window and in the template.

If you have any questions please feel free to email me at travis@inductiveautomation.com. Please stay tuned for more tips and tricks.

1 comment:

  1. Hi Travis,

    Perfect timing! I encountered this issue only last week. This tip lets me use one template and resize it as required.

    ReplyDelete