Switch widget

Widget overview

The switch is a control widget that mimics a physical switch. Click it to toggle between on and off states. You can configure interactions with other widgets to control content visibility or present different states.

Scenarios

Use the switch in visualization applications to show or hide specific content by defining its on or off state. For example, use a switch to enable or disable sound, or to show or hide sidebar configurations.

Demonstration

• Static switch

  

• Interaction scenario

  

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 a switch widget

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 navigation pane on the left, add the Switch widget to the canvas.

You can also use the global search to add components.

Connect to business data

After you add the widget, connect it to your business data. Click the switch widget, and then on the Data Source tab in the right-side panel, configure the data.

• The following table describes the data fields accepted by the switch widget.

  Field	Description
  onValue	The value returned when the switch is turned on. The default value is 1.
  offValue	The value returned when the switch is turned off. The default value is 0.
  state	The on or off state of the switch. This parameter can only be set to the value of onValue or offValue. The default value is 0 or 1. 0 indicates that the switch is off, and 1 indicates that the switch is on.

  The following shows the data structure and effect of an example switch.

  // Turn the switch on
  [
    {
      "onValue": 1,
      "offValue": 0,
      "state": 1
    }
  ]
  
  // Turn the switch off
  [
    {
      "onValue": 1,
      "offValue": 0,
      "state": 0
    }
  ]

  

• 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 the switch widget

Click the switch widget. In the right-side panel, configure its basic styles, advanced settings such as global variables and interaction events, and Blueprint interactions.

{
  "value": 1  // Current status value
}

[
  {
    "onValue": "1",
    "offValue": "0",
    "state": 1
  }
]

{
  "value": 1  // Current status value. 1 indicates that the switch is on, and 0 indicates that the switch is off.
}

{ 
  // 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"
}