You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
3:30Component Overview
-
2:37Creating Components
-
4:06Component Properties
-
3:19Custom Properties
-
1:40Tag and Component Overlays
-
2:53HTML in Ignition
Take Topic Challenge
LESSON
Custom Properties
Description
Most Vision components support custom properties. This means that in addition to the normal properties of the component, you can add your own properties. You can think of these properties like your own variables in the window.
Video recorded using: Ignition 7.7
Transcript
(open in window)[00:00] Every component in Ignition comes with its own unique set of properties by default. So here for example, I've a label selected in the window on the designer. In the bottom left in the property editor, I can see all the properties that exists for that label. So we have properties like the text, or what's displayed on the label. The font, the background color, the foreground color, and more. All these properties here are provided by Ignition. It is possible for us to extend this list of properties by adding our own custom properties to the component. Basically, it's like adding variables to the component that we can work with in the screen. So I can right click on the component and go down to Customizers and select Custom Properties. Pretty much every component has this customizer so we can add custom properties to it. So when I go and open that up, I can add one or more properties to the component. So by clicking the plus icon on top right, we add a property, every property is going to have of course a name. The name you want to make sure it's different from any of the names that we have already on that component. So I'm going to select value1 here. Then what is best datatype of that property, which can be integer, a Boolean, a string, a date, a color, whatever data type is appropriate for what you're trying to do. So here I'm going to select integer from my first property, go and add a second one, I'm going to call this one value2, I'm going to go ahead and make that one a double. Now I have two custom properties here added, and I go and press OK. They'll show up in the bottom left of the component. At the very bottom, I'll see an area for custom properties, and there are my two values value1 and value2. Custom property show up in blue, so you know they're custom properties. All of the standard properties for a component, the ones that Ignition provides are blocked up the top here. Of course, we can bind these two custom properties to tags or to expressions or databases, or we could just simply set the value here statically, depending on what you want to do with those custom properties. So again, they're like adding variables to a window. So I went to set the values to two and to 4.5 here. Now that I have some values, of course, I can use those properties throughout the rest of the window. Let's say for example, that I wanted to simply display the value1 times value2 on this label here. So I'm going to go up to the text property, I'm going to bind the text property by clicking the little button to the right hand side to an expression, I'm going to utilize those two custom properties here. So I'm going to go to the top right and insert a property, go on selecting my labels value1, and then multiplying that by value2. At the very beginning because this is a string, what I'm going to do is I'm going to say, value equals, and then concatenate this string together. So I have the math of value1 times value2, so I should see value equals nine, which is two times 4.5. So when I press OK, I can see value equals 9.0. So essentially, I can add custom properties which are variables on the window, and then I can use them in binding. And the reason we kind of do this is so that we can easily in the designer, to troubleshoot, we can go and see what the values of each of these properties are. Custom properties are not only important for particular components, they're also very important for passing parameters between windows. It's very common to add custom properties to the root container of a window. So you can do the same thing here. And that's how we can pass values from one window to another especially on pop-up windows. Right click on a button, it's going to open the window, it's going to pass a certain set of values in, it's going to pass them into a custom property that we can then use on that window. So custom properties are extremely important and can be used for a variety of different functions on Ignition.