Template Adaptive Attributes

1. Version

Note 1: JAR packages before 2018-12-27 need to install the adaptive plugin

Note 2: This article is only applicable to the PC terminal, please refer to the mobile terminal adaptation method: [General] Mobile Terminal Self-adaptation

2. Application scenarios

On the PC terminal, the user preview template hopes to adapt to the screen resolution.

3. Function introduction

For general reports and aggregation reports, table adaptation (horizontal adaptive, bidirectional adaptive) and font adaptation can be set.

Dashboard can be set to form adaptive (default, horizontal adaptive, bidirectional adaptive), font adaptive.

Note: Data Analysis Preview does not support adaptive properties.

1. Setting method

Click Template > PC Adaptive Attr, click the PC Adaptive Attr pane, you can choose Use server report view settings or Individually set for the template, as shown in the following figure:

1) Use server report view settings

By default, Use server report view settings is selected, and the settings are valid for all templates under Use server report view settings under the designer. As shown below:

2) Individually set for the template

Select Individually set for the template, the adaptive settings of "Font" and "Form" will only take effect for the current template. As shown below:

2. Adaptive logic

Note 1: A certain ratio is 0.4, the width and height of the report in the browser / body width and height < 0.4

Note 2: The parameter pane is not adaptive.

Note 3: When "Freeze Row" is set, the row height is limited, and the bidirectional adaptive does not take effect, which is equivalent to "horizontal adaptive or no adaptive".

1. Setting method

Click Template > PC Adaptive Attr, and the PC Adaptive Attr pane will pop up. You can choose Use server report view settings or Individually set for the template. The usage is the same as above, please refer to Section II.1 of this article. As shown below:

2. Adaptive logic

Note 1: A certain ratio is 0.4, the width and height of the report in the browser / body width and height < 0.4

Note 2: When the report block is frozen, the sadaptive of the report block does not take effect.

Note 3: IE8 and below browsers do not support dashboard adaptive.

Note 4: The lazy loading logic of the dashboard takes effect only when the form is adaptive by default, and does not take effect under other adaptive logic.

Note 5: After the font adaptive is enabled, the font size of the report block component and the report block in the Tab block cannot be completely consistent when previewing.

When the report is previewed after adaptive is enabled, the rendering effect of the report on the browser terminal is related to the screen resolution.

The body size represents the real size of the canvas. When the body size is the same as the screen resolution, the template preview will display the real size without zooming; when the body size is inconsistent with the screen resolution, it will zoom in proportion to screen resolution and body size. The same template has a larger zooming ratio when previewed on a low-resolution computer, so scroll bars are more likely to appear when a report suitable for a high-resolution screen is previewed on a low-resolution screen. As shown below:

When a user designs a report, if the report needs to be previewed on a computer with different resolutions, it is recommended to create a template on a low-resolution computer, and font adaptive needs to be enabled. After the template is completed, test preview on a high-resolution computer. , if there is a slight incompatibility problem, you can fine-tune it.

3. Layout

After the preview, the browser window is zoomed, which is related to the layout of the body, as shown in the following figure:

The PC Adaptive Attr in this article does not take effect on the mobile terminal.

For mobile adaptive settings, please refer to: [General] Mobile Terminal Self-adaption

1. After the template is set to be horizontal adaptive, the preview font is blurred

Problem Description:

After the template is set to be horizontal adaptive, the preview font is blurred.

Solution:

The scroll bar is reserved for horizontal adaptive, so there is a little blank space on the right side, which makes the font display slightly blurred, which is a normal effect.

If the user wants the font to be clear, bidirectional adaptive can be set.

2. There are still scroll bars after setting the bidirectional adaptive

Problem Description:

The dashboard is set to be bidirectional adaptive on the PC terminal, the body is bidirectional adaptive, and after the report block is bidirectional adaptive, the scroll bar will still appear when the page size of the browser is changed.

Cause Analysis:

It is a system DPI problem. When the resolution is 1920*1080 and the zoom ratio is 125%, a horizontal scroll bar will appear, and the scroll bar will be hidden in the foreground, but the scroll bar still exists.

Solution:

Set zoom to 100%.

If the scroll bar is generated due to too much content in the report block, you can remove the scroll bar by restricting the content or hiding the scroll bar.

3. There are blanks in the adaptive report after the frozen setting

Problem Description:

In the dashboard, when the report block is set to freeze, in the case of adaptive, the report content does not fill the full screen, and there are blanks around it.

Solution:

The new adaptive plugin can be used to solve this problem. 

If the browser is zoomed or full screen, there is a blank space below the report block, you can add an initialization event to the body to adjust the display. The content of the event code is as follows:

$(window).resize(function () {
var width = FR.windowWidth; //Get browser window length
var height = FR.windowHeight;//Get browser window height
//Adjust the length and width of the report form
var from = _g().getWidgetByName('form')
if (form.oriWidth === width && form.oriHeight === height) {
return;
}
form.oriWidth = width;
form.oriHeight = height;
//Load report content
form.loadContentPane(true);
}
);