Image script component

To insert a graphic on a script page, add an image component:

  1. click Image on the component toolbar.
  2. Click the Common properties group.
  3. >From the Image Source list, select one of the following:
  4. To specify the Internet address of an image, select Interpolated Text and enter the URL for the image.
  5. To specify an image from your workspace, select Content Management and specify the workspace and location of the image file you want to use.
    Note: To appear correctly, images must be either public or specifically shared with the agent.
  6. To adjust the image size, expand the Layout property group and then set the Width and Height properties.
  7. To invoke an action when the agent clicks the image, click the Advanced property group. Under Click Action, click No action selected.

Set any other properties of the component. 

Common

Image source specifies the URL where an image is hosted. The URL can be entered manually or assigned by a variable.

Sets background color to one of the following:

Sets background or text color to one of the following:

  • Default—Assigns the default color.
  • Color—Allows you to select from a palette of common colors, or choose your own by entering RGB values or by moving the color picker to a new spectrum position. Setting the color for text and background is a property in the Appearance panel. This property panel is only available for components that have the color functionality.
  • Variable—assigns a color stored in a string variable.
    Variable example: To assign dark blue:
    1. Click the Variables tab.
    2. Click Add Variable to add a variable.
    3. Select String as the type of value the new variable stores.
    4. Type a descriptive name in the Name box.
    5. Set Default Value to 0000FF or #0000FF—which is the hexadecimal code for dark blue.
    6. Click Apply.
    7. Assign the variable to this color property.

    Change the background color of a script page

    To set the background color of an entire page, assign a background color to its root vertical container.

    • In the breadcrumbs bar, click the root container icon.
    • Under Common or Appearance, assign a different Background color.

    To change the background color of a script page

    To set the background color of an entire page, assign a background color to its root vertical container.

    1. In the breadcrumbs bar, click Root Container .

       

    2. Under Common or Appearance, assign a different Background color.

       

Layout

Configures width to a fixed size, to grow as needed to display content, or to consume as much space as possible relative to other components, using weighting to influence size adjustments.

  • Auto-sizing configures the component to shrink or grow in accordance with its contents. For example, the width of a label can grow depending up on how much text it contains.
  • Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.
    Note: If two components are both set to stretch, they are both allocated 50% of the remaining space by default. This proportion can be adjusted by changing the weight value. For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.
  • px sets a fixed size in pixels. You can type an integer value into the box, or use up or down arrows to increment or decrement size. These arrows are visible when the component has focus.

Configures height to a fixed size, to grow as needed to display content, or to consume as much space as possible relative to other components, using weighting to influence size adjustments.

  • Auto-sizing configures the component to shrink or grow in accordance with its contents. For example, the width of a label can grow depending up on how much text it contains.
  • Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.
    Note: If two components are both set to stretch, they are both allocated 50% of the remaining space by default. This proportion can be adjusted by changing the weight value. For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.
  • px sets a fixed size in pixels. You can type an integer value into the box, or use up or down arrows to increment or decrement size. These arrows are visible when the component has focus.

Aligns a component to the left, right, or center, relative to its parent container.

Tip: A component cannot be vertically aligned to center if the Height setting of its parent container is Auto Sizing. To correct this, set the parent container's Height to Stretch or to a fixed height in Pixels.

Margins set left, right, top, and bottom spacing around a border.

  1. Click the value field for a margin. A spin control appears in that field.
  2. Use the spin control to increase or decrease the margin. 
  3. To update all margin values at once, click the Set All button for Margin in the properties panel.

The Visible property sets the visibility of a component based on the value of a Boolean (True or False) variable or an expression.

To set the Visible property based on a variable:

  1. Click the Layout property group.
  2. Under Visible, click Select Variable.
  3. Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
  4. At runtime, the component is visible when the value of the variable is True. Conversely it is hidden when the variable's value is False.

To set the Visible property based on an expression:

  1. Click the Layout property group.
  2. Under Visible, select True/False Expression.
  3. In the Insert Variable box, enter an expression .

At runtime, the component is visible when the expression is True. The component is hidden when the expression is False.

Appearance

Sets background color to one of the following:

Sets background or text color to one of the following:

  • Default—Assigns the default color.
  • Color—Allows you to select from a palette of common colors, or choose your own by entering RGB values or by moving the color picker to a new spectrum position. Setting the color for text and background is a property in the Appearance panel. This property panel is only available for components that have the color functionality.
  • Variable—assigns a color stored in a string variable.
    Variable example: To assign dark blue:
    1. Click the Variables tab.
    2. Click Add Variable to add a variable.
    3. Select String as the type of value the new variable stores.
    4. Type a descriptive name in the Name box.
    5. Set Default Value to 0000FF or #0000FF—which is the hexadecimal code for dark blue.
    6. Click Apply.
    7. Assign the variable to this color property.

    Change the background color of a script page

    To set the background color of an entire page, assign a background color to its root vertical container.

    • In the breadcrumbs bar, click the root container icon.
    • Under Common or Appearance, assign a different Background color.

    To change the background color of a script page

    To set the background color of an entire page, assign a background color to its root vertical container.

    1. In the breadcrumbs bar, click Root Container .

       

    2. Under Common or Appearance, assign a different Background color.

       

Advanced

Image source specifies the URL where an image is hosted. The URL can be entered manually or assigned by a variable.

The Click Action property allows you to select an action to perform when a button, link, or image is clicked.

Use the menu to select whether the action opens a URL or performs another type of Action.

  • If you select URL, you are prompted to type a URL or to select a string variable that contains a URL. The URL can use HTTP or HTTPS protocol.
  • If you choose Action, you are prompted to select a scripter action, outbound action, or custom action. You may also select No Action to unassign a previously selected action.