6.7 Stacked Container Example: Toggling Graphics Based on Condition State

In this example, we’ll create a node style that displays a different graphic matching the condition state of an element. When the element’s condition updates, the node will show an appropriate weather graphic overlaid on a condition color-filled background. For example,

OK

MAJOR

CRITICAL

For more information on the clip art and graphics library, see Section 4.0, Working with Clip Art and Graphics. For an additional example, that includes looking at the source code bind language, see and Section C.4, Looking at the Source Code with a Toggling Graphic Node Style Example.

To create a stacked node style:

  1. In the Explorer pane, expand Administration > Graphics > Nodes to display a list of existing node styles.

  2. Right-click Nodes, and select Create Node Style.

  3. Select your new node style and open the Layout view.

  4. Right-click the background of the Layout View, and select New Drawing. All elements are removed leaving the Layout view empty and using Edit Mode.

  5. Right-click the Layout View, and select Customize > Container > Add > Stacked Layout Container. A container displays showing two placeholder elements:

  6. Right-click the container (green rectangle object), and select Change Group.

  7. Add all the graphic files that you would like to display for condition changes.

    1. Open the Graphics tab in the left pane and select the desired category.

    2. Click and drag any of the graphics to anywhere on the background of the Layout view. One by one they are automatically added to the container. The order that you add them is not important.

    3. Click the default shapes or any unwanted objects in the container and delete them.

  8. Associate the graphics to condition levels.

    1. Click to select the clipart object you want to assign.

    2. Open the Palette tab and select the condition states (Visible Conditions settings under Element) that must be present for this object to display. Click to enable or disable conditions. In this example, the sun displays only for OK condition values.

    3. Repeat these steps for each graphic or object in the container.

  9. Right-click the container and select Save Group.

  10. To test the node style, click Set Preview Element and select an element in Elements or Services.

    In this example, we selected an element with a CRITICAL condition. Only the WeatherSevereAlert graphic displays with the condition filled background. As expected, all other graphics are hidden for this state.

    Be sure to test or double-check values for each condition state so that you know the behavior of the node style functions the way you’d like. One way to test is to apply the nodestyle to a branch of your Services hierarchy that has elements representing all condition states.

  11. Switch to View Mode and save the node style.

  12. Later, to make changes to the node style, do the following:

    1. In Edit Mode, right-click the container, and select Change Group.

    2. Make the desired changes.

    3. When you are finished, right-click the container, and select Save Group.

    4. Return to View Mode and save the changes.