Mobile Layout

Version

Application Scenario

Users often need to access FineBI dashboards through mobile devices to quickly view real-time project progress in mobile working.

In this case, designers only need to change the layout and style for the FineBI dashboard to be used on both PC and mobile terminals, saving design costs and maintenance time.

Function Description

You can view dashboards on mobile phones or tablets in the iOS/Android system, easily browsing dashboards in the system by tapping and swiping the screen.

You can use the mobile layout function on the dashboard page to conveniently design components displayed in mobile dashboards and the display order of these components.

You can click the Mobile Layout icon on the dashboard edit page to go to the mobile layout setting page, as shown in the following figure.

Environment Preparation

The BI6.0 Mobile Layout Edit Page HTML5 plugin needs to be installed. Usually, you do not need to manually install the plugin, because it has been installed in FineBI by default.

Mobile Layout Effect Preview

You can view templates under Directory > Dashboard after downloading the DataAnalyst app and connecting the app with FineBI. 

Create a dashboard on PC, do not modify the mobile layout, and mount the dashboard to a directory. The following figure shows the default mobile layout effect.

The display rules of the default mobile layout effect are as follows:

1. One component is displayed in one line by default.

2. Components are displayed from left to right and from top to bottom based on their physical positions on PC.

3. The component height is automatically adjusted based on the content.

4. The filter component is displayed in the filter component button at the bottom, rather than in the dashboard.

Mobile Layout Entry

To make templates more visually appealing and reasonable on mobile terminals, click the Mobile Layout icon at the top of the dashboard edit page to go to the mobile layout setting page. For details, see section "Function Description."

Note:

 The Mobile Layout icon is only on the dashboard edit page. You cannot find the icon on the dashboard preview page.

The following figure shows the mobile layout setting page.

Number	Function	Description
1	Reset	Allows you to restore to the default effect of the mobile dashboard.
2	Zoom-In/Out	Allows you to zoom in/out on the mobile effect preview page. Supported options: 75%, 100% (default value), 125%, and 150%. Note: The mobile layout is set to 100% each time you go to the mobile layout page. The zoom-in or zoom-out setting does not affect the actual display effect on mobile terminals.
3	Desktop Layout	Allows you to return to the dashboard edit page.
4	Mobile Effect Preview Area	Allows you to preview the display effect on mobile terminals. Allows you to directly adjust the component position, component size (except the size of the filter component), and table column width, and jump to the component style setting page. Note: 1. If the component changes, the mobile layout of the dashboard is automatically updated. 2. If the screen height of the mobile phone is the same with that of the mobile preview page (670px), the number of components displayed on one mobile screen is the same with that displayed on the mobile preview page. If the screen height of the mobile phone is greater than 670px, more components are displayed on one mobile screen. If the screen height of the mobile phone is less than 670px, fewer components are displayed on one mobile screen.
5	Hidden Component	Displays hidden components.
6	Style Setting	Includes the Page Setting area and Widget Setting area. Page Setting: allows you to set Component Gap, Background, Show All Filter Components on Parameter Panel, and Chart Font for the dashboard. Widget Setting: allows you to set Show Full-Screen Button and Adaptation for individual components.

Note:

1. If you add a component in the dashboard after adjusting the mobile layout, the added component is automatically placed as the last one in the mobile layout. However, if you add a filter component, it is placed as the first one in the mobile layout.

2. If you delete a component in the dashboard, the component in the mobile layout is also deleted simultaneously, with other components following the component in the mobile layout automatically moving up and filling the gap.

Hidden Component

Some components used to optimize the chart effects in the dashboard do not need to be displayed on mobile terminals. In this case, you can hide these components in the mobile layout.

On the mobile layout page, click the eye icon in the top right corner of a component to hide the component, which is moved to Hidden Component.

The hidden component will not be displayed on mobile terminals. After the component is hidden, the following components move up one by one to fill the gap, as shown in the following figure.

Click the Display This Component icon in the upper right corner of the hidden component to redisplay the hidden component, which automatically moves to the left mobile layout panel and is automatically placed at the bottom for display.

Note:

