Overview
Version
FineReport Version | Functional Changes |
11.0 | / |
11.0.3 | Adaptive Layout settings in the body are moved from Attributes on the right to the menu bar Template > PC Adaptive Attributes. |
Application Scenarios
The layout of the dashboard refers to the layout and typesetting composed of the positions of all components in the body of the dashboard and the spacing between components. A good layout will make your template look clear and beautiful.
The layout methods of dashboard are mainly divided into two categories — Adaptive Layout and Absolute Layout, but there are also two layout effects under Adaptive Layout – Unfixed Layout and Fixed Layout.
This article will introduce the differences in the characteristics of these layout methods and the effects of each layout.
Function Entrance
• You can set Adaptive Layout and Absolute Layout in Template > PC Adaptive Attributes.
• Under Adaptive Layout, you can set Unfixed Layout and Fixed Layout in bottom-left of the body.
Layout Recommendation
Before learning about layout methods, you need to understand one function: layout recommendation.
When you create a dashboard, New Template interface will pop up, providing you with multiple layout effects. You can choose modules with components of different numbers.
You can choose modules with components of different numbers.
There are two display effects, Simplified and Real.
If you create a blank template, the layout of the template is Adaptive Layout > Unfixed Layout by default.
If you select a template with a layout, the body interface will display Blank Block and Component Interval according to the selected layout.
Note:
1. Placeholder block refers to the virtual container used to place components under Adaptive Layout. The blank template does not initially have a placeholder.
2. You can choose a layout when creating a template, but you are not allowed to change the layout after creating a template. There is no custom layout recommendation yet.
Layout Type
Adaptive layout > Unfixed layout
When creating a dashboard, no matter whether you choose to create a blank template or a template with a layout, the default layout mode of the template is Adaptive Layout > Unfixed Layout.
Blank templates start with no placeholder blocks, but placeholder blocks are added when components are added.
When a template with layout is created, each dotted box in the body is a blank placeholder block. You cannot make any operations with blank placeholder blocks and you can only place one component in a placeholder block.
You can set Component Interval and Padding in Layout under Attributes on the right.
You can only drag a component to the position of a placeholder block, or a prompt will pop up: Cannot Add To This Area!
When you dragging a component into the placeholder block, the component will cover the placeholder block in both directions, and the component panel in the upper right corner will display the name of the dragged component.
When you move or delete a component, the placeholder block moves or deletes with the component, and the layout will be automatically adjusted.
As is shown below:
Adaptive Layout > Fixed Layout
The blank template initially has no placeholder block. If you switch the default Unfixed Layout to Fixed Layout, then you cannot drag components into the body, and you will see a prompt: Cannot Add To This Area!
Component Interval and Padding of the body under Fixed Layout are grayed out and cannot be edited.
You can only drag a component to the position of a placeholder block, or a prompt will pop up: Cannot Add To This Area!
If you drag a component to a placeholder block that already has a component, the original one will be overwritten.
Moving or deleting components will not affect the layout of placeholder blocks.
The components of the two placeholder blocks can be swapped.
You cannot copy-paste components.
Absolute Layout
The component dragged into the body will not zoom in or out to cover the whole body.
Note: To add a component successfully, you need to drag it into the body completely.
Components can overlap and can be placed in any position of the body.
You can choose multiple components and set their layout alignment. For details, see Component Typesetting Alignment.
You can adjust the position and size of components under Attributes on the right.
Differences
Under Absolute Layout, you can place components casually or even overlap them, but you may spend more time setting their layout and alignment.
Unfixed Layout of Adaptive Layout is the most flexible. You can change the layout at will.
Under Fixed layout of Adaptive Layout, you can adjust components casually with fixed layout.
Details:
Layout comparison | Adaptive Layout > Non-Fixed Layout | Adaptive Layout > Fixed Layout | Absolute Layout |
Placeholder blocks | Blank placeholder blocks support no operations, and a placeholder block can only put one component (absolute canvas block/tab block/no absolute canvas block or tab-wrapped chart block and report block) Note: Blank templates have no placeholder block. | Not support | |
Display placeholder blocks | Support to display blank placeholder blocks. But the placeholder blocks will not be displayed after adding components. | / | |
Add placeholder blocks | Added with new components. | Not support | / |
Add components | Cover the placeholder block in both directions or cover the body in both directions in a blank template. | Cover the placeholder block in both directions. | You can drag components into any position of the body and overlap them. |
Generate a new placeholder block to place the existed component and automatically adjust the size and position of adjacent components. | Replace the original components. | ||
When dragging a component to the area of a non-placeholder block, you will see a prompt: Cannot Add To This Area! | |||
Move components | Placeholder blocks move together and the layout changes. | · The placeholder blocks and the layout remain unchanged. · You can swap the components of two placeholder blocks. | Move freely without affecting the position of other components |
Copy-paste components | Both components and placeholder blocks. | Not support | Only components |
Delete components | Remove the placeholder block and change the layout. | The placeholder block and the layout remain unchanged. | No effect on other components. |
Modify Component Interval/Padding | Support | Grayed out and cannot be edited | You can select multiple components, to set their layout and alignment simultaneously. Note: You cannot select multiple components under Adaptive Layout. |
Set coords and size of components | You can zoom in or out components. You can also modify the size under Attributes on the right, but the layout of other components will change. | You can zoom in or out components, and modify the size under Attributes on the right. | |
Switching Layout
When you switch Adaptive Layout to Absolute Layout, the position of the existing components remains unchanged, and the placeholder blocks disappear.
When switching Absolute Layout to Adaptive Layout, you will see a prompt: The position of all components will change and cannot be restored after switching, are you sure to switch? After you click OK, the layout will be switched to Adaptive Layout > Unfixed Layout. At this time, it is equivalent to creating a blank template. The components adaptively cover the body, and there is no interval between the components.
When you switch between Unfixed Layout and Fixed Layout, the position of components and placeholder blocks will not change.Note: If switching Unfixed Layout of a blank template to Fixed Layout, you cannot drag components.
