Template – Resizing and Enable Layout


Learn how to configure the layout of each template so it resizes properly.

Video recorded using: Ignition 7.7


(open in window)

[00:00] By default, when you drag a template onto a window. Like if I take this template here and put it onto my window. The size of the template instance is the exact same size as the template master. Of course on the window, I can make the instance larger or smaller and you'll see the components inside the template get larger or smaller as well. I can right click on the template instance and I can revert it back to the master size so it'll be the exact same size again. Now, every component you put onto your window, just like the template instance here, you can set a layout for how that component's going to resize in the client. So here on my template instance, I can right click, go down to layout, I can set it to either relative or anchored. So in the client, as that template instance gets larger, the components inside of the template will get larger as well. And we can actually change how we want those components inside the template to get larger. So every template you configure is going to have one or more components inside of it. These components also have a layout that you can set. By default, this layout of the components is ignored because there's a property on the template called 'enable layout' that is set to false. If this is set to false, we're going to ignore whatever layout's on the components and we're going to set them to relative and don't maintain aspect ratio. Which is why the tank here looks skewed, because it's not maintaining the aspect ratio, just getting bigger here relatively. I can actually go back to the template and I can check the 'enable layout' So I can set my own layout here. For every component I can right click and set the layout to be either relative or anchored. So for example here, if I make this tank now relative and maintain the aspect ratio, it'll never look skewed. So in the designer, I'm not going to see this behavior. So as you see, if I make the template instance larger, this template here is looking the same size. It's only going to do this in the run time. So, if I save this, and then go into the run time, update it, you're going to see that of course, the tank does not look skewed here at all. And the same thing is true for this bottom one. This bottom one right now, if I make this little text entry a bit larger, you can see both of them getting large at the same time and maybe I don't want that, maybe all I want to happen, is for them to stay the same size but the text entry on the right, just to get longer. So I can actually go into this template. Again set the 'enable layout' so I can choose my own layout, go to each component, maybe at this top left, the label, I want the layout to be anchored, to left. On the text entry, I want that to be anchored, top left, right. Again, if I do this, in the designer, I'm not going to see this. Actually, I do see it here. You see it's getting larger, so it's adhering now to the anchored layout. And if I go into the run time though, I can see exactly how this is going to look on the screen.

You are editing this transcript.

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