The redisplayed filter component is placed at the top. The redisplayed filter component in the tab component is placed at the top of the tab page. For details about the display setting of the filter component, see section "Filter Component Display."

Component Adjustment

Component Size Adjustment

You can adjust the component size in the mobile preview area of Mobile Layout, as shown in the following figure.

Note:

You can only adjust the width of the filter component. For details about how to directly display the filter component on the dashboard, see section "Filter Component Display."

Component Position Adjustment

You can adjust the component position and put multiple components in one line in the mobile layout, as shown in the following figure.

Table Column Width Adjustment

You can manually adjust the column width in the mobile layout if the data columns of the table are displayed incompletely, as shown in the following figure.

Note:

You can also set the table's adaptation effect under Style Setting > Widget Setting. For details, see section "Widget Style Setting."

Page Style Setting

You can set the page and widget styles in Style Setting.

Component Gap Setting

Click Style Setting and set Component Gap to 10. You can view the effect on the left, as shown in the following figure.

Note:

You can also adjust the component gap for components in the tab component.

Dashboard Background Setting

You can set Background to Color or Image. For example, set Background to Color and set the color to blue, as shown in the following figure.

Filter Component Display

Show All Filter Components on Parameter Panel is enabled by default. The effect is the same with that in section "Default Mobile Layout." If you want to display filter components in the dashboard, you can disable the function. After the function is disabled, filter components are placed at the top of all components, as shown in the following figure.

Note:

Filter components in the tab component are displayed on the corresponding tab page.

Chart Font Adaptation

The chart font adaptation function is supported on mobile terminals. Set Chart Font to Adaptation. After setting, the size of the font in the chart component can be automatically adjusted when you adjust the size of the chart component, as shown in the following figure.

Component Style Setting

Full-Screen Button Hiding

If you do not want all components to be displayed in full screen after clicking them, you can disable Show Full-Screen Button, as shown in the following figure.

Component Adaptation

You can adjust the mobile display style by setting the adaptation for components (like text components, KPI card components, and table components) to ensure complete display of component content.

1. KPI Indicator Card Adaptation

Click Style Setting in the mobile layout and set Adaptation Display to Standard Adaptation, Width Adaptation, Overall Adaptation (default setting), or Height Adaptation, as shown in the following figure.

Note:

The adaptation setting method for the text components in Custom Component is the same with that for KPI indicator cards.

2. Text Component Adaptation

Click Style Setting in the mobile layout and set Adaptation Display to Standard Adaptation or Width Adaptation, as shown in the following figure.

When you set Adaptation Display to Width Adaptation, the font size setting is retained if the text content does not automatically wrap on mobile terminals; the text content adapts to the width on mobile terminals if the text content automatically wraps (not the wrapping by manually pressing the Enter key) on mobile terminals.

3. Table Adaptation

Click Style Setting in the mobile layout and set Adaptation Display to Standard Adaptation (default setting) or Width Adaptation, as shown in the following figure.

Standard Adaptation: The maximum column width is 1/2 of the component's visible width, and the minimum column width is 1/6 of the component's visible width.

Width Adaptation: The column width follows the proportional adaptation effect on PC. The table width adapts to the component width (no horizontal scroll bar). All columns can be displayed in one screen of mobile terminals.

You can also directly adjust the column width by dragging. For details, see section "Table Column Width Adjustment."

Custom Component Style

FineBI6.0.11 and later versions allow you to customize the style of a component.

1. Click the edit icon in the top right corner of a component in the mobile layout to go to the component edit page.

2. Modify the component style to achieve the needed effect in the mobile layout.

3. Return to the mobile layout page. You can view that the preview effect of the component has been automatically updated.

BI Layout Setting

You can set BI Layout Setting to Grid Layout or Adaptive Layout on mobile terminals. The difference between the two options is whether the component height can be adjusted adaptively if the component content is smaller than the component height.

For details, see Template Setting.

To restore the default mobile layout, you can click Reset in the upper right corner, as shown in the following figure.

Invalid Component Background

The background image you have set for the dashboard under Dashboard Style > Custom > Dashboard can be displayed normally if you do not set a background in the mobile layout.

The background setting for the dashboard will be invalid if you also set a background in the mobile layout.