Create Input Fields or Text Areas

You can add input fields or text areas to your analytic applications or optimized stories so that viewers can enter values and trigger actions based on them.

Context

Viewers can enter text in both input fields and text areas. The difference between the two widgets is that input fields can only display contents in a line, while text areas can automatically wrap texts according to its size. Text areas can hold 1000 characters at maximum in multiple lines.

Procedure

  1. From the Insert area of the toolbar, select Start of the navigation path Next navigation step Input FieldEnd of the navigation path or Start of the navigation path Next navigation step Text AreaEnd of the navigation path to add the widget to the canvas, popup or page.
  2. In the Styling panel of the input field or text area, enter a name. By default it's InputField_1 or TextArea_1.
  3. In the Input Field Value or Text Area Value section of the Builder panel, select the source of the input field value from the dropdown of Data Source Type：
    • Manual Input

      Under Display Hint, you can enter hint texts to be initially displayed in the input field. If you disable this option, no hint will be displayed either in edit or view time. After this option is enabled, when viewers start to enter a value in the input field at runtime, the hint texts will be overwritten by the users' inputs.

    • Script Variables
    • Model Variables
    • Tile Filters & Variables
    • Analytic Application/Story Properties
  4. (optional) You can turn on Enable the write-back in runtime and select a script variable in your application or story if you want the input field value to be passed to the variable in view time.
  5. You can further leverage the following APIs to allow for more functionalities in the input field or text area:

    • To get and set the value in the input field or text area, use getValue() and setValue() respectively.

    • To tell whether the input field or text area is enabled and enable it, use isEnabled() and setEnabled() respectively.

      To tell whether the input field or text area is editable and make it editable, use isEditable() and setEditable() respectively.

      Note
      The input field is grayed out in view time when disabled, but not when uneditable.

    • To trigger the actions after the input, for example, when users enter the text and press Enter, use onChange().

    For more information about APIs, you can refer to API Reference.