Add an Image Control to a Form

Use the Form Editor (accessed from within a Blueprint in CSM Administrator) to add an Image control to a form.

Good to Know:

  • An Image control is highly configurable; you can add one or many to a form, then define the Action to execute when the image is selected, and how the image looks and behaves on the form (example: Tooltip, size, color, border style, image, alignment, anchoring, layering, visibility, and enabling/disabling).
  • Image controls do not support text, background, or foreground; therefore no colors, styles, or fonts can be applied.
  • Images can be conditional (expression-driven).
  • See Form Editor Behaviors for tips on working with controls and the Form Editor.

To add an Image control to a form:

  1. Open a form in the Form Editor.
  2. Drag-and-drop the Image control from the Control tree onto the form.
  3. Define the Action to execute when the image is selected:
    1. Right-click the Image control, and then select Control Properties.
    2. In the Choose Action window, select the ellipsis Ellipses Button to open the Action Manager, then select the Action to execute.
  4. Define the image to display:
    • On the Form Editor toolbar, select the drop-down arrow on the Image button Control Image Button, and then select one of the following options:
      • Browse: Opens the Image Manager, where you can select an existing image or import a new image to display on the widget.
      • From Stored Value: Opens the Stored Value Manager, where you can select an existing stored value or create a new Stored Value to use.
      • Custom Expression: Opens the Custom Expression Builder, where you can create a custom expression to use only for this scenario.
      • Expression Manager: Opens the Expression Manager, where you can select an existing expression or create a new stored expression to use. Stored expressions can be reused in numerous places in CSM.
      • None: Does not use an image.
  5. Align the image:
    • Select the drop-down arrow on the Image button, select Image Alignment, and then select an alignment option within the control (example: Top-right).
  6. Define how the Image Control looks and behaves on the Form.
  7. Publish the Blueprint to commit the changes, or save the Blueprint to continue making other changes.