Custom Properties

You can add your own custom properties to the basic component properties in Ignition. Think of these custom properties as your own variables in the window. The custom properties are extremely useful as they let you turn a "plain" component into one customized for your particular use.

Ignition provides a number of Customizers to configure components in ways that are too complex or cumbersome for basic properties. In this page, the Customizers > Custom Properties and the Customizers > Styles Customizer are described. These two Customizers are used repeatedly for many different components. But there are other Customizers that are unique for a specific component, such as the Easy Chart Customizer.

Expert Tip

Often, a Customizer is really just a user-friendly user interface to one or more expert properties. For example, all the Easy Chart Customizer really does, is to modify the contents of the pens, tagPens, calcPens, axes, and subplots Dataset properties. Knowing this is very powerful, because this means you can also use Property Bindings and scripting to modify the values of these expert properties at runtime, giving you the ability to dynamically perform complex manipulations of components.

To add a custom property, right-click on the component and choose the Customizer menu, or use the Customizer split-button ( images/download/attachments/1704229/customizer.PNG ) icon in the Vision main toolbar.

Root Container Custom Properties

Properties on the window's Root Container are special in that they double as a window's parameters. For more information, see Parameterized Popup Windows.

Configuring Custom Properties

You can use the custom properties like any other properties - with data binding, scripting, styles, and so on.

To configure the custom property

  1. Right-click on a component and go to Customizer > Custom Properties.
    The Custom Properties window is displayed.

  2. Click the green + icon to add text boxes to the table.

  3. Add a Name, Type, and Description for each custom property you want to add.

  4. Click OK.
    Notice the custom properties you added are displayed in the Property Editor in blue.

Configuring the Style Customizer

Many components support the Style Customizer which lets you define a set of visual styles that change based on a single Driving Property. Typically, you'll have a property (often a custom property) on your component that you want to use as a driving property, usually a discrete state, and you have multiple visual properties, like the font, border, foreground color, visibility, and so on that you want to change based on that one driving property. Style Customizer lets you define these relationships all at once, and lets you preview them too!

To configure the style using the Style Customizer

  1. Right-click on a component and go to Customizer > Style Customizer.
    The Style of Component window is displayed.

  2. Choose a Driving Property.
    This is the property whose value will determine the current style.

  3. Choose one or more Styled Properties.
    These are the properties that will change as the style changes.

  4. Add the values of the driving property that define the styles.
    For example, 0=off, 1=hand, 2=auto.

  5. Customize the values of the styled properties for each style.

Example 1

Lets say that you have a Level Indicator component that is displaying the level in a tank. Lets say that you want to have its appearance change based on the alarm state of the tank's temperature. You can add an integer custom property, call it Severity, to the level indicator that you'll bind to the tank temperature tag's AlertCurrentSeverity property.

Now go to the Style customizer. Choose your Severity property as the driving property, and the Border and Filled Color properties as the styled properties. Add states for -1 (not in alarm), 2 (Medium alarm) and 4 (High alarm). Leave the -1 state alone. Use a red border for state 2 and an orange fill color. For state 4, you can animate it to get a flashing effect. Add two animation frames and set their delay to 500ms each. Configure the frames differently from each other so that you can get a flashing effect. Click OK and notice that the styled properties you chose are now bold and have the styles indicator ( images/download/attachments/1704229/StyleIndicator.PNG ) next to them. This is to help remind you that those properties are being driven, so if you change their values directly, you changes will be overwritten.

Example 2

Let's look at another example that will use the Custom Properties and the Styles feature together. Take the lowly Label component. It seems pretty plain at first - it just displays a String. Of course, you can use its foreground color, background color, and border to make it look interesting. Add an integer custom property on it and name it state, and bind that property to a discrete state tag coming out of a PLC. Now use the state property to drive its Styles configuration to make the component look different and display different things based on the state being 0, 1, or 2 (maybe for a Hand/Off/Auto indicator).

We could have used the Multi-State Indicator component from the very beginning, but understanding this example will let you create your own types of components by combining the existing components in creative ways.