Parameterized Popup Window


Learn how to create parameterized popup windows that can be re-used for multiple objects depending on the values that were passed in.

Video recorded using: Ignition 8.1


(open in window)

[00:00] In this lesson, we'll go over passing parameters to a pop-up window. Parameterize pop-up windows allow us to create a single window but change its behavior or appearance based on the supplied parameters when it's opened. I have a pop-up window on my project that I want to pass a value to. The first thing I'll need to do is create a custom property on the root container of my pop-up. In order to do this, I can right click the root container, go to Customizers, and click Custom Properties I'll click the plus icon. And that adds a new custom property. I'll give it the name body and change it to a String type. Once you have a custom property on your root container, you can see it in the Property Editor here. If you're going to be passing value to this property, it's important that you don't bind it to anything. We want it to get its values from the opening action and don't want anything else to override it. I want to display this property in my pop-up. So I'll place a label in the window.

[01:11] Now we'll create a property binding on the text value, and bind it to my custom property. Now I want to be able to open my pop-up window. I'll head over to my Main Window and add a Button components to do this. I can open up the Component Scripting window, and I'll use an Open/Swap navigation action. Select my pop-up from the window drop down, and then I can click this checkbox here to be able to pass parameters to the window. I'll click the plus icon. And if I click the parameter name? You'll notice that the custom properties auto-populated in the dropdown. I'll go ahead and select body. Now, I could pass a dynamic parameter here and bind something here.

[02:04] But instead, I'm going to pass a hard-coded value. I'll pass it. Hello world! And then I'll hit OK. Now I want to make another button that passes a different parameter. I can duplicate this Button. And open up its Component Scripting window. I'll change it to Something else! At this point I should have everything I need to open my window and pass different parameters to it. So I'll save and test it in the client. You'll notice that if I click the top Button here, it opens my pop-up and you can see the Hello World! text. If I click the other Button, It opens that same pop-up, but you see Something else! As you can see it's really easy to pass values to the window and have Its behavior or appearance change based on those values.

You are editing this transcript.

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