Data Portal Tab Component

This document is applicable to users who have installed the Data Portal plugin to learn plugin functions.

Version

Application Scenarios

• You want to combine components of the same subject into a tab, thus viewing content of different subjects in a space-saving way by switching between different tab pages.

• When using the data dashboard component, you need to display data in multiple dimensions and view different dimensions by switching between them.

Functions

• You can add multiple components within different tab pages of a tab component and switch between different tab pages by clicking the corresponding titles.

• Tab Component allows you to add tab pages, edit tab page titles, adjust tab page orders, and set component style.

Note:

Adding tab components within a tab page is not supported.

This document introduces how to use Tab Component in the data portal dashboard and takes the effect in the following figure as an example.

Log in to FineBI as the admin, choose System Management > Data Portal > Portal Management, and click Add Portal to create a data portal dashboard.

On the data portal editing page, click Other, and click/drag Tab Component to the data portal.

A blank tab page exists in the newly added tab component by default.

Click  on the right of the tab page title to add two tab pages. The default name for the newly added tab pages is tab.

• Components which can be added to Tab Component include: Common Content, Quick Entry, Bulletin Board, Report Dynamics, My Message, Data Dashboard, Text Component, Image Component, and Web Component.

• Tab component does not change the settings of the original component and its effective scope.

Click the first tab page to add components. On the editing page, drag Bulletin Board and My Message into the first tab page.

Note:

If the tab title is not renamed, it changes automatically to the name of the component first added to the tab page. For example, in the above figure, the Bulletin Board component is first added to the tab page, so the tab page name automatically changes to Bulletin Board. If you continue to drag other components in the same tab page, the tab page title does not change.

Similarly, drag a Common Content component into the second tab page. Select the Common Content component and select Frequently Visited on the right as the source of the component content.

Similarly, drag a Common Content component into the third tab page. Select the Common Content component and select My Favorites on the right as the source of the component content.

To modify the title of the tab page, you need to hover your cursor over the tab page title, and appears. You can click Edit Title to rename the title of the tab page.

Select a tab component, and you can set the component style on the right, including Common Setting (component style) and Tab Setting (tab style).

Two styles are supported: Follow Theme and Custom.

The tab component style completely follows the style of Portal Theme, only allowing you to set whether to display the component title and set the title text.

The tab style completely follows the style of Portal Theme, only allowing you to set Style and Location.

The tab component style does not change as Portal Theme switches. Component styles include Component Title, Title Text, Title Style, and Component Background. For details, see Data Portal Style.

Tab style does not change with the change of Portal Theme, allowing you to set Style, Location, Tab Title, Default Status, and Selected Status.

Three styles can be set as the background of tabs.

• Style One: The selected tab is underlined.

• Style Two: The title background of the selected tab is filled with blue, while the title background of other unselected tabs is filled with grey.

• Style Three: The title background of the selected tab is filled with white, while the title background of other unselected tabs is filled with grey.

Default Status means the unselected status. You can set the font color and background color of unselected tabs.

Similarly, in Selected Status, you can set the font color and background color of selected tabs.

Deleting a Component

When you delete tab pages and tab components, components in the corresponding tab pages are also deleted. A prompt pops up during deletion.

Select a component, and appears in the upper right corner of the component. Click , and if the tab component content is not empty, a prompt pops up saying "Components in the tab will also be removed. Sure to delete?". Click OK, and the components in the tab page are also deleted.

Hover your cursor over the tab page to be deleted, and  appears. Click Delete, and if the tab page content is not empty, a prompt pops up saying "Components in the tab will also be removed. Sure to delete?". Click OK, and the tab page is deleted.

Select a component and click to delete the component.

Adjusting a Component

Hover your cursor over a component and drag the pop-up dotted box to resize and relocate the component.

Select a tab page, and drag its tab title horizontally to adjust its order.

Hover your cursor over a component and drag the pop-up dotted box to resize and relocate the component.