A.8 Applying a Graphic to a Class

A.8.1 Changing the Class Node Style to a Custom Graphic

The following section of the example changes the node style of a class to a custom graphic and tests the element class | graphic switch.

To change a class node style to a custom graphic:

  1. In the Explorer pane, under Metamodel > Classes, select the CustomRendering custom class.

  2. On the console toolbar, switch to the Element Graphic drawing channel.

  3. Add the following drawing elements to the drawing:

    1. Draw an ellipse in the same location as the illustration below.

      It might be necessary to pan the drawing to see the red axes, because they initially display in the upper left-hand corner. Notice that the origin of the ellipse is relative to the red axes that represent the (0,0) coordinate origin of the drawing.

    2. Bind the ellipse’s fill color to element condition. The ellipse’s fill changes to green.

    3. Add a label named CLASS GRAPHIC inside the ellipse.

    4. Add a label beneath the ellipse and bind that label to the Element Name option.

  4. Save the drawing.

  5. Return to the RenderingTesting element and verify that all element instances of the CustomRendering custom class now use the CustomRendering custom drawing graphic.

    This feature allows the user to control custom graphics from the class level.

    The drawing should resemble the following:

  6. Refresh the Operations Center dashboard page and verify the same view displays.

A.8.2 Applying a Node Style at the Element Instance Level

The following example applies a node style at the element instance level and tests the element | node style switch.

To apply a node style at the element instance level:

  1. In the Explorer pane, select the element RenderingTesting > CustomChild1.

  2. Switch to the Element Node Style drawing channel.

  3. In the Explorer pane, under Administration > Graphics > Node Styles, drag and drop the RenderingTestElement node style to the Layout view.

    This should set the node style to RenderingTestElement for the CustomChild1 element class.

  4. Return to the RenderingTesting view and verify that all copies of the CustomChild1 element now use the RenderingTestElement node style.

    This allows you to control node styles from the element instance level. In every drawing where this element appears, this graphic is used, unless it is overridden by a higher priority rendering.

    The drawing should resemble the following:

  5. Refresh the Operations Center dashboard page and verify the same view displays.

A.8.3 Applying a Graphic at the Element Instance Level

The following section of the example applies a graphic at the element instance level and test the element | graphic switch.

To apply a graphic at the element instance level:

  1. In the Explorer pane, select the RenderingTest > CustomChild1 element.

  2. Switch to the Element Graphic drawing channel.

  3. Edit the drawing using the following steps:

    1. Draw a rectangle in the same location as the following:

      It might be necessary to pan the drawing to see the red axes as they initially display in the upper left-hand corner. Notice how the origin of the rectangle is relative to the red axes that represent the (0,0) coordinate origin of the drawing.

    2. Bind the rectangle’s fill color to element condition.

    3. Add a label named ELEMENT GRAPHIC inside the rectangle.

    4. Add a label beneath the rectangle and bind that label to the Element Name option.

  4. Save the drawing.

  5. Return to the RenderingTesting view.

  6. Verify that all copies of the CustomChild1 element now use the CustomChild1 custom graphic.

    This allows you to control graphics from the element instance level. In every drawing where this element appears, this graphic is used, unless it is overridden by a higher priority rendering.

    The drawing should resemble the following:

  7. Refresh the Operations Center dashboard and verify the same view displays.

A.8.4 Overriding a Single Element Node Style

The following section of the example overrides the node style for a single element and tests the bind | override switch.

To override the node style for a single element:

  1. In the Explorer pane, select the RenderingTesting element.

  2. On console toolbar, verify the Drawing channel is selected.

  3. In the Explorer pane, under Administration > Graphics > Node Styles, drag and drop the RenderingTestOverride node style to the CustomChild1 element in the Layout view.

    The CustomChild1 element is part of the nested tree layout.

  4. Select This Node Only from the pop‑up menu.

    The node style changes to RenderingTestOverride for only one copy of CustomChild1. This override setting only applies to the binding that caused the element to display in the drawing. The other copy of CustomChild1 still uses the custom element graphic set in the previous section.

    The drawing should resemble the following:

  5. Save the drawing.

  6. Refresh the Operations Center dashboard page and verify the same view displays.

  7. While still viewing the RenderingTesting element, drag and drop the RenderingTestOverride node style to the orphaned CustomChild1 element in the layout that is not part of the nested tree layout.

  8. Select This Node Only from the pop‑up menu.

    This should set the node style to RenderingTestOverride for only this copy of the CustomChild1 element in this drawing.

    The drawing should resemble the following:

    Now, each copy of the CustomChild1 element has its own override rendering.

  9. Save the drawing.

  10. Refresh the associated portal and verify the same view displays.

