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
-
6:41Tag Binding
-
4:55Indirect Tag Binding
-
3:16Property Binding
-
3:27Expression Binding
-
4:55Query Binding
-
5:35Tag History Binding
-
2:43Component Overlays
Take Topic Challenge
Supplemental Videos
-
3:31HTTP Binding
-
2:55Expression Structure Binding
-
3:14Tag Binding - Expression
-
3:01Tag History Binding - Expression
-
2:55Tag Drop
LESSON
Property Binding
Description
A property binding allows a property on one component to synchronize with another.
Video recorded using: Ignition 8.0
Transcript
(open in window)[00:00] In this lesson, we'll take a look at Property Bindings on Perspective components. So in my View here, we'll create a couple of components, I'll grab a Numeric Entry Field and how about a Slider and for the Slider here, let's also turn on the labels. I would like to create a binding from one of these components to the other so that when the value property on, say, the Slider changes I also want the value property on the Numeric Entry Field to update. So, I'll select the Numeric Entry Field, I'll head over to the property editor and for the value property, we'll place a binding on this one property. I'll click the binding icon. We'll see the binding window up here. For the binding type, I'll select a property type. Property Bindings are fantastic when you want to bind the value of a property to the value of another property that exists on the View somewhere. From here, we need to specify the path to the property we want to bind to, however, don't worry about typing anything into here, there's a little button on the right-hand side that allows you to browse all of the available properties in the View and it will type out the syntax for you. So you can see that I can grab anything inside of the View and we can also grab some stuff that's sitting in the session. So, we know that in my View, in the root container here, we have our Numeric Entry Field, but we also have our Slider if I were to expand the Slider here, we can go down to the props category, and we can see that I have my value property. So, with that selected, I'll hit OK and you can see that it typed out the notation for us. So, again, we don't really need to know what all those characters mean, they're in the User Manual if you're curious, but the little button there helps build the path for us. We can see in the binding preview down below, we're no longer getting an error, so I'll hit OK. You can see that we have a non-null value here so if I put the Designer into preview mode, we'll see the value on the Numeric Entry Field change as I click on the dial here and start dragging it around. So, whenever there's a value change on the Slider, we're simply pushing that over to the value property on the Numeric Entry Field. By default, the flow of data on this binding really only goes in one direction. If I try to change the number on the Numeric Entry Field we see that the Slider doesn't update. Now, if you did need to synchronize the values, so if I wanted to change the value on the Numeric Entry Field and have it push back to the Slider, that's very easy to do, you just need to make the binding Bidirectional. So, if I click on the binding icon again, for our Numeric Entry Field, we can see that our old binding is still there. I can hit the Bidirectional check box and hit OK and I did that while I was still in preview mode so we're ready to test this out. So I can click here, I can try to type something in and hit enter. You'll see that the dial on the Slider jumps and of course if I grab the dial, start moving it, we're changing the value on the Numeric Entry Field still.