Text input script component

The text input component prompts the agent for text input and can validate the text. You can bind the value of a text input component to a variable.

1. Click the Input icon  on the component toolbar. 

2. In the properties panel, use the Placeholder box to prepopulate the control with a prompt that tells the reader what to type. Variables never store placeholder text. Placeholder text is temporary text that instructs the agent, and it is replaced automatically by user input. For example:

   

   You can prepopulate the field with the value of a variable. To do so, select a variable from the Value list in the component properties. The value automatically displays to the user at run time. The value of the variable automatically updates with text that the user types, subject to optional validation.

3. To validate user input, expand the Common group. Then click the Validation list.

   

4. Choose Select or Custom to select a method of validation.

   • Select: Select allows you to choose a preset validation pattern. The validation presets are:

     Email	Input must conform to email address syntax.
     Alphabetic	Allow alphabetic input only (no numbers).
     Alphabetic – With Spaces	Allow alphabetic input only and require spaces between words. For example, “cool beans” is acceptable but “cool_beans” is not.
     Alphabetic – with Underscores	Require alphabetic input only (no numbers) and underscores between words. For example, “cool_beans” is acceptable but “cool beans” is not.
     Alphanumeric	Text input must contain both letters and numbers.
     Alphanumeric – With Spaces	Text input must contain both letters and numbers with words separated by spaces.
     Alphanumeric – With Underscores	Text input must contain both letters and numbers with words separated by underscores.

   • Custom: If a prepackaged validation is not sufficient, you can use a regular expression to validate text input. Select Custom from the Validation list. Then, enter a regular expression in the text box. Regular expressions are beyond the scope of this topic. But, suppose for example, that you want the user to enter the phrase “dog” somewhere within a text input. Typing dog in the custom validation property sets up a simple regular expression that accepts dog, sundog, hotdog, my good dog Penny, or other combinations of characters that contain that case-sensitive string, but not DOG Doggie, and so on.

     Another example is ^[a-z]+$ to accept lowercase alphabetic characters only.

     Tip: The Internet offers many resources for learning about regular expressions. Examples are http://www.regular-expressions.info/ and https://en.wikipedia.org/?title=Regular_expression.

     When focus leaves the text box, the value of the text input component is validated to ensure that it conforms with the selected validation rule. If user input does not pass validation, borders turn red to indicate a validation problem. You can test custom and prepackaged validations in the editor’s preview mode.

     

5. Set the Requires Value switch to Yes if the user must type a value into the component. By default, this setting is No, which means that user input is optional. 

   1. Set the Requires Value switch to True if the user must type a value into the component. By default, this setting is False, which means that user input is optional.

6. To set an action, click No action selected below Change Action in the Advanced property group. 

7. To select an action, click a row in the list. You can assign a previously defined action or create a new action.

8. Close the Select Actions list. 

9. Optionally, set other properties of this component. For example, you can adjust the spacing around this component using margin settings.
   
   

   Common
   Expand all
   

   ValueClick to expand

   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.

   PlaceholderClick to expand

   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.

   ValidationClick to expand

   Validation ensures that the agent entered properly formatted text. When focus leaves the text input box, Genesys Cloud tests the text value to ensure it conforms to the selected validation rule. If the text fails to pass validation, borders turn red to indicate a validation problem with the text.

   Use the drop list to select a validation method:

   

   • Select—allows you to select a preset validation pattern:

     Email	Input must conform to email address syntax.
     Alphabetic	Allow alphabetic input only (no numbers)
     Alphabetic - With Spaces	Allow alphabetic input only and require spaces between words. For example, "cool beans" is acceptable but "cool_beans" is not.
     Alphabetic - with Underscores	Require alphabetic input only (no numbers) and underscores between words. For example, "cool_beans" is acceptable but "cool beans" is not.
     Alphanumeric	Text input must contain both letters and numbers.
     Alphanumeric - With Spaces	Text input must contain both letters and numbers with words separated by spaces.
     Alphanumeric - With Underscores	Text input must contain both letters and numbers with words separated by underscores.

   • Custom—allows you to select a string variable. For example, you can have the string variable be the regex and then use that variable on multiple pages to keep the validation the same. For more information on the custom validation method, see Text input script component.

   Requires ValueClick to expand

   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:

   

   MultilineClick to expand

   Text input boxes support a single line by default. When Multiline is set to No (by default), a text input does not wrap text or resize itself vertically.

   

   When Multiline is set to No, you can clear any text that was previously typed by clicking this icon:

   

   If you set Multiline to Yes, then a text input accepts multiple lines of text. 

   

   PasswordClick to expand

   Password

   To configure an Input component for a password, set Password to Yes. The password text is hidden. The default setting for Password is No.

   

   Show Password Toggle

   To display the toggle that shows the password, set Show Password Toggle to Yes. The default setting for Show Password Toggle is No.

   

    

   Layout

   WidthClick to expand

   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.

   HeightClick to expand

   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.

   AlignClick to expand

   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

   MarginClick to expand

   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.

   VisibleClick to expand

   Sets the visibility of a component based on the value of a Boolean (True or False) 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.

   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

   ValueClick to expand

   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.

   PlaceholderClick to expand

   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.

   DisabledClick to expand

   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.

   ValidationClick to expand

   Validation ensures that the agent entered properly formatted text. When focus leaves the text input box, Genesys Cloud tests the text value to ensure it conforms to the selected validation rule. If the text fails to pass validation, borders turn red to indicate a validation problem with the text.

   Use the drop list to select a validation method:

   

   • Select—allows you to select a preset validation pattern:

     Email	Input must conform to email address syntax.
     Alphabetic	Allow alphabetic input only (no numbers)
     Alphabetic - With Spaces	Allow alphabetic input only and require spaces between words. For example, "cool beans" is acceptable but "cool_beans" is not.
     Alphabetic - with Underscores	Require alphabetic input only (no numbers) and underscores between words. For example, "cool_beans" is acceptable but "cool beans" is not.
     Alphanumeric	Text input must contain both letters and numbers.
     Alphanumeric - With Spaces	Text input must contain both letters and numbers with words separated by spaces.
     Alphanumeric - With Underscores	Text input must contain both letters and numbers with words separated by underscores.

   • Custom—allows you to select a string variable. For example, you can have the string variable be the regex and then use that variable on multiple pages to keep the validation the same. For more information on the custom validation method, see Text input script component.

   Requires ValueClick to expand

   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:

   

   Change ActionClick to expand

   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. 

   MultilineClick to expand

   Text input boxes support a single line by default. When Multiline is set to No (by default), a text input does not wrap text or resize itself vertically.

   

   When Multiline is set to No, you can clear any text that was previously typed by clicking this icon:

   

   If you set Multiline to Yes, then a text input accepts multiple lines of text. 

   

   PasswordClick to expand

   Password

   To configure an Input component for a password, set Password to Yes. The password text is hidden. The default setting for Password is No.

   

   Show Password Toggle

   To display the toggle that shows the password, set Show Password Toggle to Yes. The default setting for Show Password Toggle is No.