A.8.5 Clearing Previously Set Node Styles and Graphics

The following sections cover how to clear the various types of node styles and graphic switches.

NOTE:There is currently no option in the Operations Center console for clearing the Ambient setting or the binding|specify setting. These settings can be cleared by directly editing the SVG source, which is explained in Section C.0, Editing the Source SVG Code.

Clearing the Bind | Override Switch

To clear the bind | override switch:

  1. In the Explorer pane, select the RenderingTesting element.

  2. On the console toolbar, verify the Drawing channel is selected.

  3. Switch to Edit mode.

  4. Right-click the orphaned CustomChild1 element in the layout that is not part of the nested tree layout.

  5. Select Remove Node Style Override from the menu, then click Yes to remove the override.

  6. Verify that the override is removed from only this copy of CustomChild1.

    The drawing should resemble the following:

    There might be a short delay before the old rendering is cleared from the graphics cache.

  7. Save the drawing.

  8. Refresh the Operations Center dashboard page and verify the same view displays.

  9. Switch to Edit mode and right-click the CustomChild1 element that is part of the nested tree layout.

  10. Select Remove Node Style Override from the menu, then click Yes to remove the override.

  11. Verify that the override is removed from only this copy of CustomChild1.

    There might be a short delay before the old rendering has been cleared from the graphics cache.

    The drawing should resemble the following:

  12. Save the drawing.

  13. Refresh the Operations Center dashboard page and verify the same view displays.

Clearing the Element | Graphic Switch

To clear the element | graphic switch:

  1. In the Explorer pane, select the CustomChild1 element.

  2. On the console toolbar, switch to the Element Graphic drawing channel.

  3. Right-click the background, then select Clear Element Graphic.

  4. Click Yes to accept.

  5. Verify that the Element Graphic drawing channel is cleared.

  6. Return to the RenderingTesting view.

    All copies of the CustomChild1 element have reverted to the CustomChild1 element instance node style.

    There could be a short delay before the old rendering is cleared from the graphics cache.

    The resulting drawing should resemble the following:

  7. Refresh the Operations Center dashboard and verify the same view displays.

Clearing the Element | Node Style Switch

To clear the element | node style switch:

  1. In the Explorer pane, select the CustomChild1 element.

  2. On the console toolbar, switch to the Element Nodestyle drawing channel.

  3. Click Clear in the upper right-hand corner of the view.

  4. Verify the node style clears and the text in the center changes to none.

  5. Return to the RenderingTesting view and verify all copies of the CustomChild1 element have reverted to their class definition’s custom graphic (defined for the CustomRendering custom class).

    There could be a short delay before the old rendering is cleared from the graphics cache.

    The resulting drawing should resemble the following:

  6. Refresh the associated portal and verify the same view displays.

Clearing the Element Class | Graphic Switch

To clear the element class | graphic switch:

  1. In the Explorer pane, expand Administration > Metamodel > Classes > the CustomRendering custom class.

  2. On the console toolbar, switch to the Element Graphic drawing channel.

  3. Right-click the drawing, then select Clear Element Graphic.

  4. Click Yes to accept.

  5. Verify that the Element Graphic drawing channel is cleared.

  6. Return to the RenderingTesting Layout view and verify that all copies of the CustomChild1 element have reverted to their CustomRendering class definition’s node style.

    There can be a short delay before the old rendering is cleared from the graphics cache.

    The resulting drawing is shown in the following:

  7. Refresh the associated portal and verify the same view displays.

Clearing the Element Class | Node Style Switch

To clear the element class | node style switch:

  1. In the Explorer pane, select the CustomRendering class.

  2. On the console toolbar, switch to the Element Nodestyle drawing channel.

  3. Click Clear in the upper right-hand corner of the view.

  4. Verify the node style clears and the text in the center changes to none.

  5. Return to the RenderingTesting view and verify that all copies of the CustomChild1 element have reverted to the SPECIFY node style.

    At this point the Ambient node style is using the RenderingTestSpecify node style and the binding node style is also set to RenderingTestSpecify.

    There could be a short delay before the old rendering is cleared from the graphics cache.

    The resulting drawing should resemble the following:

  6. Refresh the associated portal and verify the same view displays.