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
LESSON
Component Paths
Description
Learn how to specify object paths to components and reference component methods in a Perspective script.
Video recorded using: Ignition 8.0
Transcript
(open in window)[00:00] When you want to manipulate the property of one component from a script running on a different component, you need to use what's known as component paths. Component paths allow us to trace out a route from my script to the property that we're trying to manipulate so that we can access it in some way. You can see here I have a simple view with some labels, containers and a button. I try to name my containers and labels appropriately but if you look in the Project Browser you can get a better idea as to what my component hierarchy looks like. Now the scripts are on my Button component so I'm going to go ahead and select my Button component and open up the Script Action. Like I said earlier a component path traces a route from my script to the property that I want to manipulate. So we need to have a starting point somewhere. This is why script actions on components have an argument called self which is a reference to the component that's invoking the function. self is typically used as the starting point in any component path and you can see I have done that on a line two of my code: self. Now at this point there are three major functions that we can use to help us build our component path. getSibling, parent and getChild. getSibling allows us to get a component that is on the same level as the component that I'm currently adding my component path. Since my Container Label is in the same level of my component hierarchy as my Button I can simply use the .getSibling and then the name of the component that I want to access, in this case Container Label. Now I'm not quite done with my component path yet. Remember I'm trying to access a property on one of my components. Since properties are grouped into categories I first need to list up a category that I want to access my property from. In this case we can figure out which category our property is in by looking at the Property Editor. Either PROPS, POSITION, CUSTOM or META. I know that my text property of my container label lies in the props category so that is the next part of my component path. Once in the props category, I can then reference my text property so I list out .text to grab that property. Now in this next line of code, I'm trying to access the Root Label component. If you take a look at my component hierarchy we can see that the Root Label component is actually a level above the Button component within my hierarchy. So after calling the self argument I need some way of going up within my component hierarchy. parent like it's name implies goes up one level in the component hierarchy and gives me the component that's parent to the component that I'm currently on. So the parent of my Button component is the Container component so I list out .parent to move to my Container. Container is now a sibling component to my Root Label so I can list out getSibling Root Label to grab my Root Label component and then of course .props.text to grab that text property. The last example that I have here is going down in the hierarchy. I want to try to access the text property on my Inner Container Label but because of lower in the hierarchy I need to use another new function. Again we start out just the same as we have before with a self argument. Next I need to move over to the component that I'm going to drill down into so because my Inner Container Label is within my Inner Container I need to move over to my Inner Container so I call .getSibling Inner Container. getChild like getSibling expects the name of the component we're trying to access. So in this case I can specify .getChild Inner Container Label and that's going to move me down in the hierarchy to my Inner Container Label where I can again list out .props and then .text to grab that text property. To learn more about these and other functions that deal with object reversal and component paths see our user manual on the page Perspective Component Methods.