I. Overview
1) Since the phone screen is smaller than both PC and Pad, some templates need to be laid out differently on the mobile terminal.
2) In the following report design scenarios, the template in Scenario I needs to be relaid out on the mobile terminal, but those in Scenario II and II need not.
Scenario I: A dashboard containing report block and other modules is shared among PC, Pad and mobile phone. On both PC and Pad, its width and height are either screen-adaptive or equally scaled, but on a phone, it does not require too much in terms of layout. Therefore, you just need to rearrange the layout of the dashboard to make sure that there is only one module in one line when the dashboard is displayed via the phone.
Scenario II: You need to use a template on PC and mobile phone, then you just need to make sure the template is accessible on the mobile terminal, and do not need to re-layout the template on the mobile.
Scenario III: You have designed a template specifically for mobile phones, and designed the effects of components for PC and mobile phone separately.
3) You can only re-layout templates by setting the Mobile Attributes under the Mobile Terminal under the body of a dashboard. The settings include: Padding, Component Interval, Component Freeze and Widget Order.
| You will learn |
|---|
|
II. Settings of Attributes
1. Padding
1) Click on [body] in the right panel, check [App Relayout] in [Mobile Terminal], and set all [Padding] to 10 in [Adavanced].
2) You can see that the chart has padding when you preview the chart on the mobile terminal, as shown below.
2. Component Interval
1) In [Layout], set the [Component Interval] to 20.
2) You can see that each component has an interval when you preview the chart on the mobile terminal, as shown below.
3. Component Freeze
1) The scope of application of the Component Freeze is as follows:
You can only select the first-layer non-container components (report blocks, chart blocks, text, etc.) in the “body”, and cannot freeze container components (tab components and absolute layout blocks).
Non-container components that are extended by a plugin can also be frozen.
You can select multiple components at the same time.
2) In [MobileTerminal], click the text box after [Component Freeze], and select chart0 and chart1 to set Component Freeze.
3) When you preview the chart on the mobile terminal, you will see that chart0 and chart1 are frozen and cannot move when you slide the chart down, as shown below.
4. Widget order
1) In Widget Order, you can use to adjust the order of components.
2) You can select report0, and click for three times to move report0 to the top.
3) You can see that the report0 is at the top when you preview the chart on the mobile terminal, as shown below.
III. Charts under re-layout
1. Support custom tooltip
Will be shown like:
2. Long datapoint display
1) Horizontal
The prompt content is less than the minimum width: pop-up window width remains unchanged.
The prompt content is between the minimum width and the maximum width: the pop-up window width is adaptive.
The prompt content is longer and exceeds the maximum width: the excess part is directly omitted.
2) Vertical
The maximum rows of data points displayed is 6 (when the font of the system or third-party App is standard), the content exceeding 6 rows needs to be scrolled down manually to view.
