Dashboard Layout

Version

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.

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.

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:

• 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.