Transforming symbols using conditions

Developing with design tools > Using the Symbol Editor > Getting started with the Symbol Editor > Transforming symbols using conditions

In the Transforming symbols using parameters section you were shown how to add intelligence to symbols with parameters that represent changes in a real world situation.

A condition triggers an event in a symbol whenever specific criteria are matched. The event provokes the symbol to change its representation to display the parameter change visually, for example, when the object is selected or when a parameter has a specific value. As with parameters, a condition can be bound to multiple objects in a symbol.

The condition workflow

You will use conditions to show a state in the basicprogressbar symbol using a transformation. If progress is below a certain percentage, the progress bar will be displayed in red.

To transform the basicprogressbar symbol:

1. Open the basicprogressbar symbol.

2. Create a new Integer parameter, problem, with a default value of 35.

For more information, see Creating a new parameter.

3. Right-click the progressbar object in the Symbol Outline pane.

4. Select New Condition in the pop-up menu.

The New Condition dialog box opens.

5. Use the lists in the For Symbols Where pane to set the condition to progress is less than or equal to problem.

Setting a new condition

NOTE A name for the condition is generated automatically. You can change this to a personalized name by deselecting Generated Name and typing a new name in the Condition Name field.

6. Click OK.

The new condition is added under the progressbar object in the Symbol Outline pane. The Styling Customizer displays the properties for this object when the condition is met.

7. Click the Paint tab.

8. Click the button to the right of the Fill paint field.

The button to open the Paint Editor

The Paint Editor opens.

9. Select the RGBA tab in the Color tab.

10. Set the color to 255 (Red), 0 (Green), 51 (Blue).

11. Click Apply.

The basicprogressbar symbol now changes color to show changes in progress.

12. Test your symbol using the procedure explained in Testing your symbol to see the transformations.