5.2 Dynamically Transforming Text, Shapes and Lines with Element Properties

When any drawing component (such as a shape or line) has been linked to an element, it can be dynamically updated based on condition, an element attribute, or by using NOC Script.

For example, bind the element condition color to the shape fill color or line fill color. A red square representing a network helps quickly identify a CRITICAL network problem in a drawing.

You can easily configure the following:

Typically, the bind is performed by creating the shape, then dragging and dropping an element to the shape. By default, the element’s condition is bound to the shape’s fill color.

IMPORTANT:Binding an adapter element (listed under Administration > Adapters) has unexpected results and is unsupported. The result of dragging and dropping an adapter element to a Layout view shape is that a duplicate adapter element with UNKNOWN status displays in the Explorer pane.

Keep in mind that the drawing itself remains bound to the element currently selected in the hierarchy (Explorer pane)—the drawing “owner.” Initially, element binding is inherited throughout the drawing. All children inherit the drawing owner’s DName information. This inheritance is changed when you use the Bind feature described in the following subsections to bind a different element to a child in the drawing.

5.2.1 Creating an Element Name Heading

You can add a text label that is bound to element name, DName, or element property attribute. Whenever the element changes, the content automatically updates based the newly associated element.

This feature is especially useful when creating node styles or templates that may be applied to multiple drawings.

IMPORTANT:Deleting elements that are bound to a graphic in the Layout view will remove the ability to update with the element’s state, property, and so on. However, the graphic remains in the drawing and if the element is restored, the graphic reanimates and the binding is restored. Otherwise, drop another element on the graphic to bind it.

To add a dynamically updated text label or heading:

  1. Create placeholder text:

    1. Click (Add Text) and click inside the drawing, then enter placeholder text.

      Text Label in Layout View Drawing
    2. Edit the Properties and Text palette panes to change the color or font attributes.

  2. Bind the text to the name, DName, or attribute of the current element:

    1. Select the text object.

    2. In the Palette, select one of the options under Content Binding:

      • Use Element Name: Displays the element’s name.

      • Use Element DName: Display the element’s distinguished name.

      • Use Element Attribute: Enter the attribute to display, then click Set.

        The list of valid attributes displays on the element’s Properties page: Element, Last Reported, Condition, and so on.

      The following illustrates binding the text with Element Name. The text automatically updates with the element’s name.

5.2.2 Changing the Associated Element

To bind a drawing component to a different Operations Center element:

  1. In the Element pane, click Set in the Element section:

    This opens the Browse for Element dialog box.

  2. Select the element, then click OK.

    The Element pane updates to display the selected element in the Element section, and the drawing component is linked to the newly selected element.

To remove the binding from the drawing component:

  1. In the Element section of the Element pane, click Clear:

    A dialog box displays asking you to confirm removing the binding.

  2. Click Yes.

    The drawing component is no longer bound to the element. However, keep in mind the drawing remains linked to the current element in the Explorer pane.

5.2.3 Dynamically Updating a Shape’s Color based on Element Condition

After binding an element to a drawing component, decide whether to use the element’s condition color to shade the drawing shape. Use this feature to have the drawing shape’s color change automatically whenever the element condition changes.

There could be situations when you want to define the element condition color used to shade bound drawing components. For example, if an element condition is CRITICAL, MAJOR, or MINOR, the drawing component (such as a square) should be red. If the element is in any other condition, the square should be green, as if it were in the OK state.

Another application of this feature is to define a custom color for the default or set condition. For example, use a custom magenta color when the condition is MAJOR or MINOR.

  1. Associate the shape or line to the desired element by dragging any element from the Explorer pane and dropping it on the shape. By default, the drawing shape’s fill color is linked to the element condition.

    Layout View

    In the above illustrations, dragging and dropping the Billing element to the circle binds the element condition, which currently is CRITICAL (red), to the circle fill color. In the Element property pane, Use Element Condition for Fill is selected by default.

  2. In the Element pane, select one or both of the following check boxes:

    • Use Element Condition for Line

    • Use Element Condition for Fill

    The drawing component colors update to match the element condition.

    Note: If an adapter shuts down and any of its element conditions are bound as fill colors to drawing shapes, these shapes change to the UNKNOWN state. No tooltips are available while the adapter is down.

  3. To customize the condition color:

    1. Click the Custom check box next to Use Element Condition for Line or for Fill.

    2. Select CRITICAL from the Set drop-down list, then click the red, orange, and yellow squares next to When:

      If the linked element is in the CRITICAL, MAJOR, or MINOR state, the drawing component is shaded red, as though it were CRITICAL.

    3. Select OK from the Default drop-down list.

      If the linked element is in any other state, the drawing component is shaded green, as though it were OK.

  4. To define a custom condition color:

    1. Select the Custom check box next to Use Element Condition for Line or for Fill.

    2. Select <custom> from the Set drop-down list.

    3. Click the color block to the right to display the custom color palette:

    4. Define the custom color, then select it.

    5. Click the orange (MAJOR) and yellow (MINOR) squares.

      If the element condition is either MAJOR or MINOR, the bound drawing component is shaded using the custom color (in this example, magenta).

    6. In the Default drop-down list, select a condition to use when the element is in any other state except MAJOR or MINOR.

      In this example, the drawing component is shaded green (OK) if it is in any state except MAJOR or MINOR:

5.2.4 Hiding and Showing Elements Based on Condition

The Visibility Binding feature specifies the element conditions that determine whether elements are displayed or hidden in the Layout view. By default, all conditions are displayed.

Elements can be hidden only in drawings that are in the View mode (read only).

To hide elements with one or more conditions:

  1. In the Visibility Bindings section of the Element pane, click one or more condition Color buttons to hide all elements that have the conditions when the drawing is in View mode (read only).

    The Color button appearance changes when it is hidden.

    In Edit mode, all hidden elements display:

5.2.5 Coding Custom Behavior

NOC Script can be used to customize the behavior for drawing component colors or any additional behaviors as can be imagined. Use any of the options as outlined in the following table, then enter your custom NOC Script.

Shape Attribute

Right-click menu option:

Fill, Solid Color

Customize > Add Binding > Fill.

Fill, Gradient Color

Customize > Add Binding > Condition Gradient > Fill.

Stroke, Solid Color

Customize > Add Binding > Stroke.

Stroke, Gradient Color

Customize > Add Binding > Condition Gradient > Stroke.

Stoke Width

Customize > Add Binding > Stroke-Width.


Customize > Add Binding > Opacity.

Opacity configurations require the use of a custom NOCscript or a direct edit of the SVG source. For an example, see Shape Transparency Based on Element Property Value.

Custom Effect

Customize > Add Binding > Script.