Tab Component

Version

Application Scenario

Tab components can be used to meet different data analysis needs of users in various scenarios such as information integration, layout optimization, and multidimensional analysis.

Scenario one: When analyzing data, you hope to put the analysis of the same perspective on one page, and click the tab to switch among different analysis perspectives. For example, you may want to view the overall amount analysis of contract orders and the analysis of orders from different regions.

Scenario two: A dashboard has multiple analysis subjects, leading to a long analysis page. In this case, you may hope that related content can be integrated into one page for display, and you can click the tabs to switch the content, reducing the length of the dashboard and achieving a streamlined layout.

Scenario three: You hope to achieve flexible analysis and free layout without being limited by tab pages.

When creating a dashboard, you can display the content of a dashboard in multiple subjects to shorten the length of the dashboard, achieve a flexible layout, and view different content simultaneously, as shown in the following figure.

Function Description

You can add components to different tab pages in a tab component and switch to different tab pages by clicking the tab page title.

You can perform operations such as hover, copy, delete, and style setting in tab components.

Note:

The tab pages in a tab component are loaded asynchronously.

Click Other on the dashboard editing page and drag Tab Component into the page.

Click the + icon next to the tab page title to add a tab page. The added tab pages are all named Tab. You can click the tab page title to switch tab pages.

Components that can be added include chart/table components, filter components, text components, image components, and web components. 

Note:

Tab components are not included.

Tab components do not change the settings and effective scope of the original component, such as linkage and drilling.

Dragging in and out of the tab component is not supported for hovered components.

Creating a Component

Add all created components for data analysis to the dashboard. For details, see Adding Components to Dashboards.

Adding Components to a Tab Page

Click a tab in the component, switch to the tab page where the component needs to be added, and drag the component into it.

Note:

You can drag and drop the tab components to adjust their scales.

Note:

1. If the tab title is not renamed, it will change according to the name of the first component dragged into the tab. For example, when the filter component is first dragged into the tab page, the tab title is automatically changed to the filter component name Date Interval. If the second component is dragged in, the title of the current tab will not be changed. Thereafter, the tab title will be fixed to the name of the first component dragged in.

2. If there are two or more components dragged into the tab, the component title will not be hidden but changes to the title of the first component.

3. Fields cannot be added to tab page and tab component titles.

Similarly, drag and drop the needed components into the second tab page.

You can set the title of the tab page. Hover your mouse over the title of the tab page you want to rename, click the dropdown icon, and select Edit Title from the drop-down list.

Style Setting Page

Select the tab component, click the dropdown icon, and select Style to go to the style setting page.

You can set Tab Component Title, Background, and Tab Style on the page.

Component Title Setting

Set the font style for the tab component title, as shown in the following figure.

Component Background Setting

Set Title Background and Component Background. For details, see Dashboard Style.

Tab Style Setting

You can set the style of the tab page, including Style, Location, Custom, Default State, and Selected State.

For example, you can select the second style and click OK.

There are three styles in Tab Style > Style.

Style one: The background color of the tab is the same as the color of the line below it. The effect on mobile terminals is the same as that on PC.

Style two: The background color of the selected tab is a color block and the deselected tabs are lines. The effect on mobile terminals is the same as that on PC.

Style three: The background colors of tabs are all color blocks. The display effect on PC is different from that on mobile terminals, and the display effect of the latter is similar to Style one.

In the Default State (also the deselected state), you can set the tab page font and its background color when it is not selected.

In the Selected State, you can set the tab page font and its background color when it is selected. After finishing the settings, click OK to save the style.

Each tab page can be dragged left and right to adjust its order of priority.

Note:

The size, the setting content, and the hovering state of the copied one are all consistent with those of the original component.

Copying Tab Components

For details, see Visual Component Management.

Copying Components in the Tab Page

Components dragged into the tab page in Tab Component can also be copied. For example, select the Contract Amount component, click the dropdown icon, and select Copy from the drop-down list. The copied component remains in the current tab page and is automatically placed at the bottom of the page.

You can set Hover for the tab component and the components of the tab page. For details, see Dashboard Layout.

Note:

A hovered component in or out of a tab component cannot be dragged out or into the tab component.

When the tab page and the tab component are deleted, included components will also be deleted. A prompt will pop up when you delete them. For details, see Visual Component Management.

Deleting Tab Components

When the tab component is deleted, the corresponding components in it will also be deleted.

Deleting Tab Pages

Select the tab title, click the dropdown icon, select Delete from the drop-down list, and click OK. The components in the tab page will also be deleted.

Removing Components from the Tab Page

Components added to the tab page can be removed from the tab component to the dashboard page, as shown in the following figure.

Each tab component can be exported to Excel separately. The export order is from left to right and from top to bottom according to the component's position in the current tab page.

The effect after exporting is as follows.

The effect of the tab component on mobile terminals is as follows.

Note:

You can adjust the height of the tab component on mobile layout.