Button script component

The button component on a script page adds a clickable button to trigger an action. A button can display an alert message, navigate to a different page, set the value of a variable, or trigger a custom action.

    1. Click the Button icon on the component toolbar. 

    2. Change the default label from “Submit” to something that describes the action when clicked.

    3. To set the button action, Click Common in the properties panel. Then select an action from the Click Action list. Assign a previously defined action or create a new one. 

    4. Close the Select Actions list.

    5. Optionally, set the properties of the component.

      Common

      Several components have a Text property that you can change, usually by double-clicking the component in design mode:

      • Button—double-click to rename "Submit" to something else.

      • Radio button or Checkbox—double-click to change "Label" to a more descriptive name.

      • Read-only text—to change the text displayed in a read-only text component, click the component, then type text in the box.

      Selects an action to perform when a button, link, or image is clicked.

      click-action-property-action

      Use the menu to select whether the action opens a URL or an action.

      click-action-menu-choices

      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.

      click-action-property-url

      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.

      click-action-select-no-action

      Sets background or text color to one of the following:

      settings-bg-color-popup2
      • 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. Click Choose to assign the current selection.

        settings-text-color-popup-colors

      • Variable—assigns a color stored in a string variable. For example, to assign dark blue:

        1. Click the Variables tab.

        2. Click + to add a variable.

          Figure shows button that adds a new 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.

          select-color-in-variable

        6. Click Apply.
        7. Assign the variable to this color property.

          mycolor-variable

      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 the root container icon.

        select-root-container

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

        You can create interesting effects by assigning different background colors to other containers.

        additional-colored-containers

      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.

      Setting Description
      settings-sizing-auto-size 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.
      settings-sizing-stretch

      Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.

      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.

      settings-sizing-pixels 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.

      Setting Description
      settings-sizing-auto-size Auto-sizing configures the component to shrink or grow in accordance with its contents.
      settings-sizing-pixels 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.
      settings-sizing-stretch

      Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.

      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.

      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.
      Setting Example
      align-left2 align-left-example2
      align-center2 align-center-example2
      align-right2 align-right-example2
      align-start align-start-example
      align-vertical-center align-vertical-center-example
      align-vertical-end align-vertical-end-example

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

      Image shows relationship between margin, border, and padding settings.

      1. To optionally update all margin values at once, press the Set All button for Margin in the properties panel.

        image of the set all button

      2. Click the value field for a margin. A spin control appears in that field.

      3. Use the spin control to increase or decrease the margin. If Set All was selected, the change is applied to all margins.

        settings-margin-spinner

        The component is immediately repositioned using its new margin setting.

      Sets the visibility of a component based on the value of a Boolean (True or False) variable.

      1. Click the Layout property group. Below Visible, click Select Variable.
      2. Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
      3. 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.

      Appearance

      Several components have a Text property that you can change, usually by double-clicking the component in design mode:

      • Button—double-click to rename "Submit" to something else.

      • Radio button or Checkbox—double-click to change "Label" to a more descriptive name.

      • Read-only text—to change the text displayed in a read-only text component, click the component, then type text in the box.
      .

      Sets background or text color to one of the following:

      settings-bg-color-popup2
      • 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. Click Choose to assign the current selection.

        settings-text-color-popup-colors

      • Variable—assigns a color stored in a string variable. For example, to assign dark blue:

        1. Click the Variables tab.

        2. Click + to add a variable.

          Figure shows button that adds a new 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.

          select-color-in-variable

        6. Click Apply.
        7. Assign the variable to this color property.

          mycolor-variable

      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 the root container icon.

        select-root-container

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

        You can create interesting effects by assigning different background colors to other containers.

        additional-colored-containers

      Advanced

      Selects an action to perform when a button, link, or image is clicked.

      click-action-property-action

      Use the menu to select whether the action opens a URL or an action.

      click-action-menu-choices

      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.

      click-action-property-url

      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.

      click-action-select-no-action

      All components are enabled by default. The Disabled property binds a True/False variable to a component, to disable or enable it based on the runtime value of the variable.

        1. To create a True/False variable, click the Variables tab.

        2. Click + to add a variable.

          Figure shows button that adds a new variable.

        3. Select True/False as the data type.

          Figure shows variable data types

        4. Type a descriptive name in the Name box.

          currently-enabled-variable

        5. Set Default Value to True or False.

          • If the variable is True, the component is disabled.

          • If the variable is False, the component is enabled.

        6. Click Apply to save the variable.
        7. Assign the variable to the Disabled property. Below Disabled, click Select Variable.

          disabled-property-setting

        8. Select the True/False variable.

          currently-enabled-variable-selected

      To test your work, click Preview.