DataV:Tab lists

Component overview

A tab list is composed of multiple tabs and can be configured with interactive settings to work in conjunction with other widgets. This enables the grouping of related information into tabs for easy switching between different views or functions.

Scenarios

Tab lists are ideal for organizing information, classifying content, and presenting data, allowing for quick access to needed information. Examples include the following:

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

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

• Data presentation: Use tabs to display different data views, such as "Elementary Schools in a Region" and "High Schools in a Region".

Effect display

Examples include different charts displayed under various tabs within a tab list.

Prerequisites

• A data dashboard is available that supports creation using a template, a blank canvas.

• Business data is ready for use. For more information, see Datasource.

Add tab lists

1. Access the DataV console.

2. Navigate to the Workbench > All Applications > Data Dashboard, select the desired dashboard, and enter its canvas editing page.

3. In the left-side navigation pane, under the Widget Library > Controls > All list, select Tab List to add the widget to the canvas.

   Note

   The platform offers multiple built-in tab list styles (quick styles) for immediate use. Hover over the icon on the widget to select as needed. If these styles do not meet your requirements, you can customize the widget's style after adding it. For more information, see Style Configuration.

You can also use the global search to add related widgets.

Integrate business data

Once the widget is added, you can integrate your prepared business data for display. Click the tab list and, on the Data Source tab on the right, select the data for the widget to display.

• The data fields accepted by the tab list are outlined below.

  Field	Description
  id	The ID of the tab in the tab list. The General > Initial Selection configuration item in the style panel requires this variable value to define which tab is selected when the widget is initialized.
  content	The name of the tab in the tab list.
  imgSrc	The URL address of the icon for the tab in the tab list. After configuring the icon here, you can modify the size, position, and other information of the image in the General > Icon section of the style panel.

  Below is the data structure and a sample display of a tab list.

  [
    {
      "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"
    }
  ]

  

• Key configuration items for the data source are detailed below.

  Configuration item	Description
  Configure data source	The tab list supports integrating various types of data such as CSV files, APIs, and databases. For more information, see Datasource. You can edit data fields using a visual table or code.
  Configure filters (optional)	Used to customize filter code for data structure transformation, filtering, display, and simple calculations. For more information, see Manage data filters.
  Configure data mapping	Used to map fields from the selected data source to the corresponding fields of the widget, achieving real-time data matching. Click the icon to configure field styles.
  View response results	Used to display the data integrated into the widget in real time. When the widget's data source changes, the latest data is displayed here. Click the data response result to view the code for the data fields. Click View Example to see the array type and code example received by the data source. You can refer to the example to write related fields. Other data request configurations: Disable loading state: When selected, the loading content during widget initialization will not be displayed when the widget is updated or the data dashboard is previewed. Controlled mode: When selected, the widget will not request data in the initialized state. At this time, data requests can only be initiated through the blueprint editor or global variable events. Automatic update requests: When selected, the platform dynamically polls and updates data based on the polling time you set. If not selected, you need to manually refresh the page or trigger request updates through the blueprint editor and global variable events.

Configure tab lists

To configure the tab list widget, click it and use the right-side panel to set basic styles, global variables, interaction occurrences, and advanced settings, along with blueprint interaction settings.

{
  "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 duration in ms
}

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

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

Case demonstration

This case demonstrates the dynamic effects of widgets by controlling the carousel and visibility of groups within a tab list.

1. Access the DataV console.

2. Select a data dashboard, click Edit, and enter the canvas editor page.

3. Add Column Chart, Line Chart, Progress Doughnut Chart, and two Tab List widgets to the canvas.

4. Group the column chart, line chart, and doughnut chart, and set the carousel container's trigger mode to Event Trigger.

5. Select any tab list widget, access the data source panel, modify the static data, and synchronize the name to Show/Hide.

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

6. Modify the name of the other tab list to Carousel Control.

7. Enter the Blueprint page by clicking the icon in the upper-left corner.

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

9. On the Logic Node tab, add a serial data processing node and two condition judgment nodes to themain canvas.

10. Connect the widgets as illustrated.

11. Set up the processing methods.

    • Show

      return data.id == 1;

    • Hide

      return data.id == 2;

    • Serial Data Processing

      return {
        index: data.id - 1
      };

12. Preview the display result by clicking Preview in the upper-right corner of the page.