Previous Topic

Next Topic

Book Contents

Book Index

Form Editor Toolbar

Use the Form Editor toolbar to quickly access common commands for formatting the appearance and behaviors of a Form and its Form Controls. The toolbar is made up of three smaller toolbars:

  1. Formatting toolbar: Displays options for formatting Form Control text/label (font, style, size, and alignment), colors/styles (foreground, background, and border), and behaviors (visibility, anchoring, and image). Also displays options for accessing a Form background color.
  2. Label toolbar: Displays options for defining Form Control labels and wrapping.
  3. Layout toolbar: Displays options for aligning and placing Form Controls.

    Form Editor Toolbar

Good to know:

Formatting Toolbar (Text, Color/Style, and Behaviors)

Form Editor Formatting Toolbar

Button

Action

Description

Form Control Text/Label

Theme Font Control

Font

There are two different font modes for Form Control text:

  • Theme Font: Uses the default Theme Control font.
  • Explicit Font: Allows you to set an explicit font and other font details on a Control-by-Control basis.

To switch to Theme mode, select Theme Font from the top of the list.

To switch to Explicit mode, select a font in the drop-down.

Font Size Button

Font Size

Explicitly sets the Form Control font size (ex: 10 points).

Note: This option is available only when using Explicit Font mode.

Format Text Buttons

Font Style (Bold, Underline, Italic)

Adds style to the Form Control font (bold, underlined, or italics).

Note: This option is available only when using Explicit Font mode.

Horizontally Align Text Button

Horizontally Align Text

Aligns text left, center, or right on a horizontal axis within the Form Control bounding box.

Vertically Align Text Button

Vertically Align Text

Aligns text top, middle, or bottom on a vertical axis within the Form Control bounding box.

Click the drop-down arrow to select the alignment option.

Control Color/Style

Background Color Button

Background color

Sets the background color of the Form Control.

Click the button to use the most recently used color (assuming you have set a color). To explicitly select a color, click the drop-down arrow to select a solid color or a gradient. You can use an Expression to conditionally change the color.

Foreground Color Button

Foreground color

Sets the text color for the Form Control.

Click the button to use the most recently used color (assuming you have set a color). To explicitly select a color, click the drop-down arrow to select a single color or a gradient. You can use an Expression to conditionally change the color.

Border Color Button

Border color

Sets the color of the border around the Form Control, if there is a border.

Click the button to use the most recently used color (assuming you have set a color). To explicitly select a color, click the drop-down arrow to select a single color or a gradient. You can use an Expression to conditionally change the color.

Border Style Button

Border style

Sets the style of the border around the Form Control (No Border, 3D, or Pixel width), if there is a border.

Click the button to use the most recently set style (assuming you have set a style). To explicitly select a style, click the drop-down arrow to select a style.

Note: While you can select 3D borders for any Form Control, rounded Shapes do not allow 3D settings.

Control Behavior

Control Visibility Button

Visibility

Conditionally controls when the Form Control appears and disappears. The visibility is based on an Expression.

Click the drop-down button define a custom Expression. Click the drop-down arrow to access options for creating a custom Expression, selecting a stored Expression, or clearing the Expression.

Diable Button

Disable

Conditionally controls when the Form Control is available. The visibility is based on an Expression.

Click the drop-down button define a custom Expression. Click the drop-down arrow to access options for creating a custom Expression, selecting a stored Expression, or clearing the Expression.

 

Anchoring Button

Anchoring

Sets the anchoring behavior of the Form Control.

Click the button to use the most recently set anchoring options (assuming you have set an option). To explicitly select an anchoring option, click the drop-down arrow next to the button to open the Anchoring window, and then select an anchoring option.

Set Control Image Button

Image

Defines the image to display on the Form Control, as well as alignment.

Click the button to open the Image Manager, and then select an image to show on the Form Control. Click the drop-down arrow to access options for creating a custom Expression, selecting a stored Expression, clearing the Expression, or aligning the image.

Form Background Color

Dashboard Background Color Button

Form Background Color

Sets the Form background color.

Click the button to use the most recently set color (assuming you have set a color). To explicitly select a color, click the drop-down arrow to select a single color or a gradient. Use an Expression to conditionally change the color.

Label Toolbar (Label Text, Wrap, Style, and Gloss)

Form Editor Label Toolbar

Button

Action

Description

Text Control

Label Text Box

Defines the text/label that appears on the currently selected Form Control.

Type the text into the Label text box.

Note: This value only affects the primary selected Form Control.

Text Expression Button

Expression

Conditionally defines the text that appears on the currently selected Form Control. You can use either:

  • Expression Manager: Select this option to open the Expression Manager, and then select an existing stored Expression or create a new stored Expression. Stored Expressions can be reused in numerous places in CSM.
  • Custom Expression: Select this option to open the Custom Expression Builder, and then create a custom Expression to use only for the active scenario.

Tooltip Button

Tooltip

Defines the tooltip that appears when a User hovers over the Form Control.

Layout Toolbar (Alignment, Size, and Order)

Dashboard Editor Layout Toolbar

For most of the alignment operations, you must select at least two Form Controls. The last selected Control is the controlling Control, and the Control against which all other selected Controls are sized and aligned. The controlling Control is identified by black boxes. All other selected Controls are identified by white boxes.

Button

Action

Description

Horizontal Alignment Buttons

Line up horizontally

Lines up all the selected Form Controls against the left, center, or right edge of the controlling Form Control.

Vertical Alignment Buttons

Line up vertically

Lines up all the selected Form Controls against the top, middle, or bottom edge of the controlling Form Control.

Make Same Width Button Make Same Height Button Make Same Size Button

Sizing

Sizes all the selected Form Controls to be the same width, the same height, or both the same height and same width as the controlling Form Control.

Auto-Size Button

Auto-size

Sizes a text Form Control to be exactly the right size to hold all its contained text. Sizes an image to be its original size.

Bring To Front Button

Bring to Front

 

Moves a Form Control in front of other Form Controls. Use this if creating various layering effects.

Note: Not all Form Controls are allowed to be in front or behind all other Form Controls (ex: Most shapes cannot be on top of most fields).

Send To Back Button

Send to Back

Moves a Form Control behind other Form Controls. Use this if you are creating various layering effects.

Note: Not all Form Controls are allowed to be in front of or behind all other Controls (ex: Most Shapes cannot be on top of most fields).

See Also

Form Editor

Form Menu Bar Item

Form Editor Behaviors