User Manual

Advanced functionality
Show/Hide a graphic component based on data point status
7
A6V11604297_en--_e
179 | 196
7.2 Show/Hide a graphic component based on data point status
1. Add a graphic component to the graphic.
2. Drag-and-drop the data point to bind it to the graphic component.
3. Select the graphic component and click .
4. In the ADD TAGS dialog box, enter a name for the program that will run, for example, alarmIcon.
5. Click .
6. Open the PROGRAMS pane and click to add a new program.
7. In the PROGRAM TARGET FILTER field, enter the name of the tag for the graphic component. (In this
case, alarmIcon.)
8. Paste the following program code for boolean logic into the PROGRAM EDITOR and click SAVE.
if(point.curVal === false) {
this.style.display = "none";
}
else {
this.style.display = "";
}
Adding a variable to the program
1. Click in the upper right corner of the PROGRAM EDITOR dialog box and select VARIABLES .
 The PROGRAM VARS pane opens.
2. Create a new virtual point that is named point with a filter tag of id==$virtualPointRef.
3. Set the Invokes the Function? toggle switch to ON.
4. From the SELECT EVENT drop-down list, select TAG CHANGE and type curVal in the field.
 The variable looks at the data point that is bound to the graphic component and changes based on
curVal.
5. Click SAVE to close the PROGRAM EDITOR dialog box.