[00:00] In this lesson, we will cover how to create a basic template in Ignition. Templates give us the flexibility to create custom graphics to be used as components across Ignition projects. Here on my designer I have a vision window open with a scale graphic I want to turn into a template. This scale graphic is actually composed of three different components, a low-profile drum scale from the symbol factory, a numeric label to act as the scale screen and a progress bar to add additional visualization to the scale. When I put these components together, it really does look like I've created a custom scale component. Let us now imagine that I have 100 scales on my plant floor. I could very easily copy and paste these three components 100 times over to visualize all of my scales. However, if I wanted to add something to my scale I would have to make the same change to all 100 copies of my scale which is not exactly practical.

[01:06] Using templates, I can define my scale graphic in one place. I can then create as many instances of this scale graphic template as I require. Then if my scale needs to be modified, I can make this modification to my scale template definition and this modification will automatically propagate to every scale template instance. Now that we understand why we need a template, let's create one. Templates are created in the Ignition designer, from the vision section of the project browser I can right click on the template section and choose to create a new template. I will name it scale and create it. The first thing you will notice about the template design area is the checkered background. This is because templates have a transparent background by default which of course can be changed if required. Templates must also have a template parameter. Template parameters are used to pass information to templates. In the case of our scale, it would make sense to pass it a weight value to display on my numeric label and the progress bar.

[02:09] To create a parameter, right click on the dark gray background here, go to customizers, custom properties to bring up the custom properties window. Here, you will see the template parameters table. Templates also have internal properties, unlike template parameters which are exposed and are used to pass information to the template, internal properties are not exposed and can only be referenced from within the template itself. I will click on this plus sign here to create my template parameter. I will name it, weightValue and make it standard type float. And while I will not give it a description I will set a strong target property to true. I will explain why a little bit later. I will click okay and now my template parameter is created. You can tell it was created because with my scale templates selected in the project browser I can scroll down my templates properties and I will see my new template parameter in blue font.

[03:07] I will now hit back to my main window, copy my scale graphics and paste them onto my template design area. Notice how I have not left any empty space in my templates design. This empty space will exist for every template instance you create so you want your components to occupy the entire space in your templates design area. Again, the scale template will get its weight from the weightValue parameter. Since I want this weight to be displayed on by numeric label, I will head to its value property and do a direct property binding to my weightValue parameter. I want my progress bar to also display this weight. So I will also select it and also bind this property to the weightValue parameter. That's it. I have a way to pass a weightValue to my template and I also have a way to display this weightValue.

[04:04] Let's create an instance of this template now. I will save my changes and go back to the vision window. I will now simply select my scale template from the project browser and drag it onto my window like I would any component from the vision component pallet. Every time I do this a new scale template instance is created. I can also drill down into one of my template instances properties and I will see the weightValue property exposed in each. Again this is the weightValue parameter in my template. If I set this value to say 80, both my scales, numeric label and progress bar will reflect this value. This weightValue property acts like any normal property so it can be bound to a tag, expression, property, query, et cetera. Earlier, we talked about the drop target check box for the float type weightValue template parameter. The drop target checkbox and template parameters allows you to link a template to all the tags of the same data type as the template parameter with drop target enabled.

[05:09] What does this mean? Well, weightValue is a float type template parameter and it has the drop target setting enabled. This means I can grab a float type tag drag it into my vision window and see the scale template as an option in this template menu. Once selected a scale template instance will be created and its weightValue property will be automatically bound to the tag I dragged onto the window. This makes it very easy to go from a tag in your tag browser to having a graphic to visualize this tag on your visual projects. With a use of drawing tools, the symbol factory library and the existing vision components you can create almost any type of custom template you can imagine.