Tab list

Widget overview

A tab list consists of multiple tabs that you can configure to interact with other widgets, grouping related information and enabling quick switching between views or functional areas.

Scenarios

The tab list is commonly used for information organization, content categorization, and data display. Examples:

• Information organization: Group related content using tabs, such as "Personal Information" and "Account Settings".

• Content categorization: Use tabs to distinguish between content categories, such as "Electronics" and "Home Goods" on an e-commerce platform.

• Data display: Show different data views using tabs, such as "Elementary School Distribution in a Region" and "High School Distribution in a Region".

Demonstration

• Different tabs in a tab list display different charts.

  

• The tab list widget provides multiple built-in quick styles.

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 tab list

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, follow the steps in the figure to add the Tab list widget to the canvas.

   Note

   The platform provides multiple built-in tab list styles, also known as quick styles, that you can use directly. To select a style, hover over the icon on the widget. If the quick styles do not meet your requirements, you can customize the widget style after you add it. For more information, see Style configuration.

You can also use the global search feature to add the widget.

Connect to business data

After you add the widget, connect it to your business data. Click the tab list, and then on the Data Source tab on the right, select the data for the widget.

• The tab list widget accepts the following data fields.

  Field	Description
  id	The ID of a tab. The General > Initial Selection setting in the Style panel uses this value to define which tab is selected at initialization.
  content	The name of a tab.
  imgSrc	The URL of the icon for a tab. After you configure an icon, you can modify its size, position, and other properties under General > Icon in the Style panel.

  The following code shows a sample data structure for a tab list and the resulting display.

  [
    {
      "id": 1,
      "content": "Sales Data",
      "imgSrc": "&#xe8fc"
    },
    {
      "id": 2,
      "content": "Customer Data",
      "imgSrc": "&#xe7b1"
    },
    {
      "id": 3,
      "content": "Market Data",
      "imgSrc": "&#xe7b1"
    },
    {
      "id": 4,
      "content": "Production Data",
      "imgSrc": "&#xe7b1"
    }
  ]

  

• Core data source configuration items:

  Configuration Item	Description
  Select Data Source	The tab list widget supports various data source types, such as CSV files, APIs, and different databases. For more information, see Supported data source types. You can edit data fields using a visual table or code.
  Configure Filter (Optional)	Defines custom filter code for data transformation, filtering, display, and simple calculations. For more information, see Manage data filters.
  Configure Data Mapping	Maps fields from the data source to the widget fields for real-time 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, the latest data is shown here. 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 use the example as a reference to write your fields. Other data request configurations: Disable Loading State: If selected, the widget's loading indicator is hidden during updates and dashboard previews. Controlled Mode: If selected, the widget does not request data at initialization. Data requests can only be triggered through the Blueprint editor or global variable events. Automatic Update Requests: If selected, the platform polls for data updates at the interval you set. Otherwise, manually refresh the page or trigger updates through the Blueprint editor or global variable events.

Configuration: Tab List

Click the tab list widget to configure styles, advanced settings such as global variables and interaction events, and Blueprint interactions in the right panel.

{
  "id": "1",
  "content": "Tab 1"
}

[
  {
    "id": "1",
    "content": "Tab 1",
    "imgSrc": "https://img.alicdn.com/imgextra/i3/O1CN016hZVyj29jgY7SqaJn_!!6000000008104-55-tps-200-200.svg"
  }
]

{
  "id": "1"
}

{
  "duration": 2000  // Carousel interval in milliseconds (ms).
}

    {
      // The move method. 'to' for absolute positioning and 'by' for relative positioning. Default: 'to'.
        "positionType": "to",
      // The target position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation method.
      "animation": {
        "enable": false,
        // The animation duration.
        "animationDuration": 1000,
        // The animation curve. Options: linear, easeInOutQuad, or easeInOutExpo.
        "animationEasing": "linear"
      }
    }

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

Demo

Use a tab list to control a group's carousel and visibility, creating a dynamic display effect.

1. Access the DataV console.

2. Select any data dashboard and click Edit to open the canvas editor.

3. Add a column chart, a line chart, a doughnut chart, and two Tab list widgets to the canvas.

4. Group the column chart, line chart, and doughnut chart. Set the trigger method for the carousel container to Event Trigger.

5. Click one of the tab list widgets. On the data source panel, modify the static data and change the widget's name to Show/Hide.

   [
     {
       "id": 1,
       "content": "Show"
     },
     {
       "id": 2,
       "content": "Hide"
     }
   ]

6. Click the other tab list widget and change its name to Carousel Control.

7. Click the icon in the upper-left corner of the page to open the Blueprint page.

8. On the Layer Node tab, add the carousel container, the Show/Hide widget, and the Carousel Control widget to the main canvas.

9. On the Logic Node tab, add one serial data processing node and two conditional nodes to the main canvas.

10. Connect the widgets.

11. Configure the processing methods.

    • Show

      return data.id == 1;

    • Hide

      return data.id == 2;

    • Serial Data Processing

      return {
        index: data.id - 1
      };

12. Click Preview in the upper-right corner of the page to preview the result.