Dashboard Component Operation

For new users, it is very necessary to understand and master some design skills of dashboard, which can often achieve a multiplier effect. This article will explain some basic operations and design skills when designing a dashboard to help users avoid some time-consuming design operations.

1.1 version

2.1 Selected components

There are two methods for selecting components in the dashboard.

1) After adding a component in the dashboard, when the mouse moves over the component block, a light blue transparent overlay box and an "Edit" icon will appear on the component block, click on the component, the component is selected, as shown in the following figure:

Note: Under the body "absolute" layout, if the components overlap and the JAR package time is after 2020-11-02, the designer supports the selected component, the component is automatically suspended in the upper layer, which is convenient for users to edit.

2) Expand the component drop-down tree in the component list on the right. When the mouse hovers over the component name, the thumbnail of the corresponding component will be displayed floating on the left. Click the name to select the component, as shown in the following figure:

Note: Under the body "Adaptive" layout, in the component list on the right, multiple components are not supported, so batch operations on components, such as batch cutting and batch deletion, are not supported.

2.2 Edit components

After selecting the component, click the "Edit" icon or double-click the component to enter the component editing state. As shown below:

Click other components directly in the canvas area to exit the component editing state. The report block cannot exit the editing state directly, you need to click "form" at the bottom left to exit the editing state. As shown below:

Note 1: For Tab and Absolute Canvas, there is a nested editing state. When the clicked widget tree component is in the container, the editing state of the component is exited but the editing state of the container is not exited; when the component of the clicked widget tree is outside the container, Exit the container editing state directly.

Note 2: The "component name" of all components, widgets and plugin classes does not support being empty or repeated, otherwise the background cannot determine the target object of the initialization event, that is, the initialization event set will be invalid.

2.3 Copy components

When making dashboards, designers often use components with the same style in order to standardize the layout. In this case, they need to use components such as cutting, copying, and pasting.

Note 1: Component copy and paste supports the use of mouse shortcuts, and supports copy and paste between different frm.

Note 2: In the body "absolute" layout, in order to avoid overlapping components, please select the upper component first, and then copy it.

1) There are two ways to copy and paste components in the dashboard. After selecting the component, click the right mouse button and the copy and paste tool will appear, just select the corresponding tool operation, as shown in the following figure:

2) Expand the component drop-down tree in the component list on the right. After selecting the component, click the tool icon in the upper toolbar to perform corresponding operations on the component, as shown in the following figure:

2.4 Pasting components

The method of pasting components in the decision report is the same as the method of copying components in section 2.4. Here, the name and placement of the new components when pasting components are explained.

After pasting, the new component will automatically add _c to the original component name. If the pasted component name is XXX, the new component will be named XXX_c after pasting. As shown below:

The layout of the body is different, and the placement logic of the newly formed structure after pasting is also different.

1) When pasting components under "Adaptive" layout, the new components will be equally divided into the height of the selected components, and the new components are below, as shown in the following figure:

Note: When pasting a component, if the component is not selected, the pasting will not take effect.

If the height of the selected component can no longer be divided, the divided height will be less than the minimum height limit of the component, and the paste will not be able to be pasted. A prompt pops up: Cannot paste here, less than the minimum height of the component, as shown in the figure below:

2) When pasting components under "Absolute" layout, usually the new components are staggered 21 pixels down and to the right of the selected component position. 

Note: Under the body "absolute" layout, when pasting the widget, any component in the body must be selected, otherwise the paste will not be possible.

• If the distance between the original position of the selected component and the layout boundary is less than 21 pixels, when pasting, the side with a distance less than 21 pixels will be directly close to the layout boundary, and the side with a distance greater than 21 pixels will be staggered normally.

• If the selected component is located at the bottom right corner of the layout, and is close to the bottom right border of the layout, the component will be offset from the original position by 21 pixels to the left when pasting.

2.5 Remove components

The method of deleting components in the dashboard is the same as the method of copying components in section 2.3. After deleting a component from the component list, the body directory tree will be automatically collapsed.

For JAR package after 2020-11-02, in the component list, after deleting a component, the body remains intact and will not be automatically folded. As shown below:

2.6 Adjust the order of components

After selecting "absolute" layout for the layout of the body, the components can be placed on top of each other. When multiple layers of components are placed on top of each other, it is not easy to select the lower layer components directly to enter the editing interface by clicking with the mouse. You need to move the components to select and edit. At this time, you can modify the layer order of the components through the toolbar in the component list. As shown below:

Note: In the component list, if a component is selected and the tool icon in the upper toolbar is grayed out, it means that the tool does not support the component.