Input Box

Component overview

An input box is a control widget consisting of a content input area and a submission button. You can enter content in the input area and click the button to submit it for backend processing.

Scenarios

Input boxes are commonly used in visualization applications as input forms for quick and accurate data entry or retrieval, such as registration and login verification or product search interfaces.

Effect display

Prerequisites

• Create a data dashboard. You can use a template, use a blank canvas, or use AI to generate one.

• Your business data is prepared. For more information, see Data Source.

Add input box

1. Access the DataV console.

2. On the Workbench page, in the Data Dashboards area, hover over the target dashboard and click Edit. The canvas editor opens.

3. In the left-side navigation pane, under the Component Library > Information list, click the Input Box widget to add it to the canvas.

You can also use global search to add related widgets.

Integrate business data

After adding the widget, integrate your business data for display. Click the input box and select the data to render on the right-side Data Source tab.

• The input box accepts the following data fields.

  Field	Description
  value	The content that is displayed by default in the content input area of the input box. If not empty, it will overwrite the configuration in the style. If empty, it will use the content in the Style > Input Box > Placeholder Text configuration item.

  The following example shows the data structure and effect of a sample input box.

  [
    {
      "value": "Please enter your content..."
    }
  ]

  

• This section describes the core configuration items for the data source.

  Configuration	Description
  Select Data Source	Supports various data types, such as CSV files, APIs, and different databases. For more information, see Supported data source types. Edit data fields in a visual table or in code.
  Configure Filter (Optional)	Customize filter code to transform, filter, display, and perform simple calculations on data. For more information, see Manage data filters.
  Configure Data Mapping	Map fields from the selected data source to the widget's fields. This enables real-time data matching. Click the icon to configure field styles.
  View Response Result	Displays the data connected to the widget in real time. When the widget's data source changes, this section shows the latest data. Click the data response result to view the data field code. Click View Example to see the array type and sample code that the data source accepts. You can write your fields based on the example. Other data request configurations: Disable Loading State: If you check this box, the widget's initial loading content does not appear when the widget updates or when you preview the data dashboard. Controlled Mode: If you check this box, the widget does not request data when it initializes. Data requests can only be started by the blueprint editor or by global variable events. Auto Update Request: If you check this box, the platform polls for data updates at the interval you set. If you do not check this box, you must refresh the page manually or use the blueprint editor or global variable events to trigger data updates.

Configure input box

Click the input box widget to access configuration options on the right-side panel, including basic style, global variables, interaction occurrences, advanced settings, and blueprint interaction.

{
  "value": "Input box content"
}

{
  "value": "Input box content"
}

[
  {
    "value": "Input box content"
  }
]

{ 
  // Movement type. Absolute positioning: to, relative positioning: by. Default: to.
    "positionType": "to",
  // Specified position. x-coordinate, y-coordinate.
  "attr": {
   "x": 0,
   "y": 0
   },
  // Animation method.
  "animation": {
    "enable": false,
    // Animation duration.
   "animationDuration": 1000,
    // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
   "animationEasing": "linear"
  }
}

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}