Dropdown script component

A dropdown list allows an agent to choose one selection from a list. An inactive dropdown list displays the last selected value or the default value of the variable it is bound to.

1. Click the Dropdown icon in the component toolbar.

2. Expand the Advanced property group.

3. From the Value settings, choose a string variable.

   Note: At run time, this variable stores the agent’s selection.
   

4. To define selections for the agent to select from, under Options click Edit List. The Editing List appears and provides tools for adding, editing, rearranging, or removing list items from a dropdown. 

   

5. Click Add New Item.

   

6. Under Value, type a unique value to store in the variable when this item is selected.

   Tip: Values and labels for drop-down items can include interpolated variables or normal text. For background information, see Use braces to display variable values and Built-in variables.
   
   

7. In Display, type the text that the agent sees as a selection to choose from.

8. Click Add.

9. Repeat steps 4 through 8 to add other items to the list.

10. To reposition items in the list, use the up and down arrows.

11. When you finish, close the list. At run time, the dropdown list displays these choices to the agent. If a value was previously selected, then the value is indicated by a check box.
    

12. To define a dynamic dropdown list for the agent to select from, under Options click the menu and select Variable.
    

13. In the Values List dropdown list, select a variable or create a new variable.
    

14. (Optional) Select an action to invoke when an item is chosen from this dropdown.

15. Click No action selected under Change Action in the component properties. 

16. Set any other properties of this component.
    
    Expand All

    
    Common

    Value

    Value binds a component to the variable selected. For example, if you bind a text input component to a variable, the input box will always display the value of that variable, ignoring any placeholder text specified. The variable is automatically updated with text typed by the user, subject to validation processing.

    Other controls, radio buttons for example, use Value with a Selected Value Text setting. When the radio button is selected at runtime, its "Selected Value Text" becomes the new value of the variable. This way, each radio button can assign a different value to same variable.

    When a calendar control is bound to the variable, its value is set to the date selected by the control. Since variables can preset the value of visual controls and also be set by them, binding is a powerful and often-used technique.

    Placeholder

    Placeholder text displays a hint to the user.

    

    For a text input, placeholder text is shown until the user types input. If the user clears the contents of an input box, then placeholder text is re-displayed.

    

    For a dropdown, placeholder text prompts the user to make a selection.

    

    The placeholder is replaced after the user selects an item.

    

    Tip: Manually typed placeholder text is ignored if the component is bound to a variable. If a variable is selected, then its value is always displayed.

    Options

    This property applies to dropdown components only. It adds or removes list items from a dropdown.

    1. By default, a dropdown has no items. To add choices for users to select from, expand the Advanced property group.

       

    2. Click Edit List under Options.

    3. Click Add New Item.

    4. For each item, configure text to display and a return value:

       

       • Set Value to a unique string or number. When the item is chosen, value indicates which item the user selected. Value can optionally be assigned by a variable.

       • Set Display to text a user can choose in the drop list. Display text can optionally be assigned by a variable.

    5. Click Add to save the item.

    6. The Editing List popover summarizes items added. You can reorder items by clicking up/down arrows, delete items by clicking the trash icon, or add additional list items to the dropdown.

       

    7. Click Add New Item to add additional items.

    8. When finished, dismiss the popover by clicking its close box.

    Requires Value

    Determines whether the user is required to type or select a value. The default is False, which means that user interaction is optional.

    The user interface visually indicates whether user input is optional. 

    Optional input is indicated by a label below the component:

    

    Layout

    Width

    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
    	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. 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.
    	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.

    Height

    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
    	Auto-sizing configures the component to shrink or grow in accordance with its contents.
    	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.
    	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.

    Align

    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

    Margin

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

    

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

       

    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.

       

       The component is immediately repositioned using its new margin setting.

    Visible

    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.

    Advanced

    Value

    Value binds a component to the variable selected. For example, if you bind a text input component to a variable, the input box will always display the value of that variable, ignoring any placeholder text specified. The variable is automatically updated with text typed by the user, subject to validation processing.

    Other controls, radio buttons for example, use Value with a Selected Value Text setting. When the radio button is selected at runtime, its "Selected Value Text" becomes the new value of the variable. This way, each radio button can assign a different value to same variable.

    When a calendar control is bound to the variable, its value is set to the date selected by the control. Since variables can preset the value of visual controls and also be set by them, binding is a powerful and often-used technique.

    Options

    This property applies to dropdown components only. It adds or removes list items from a dropdown.

    1. By default, a dropdown has no items. To add choices for users to select from, expand the Advanced property group.

       

    2. Click Edit List under Options.

    3. Click Add New Item.

    4. For each item, configure text to display and a return value:

       

       • Set Value to a unique string or number. When the item is chosen, value indicates which item the user selected. Value can optionally be assigned by a variable.

       • Set Display to text a user can choose in the drop list. Display text can optionally be assigned by a variable.

    5. Click Add to save the item.

    6. The Editing List popover summarizes items added. You can reorder items by clicking up/down arrows, delete items by clicking the trash icon, or add additional list items to the dropdown.

       

    7. Click Add New Item to add additional items.

    8. When finished, dismiss the popover by clicking its close box.

    Requires Value

    Determines whether the user is required to type or select a value. The default is False, which means that user interaction is optional.

    The user interface visually indicates whether user input is optional. 

    Optional input is indicated by a label below the component:

    

    
    

    Disabled

    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. 1. To create a True/False variable, click the Variables tab.

       2. Click Add  to add a variable.

          

       3. Select True/False as the data type.

          

       4. In the Name box, type a descriptive name.

          

       5. Set Default Value to True or False.

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

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

       6. To save the variable, click Apply.

       7. Assign the variable to the Disabled property. Below Disabled, click Select Variable.

          

       8. Select the True/False variable.

          

    To test your work, click Preview.

    Change Action

    The Change Action property allows you to set an action that executes when the state or value of this component is changed.

    You can select a Scripter action, an Outbound Action, or a custom action. Outbound actions are not available unless the Outbound property is enabled.