Version:

This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.

Supplemental Videos

LESSON

Input and Output Parameters

Description

Learn how View Parameters can be set to act as an input, output, or both.

Video recorded using: Ignition 8.1

Transcript

(open in window)

[00:00] In this lesson, we'll be exploring a critical feature behind nesting views in Perspective, which is parameter passing. Parameters come into play when we want the nested view to be dynamic in some way, or we want the outer view to respond to changes that are made inside the nested view. They can also come into play on some specialized components, like the table and dashboard components in specific situations. To walk through an example of parameter passing, I have some sine data set up here just pointing to the sine tags that I have in my tag browser. I have a chart at the top and I have a drop down that I'm using to change which sine tag I'm seeing data for. Now, one of the things I have underneath here is a nested view that's just showing data for sine zero. And for this lesson, I'd like to make that view show me data for the sine tag I have selected in the drop down. So to do that, I'm going to need to pass a parameter into that embedded view. To get started, I'll open up that view, which is called sine value, from my project browser. And then when it comes up, I'm going to find a particular section in the property editor, this params section in the bottom right.

[01:05] In a way, any properties we can figure in this section will be shared both inside and outside the view. So in my case, if I want to show data for a dynamic sine pen, I'm going to want my components to look at a different tag based on that parameter. There are a few different ways to do this, but simplest might be to use tag name here as a parameter. And for the value field on here, I can set a default value, meaning a value if the view isn't passed to parameter when it's embedded, so something like sine zero here would do just fine. To the right of our parameter configuration is a little arrow icon, which is very important when working with parameters. This, generally speaking, controls where the parameter can be controlled from and where it's value is meant only to be viewed. In its current configuration, we've declared tag name as an input parameter, meaning that we're expecting the value to come from outside the view and used inside. This has a few different ramifications. For instance, clicking the chain link icon here will bring up an error message indicating that we can not configure bindings on input parameters. [02:06]

[03:09] So now that we have our parameters, our only remaining job is to link everything up appropriately. Let's start by incorporating that tag name parameter to make things dynamic in here. And for that, we'll have a few bindings inside here that we need to set up, one on the label and one on the LED display, to make these fields dynamic, based on that parameter. Let's start with the label. So I'll go ahead and select that label on the left-hand side and find the chain link icon next to text in order to make the text dynamic. And this will just be a simple property binding and I'll bind this back to view, params, tag name, just pulling the parameters value right onto this label, and then I'll click okay. Next is the LED display. So I'll select that, and then we actually already have a binding set up here. It just happens to only be pointing at sine zero. So I'll need to make a dynamic tag binding, or in other words, an indirect tag binding. So I'll go in and find my tag binding, and here I can just change the radio button to indirect. That'll actually copy over the path from the direct tag binding, which is just a path to the sine zero tag.

[04:11] If I needed to make this binding from scratch, I would just pull this path in from the tag icon on the right-hand side. But since I don't, I'll proceed by removing the part of this path that needs to be dynamic, and then I'll use the property icon with my cursor right in that spot to pull in view, params, tag name again. And so with that path set up as dynamic, our parameter can control the tag this component is pointing at for its value. So now that I'm done, I'll click okay. Finally, I want to pull the value of my toggle switch onto my is active output parameter. To do this I'm going to set up a binding on the parameter itself. So I'll need to start by selecting the view in the project browser, then finding that params section again, and clicking that chain link icon next to is active, and then this will be a property binding. So I use the property icon on the right to find view, root, toggle switch, props, selective. And I'll pull that in and click okay at the bottom.

[05:10] So now that we have our parameters set up and our view is set up to use them, we just need to go out to the instance of this view in my sine data view. Here we still have a job to do, which is to take the value off of our drop down and pass that into the view on that parameter. And so here, we're still seeing data for sine zero, but it's just because the default value on the parameter is set up to show sine zero. To get our view working here, I'll select it and then find the params section here. Inside this object we'll see the is active parameter set up already because of the binding we configured inside the view. But we'll need to configure another parameter for the other field. So I'll click the plus icon and select a type of value. And then it's very important that the name matches up exactly here, otherwise we won't be catching the right parameter on the other end. So my name should be tag name. And then I'll conclude by pulling the value of this parameter from my drop down. So I'll be clicking the chain link icon here and selecting a property binding, and then using the property icon on the right-hand side to pull in view, root, drop down, props, value.

[06:17] So now whatever the user selects will be pulled up. And then as a fun surprise, I've set up a label in my view that will become visible when that toggle switch is set to true. And it's already hooked up correctly, so if I select the label, which is invisible, we can go into the visible binding and see what I've set up in there. It's basically just a property reference wrapped in an expression that will prevent it from throwing confusing errors if the parameter doesn't exist. So I'll click okay and test it out. If I go into preview mode here and select, say, sine four in the dropdown, we can see that we get sine four's data showing in the nested view. We'll also see that if I flip the toggle switch inside the view, the little label I've set up outside the view responds to that change. So, that concludes our basic coverage of view parameters. They're a convenient way of passing data into and out of a view, depending on your needs.

You are editing this transcript.

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