Learn how to access properties of other components from a component event script.

Video recorded using: Ignition 7.7


(open in window)

[00:00] One of the most important things to understand when scripting in the component event handlers is how to access properties from other components on your window. So let's say we wanted to have a button that wrote the value of a spinner to a tag. So inside of this button's action performed script, and of course it's worth mentioning that we could certainly just use the Set Tag Value builder and be done, but in this case we're trying to learn how to write script ourselves. So, remember back from the event object lesson that event.source is a pointer back to the button itself. That's the source of the event, and in this case the source of all these events are the button that we have selected, and all components also have a property on them called parent. So event.source.parent is pointing to, in this case, the root container. So .parent will let you get access to the container that a component is in. Containers have a method on them called getComponent. getComponent takes a string, which is the name of the component you want to try to find. And that is how from the button we would go and grab a hold of the Spinner. So let's just assign that to a variable here. Then we can easily grab the value of the Spinner. So we can say value is equal to spinner.intValue. And the reason I knew it was intValue is that if you go and take a look at the spinner, you find the property that you want to reference, here value integer is what I wanted, and I you hover over this you'll see there that it says Property Scripting Name intValue. You can also just, instead of a hover over you can select this button to always have that panel displayed. So all properties, even though they have this nice more descriptive name here, you can find the true scripting name here in this little information panel. And you simply use the dot notation to pull any property out of any object in Python. So if this is the spinner I can use dot and pull that property out of that spinner. And now I can write it to a tag. And that's done with system.tag.write. And now I need to find a tag path to write to, and in this case I'm just going to go ahead and pick this tag here. Just going to copy its tag path and paste it right in here. And then the value directed the tag, in this case is value. And that's how we would write the value of the spinner to a tag from a button. So if I want to make this four and press the button, you can see that the value of the tag changes to four. It's also worth mentioning that if you have any custom properties on a component they can be referenced in the same way, transparently, just like a natural property. So, for example, if I had a custom property on this spinner called modifiedValue, and I had my modifiedValue bound to an expression that just took the natural int value and, let's say, multiplied it by 100, so now I've got this multiplied value. Yeah, I could use that custom property in the exact same way. So I can just reference .modifiedValue right here off of the spinner, even though this is a custom property. And you can see that it's writing the modified value, not the natural value here. One thing that we find sometimes trips up new scripters is how to walk around through scripting amongst multiple containers. So let's go ahead and take two containers. Let's give these things a bit of a border so that we can see them. And we're going to put the button in one container, and then we're going to put the spinner in another container. So I'm just going to go ahead and cut it out of here and paste it into here and cut the spinner and paste into here. So you can see that we've got a button inside of a container in a spinner inside of a container. And I'm going to name these containers. So I'm just going to call this one button container BC. And I'm going to call this one spinner container SC. All right, now we're going to see how our script needs to be modified in order to handle this situation. So if we open up our button's actionPerformed event script this is no longer going to work because event.source is the button, .parent is now BC. And so if you called BC.getComponent Spinner it would complain because there is no spinner inside of BC. So instead what we need to do is that once we're at the container BC, which is event.source.parent, we need to go up again, up to the root container. So we could put another .parent in here, because after all containers are just special components. So, like I said, all components have a parent property. So now .parent.parent has sort of walked us up this hierarchy, and now I need to go down into the correct containers, so now I need to say .getComponent SC and then .getComponent Spinner. So you can see how I walked up the hierarchy and then I walked down two layers into the hierarchy here. So, this can be sometimes kind of cumbersome to do. So as a quick shortcut what you can do instead is you could do something like this. We could have just said, spinnerval equals, hit this button over here. Which what this button does is lets us visually find what we want in our component hierarchy. So here's our spinner and we want its intVal, or sorry we want its modifiedValue and you hit OK. And you can see that it just does all that work for us so that we don get lost as we try to walk up and down the component hierarchy. So this insert property reference button can be real handy to make sure you get the hierarchy correct.

You are editing this transcript.

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