- Service Overview
-
User Guide
- Preparatory Work
- Introducing the DLV Console
- How-Tos
- Managing Workspaces
- Creating Data Connections
- Creating Screens
- Developing Screens
- Managing Screens
- Managing Layers
-
Data Connection Management
-
Creating Data Connections
- Data Connection Overview
- Using Static Data Sources
- Creating API Data Connections
- Creating CSV File Data Connections
- Creating Object Storage Service Data Connections
- Creating Data Warehouse Service Data Connections
- Creating Data Lake Insight Data Connections
- Creating MRS Hive Data Connections
- Creating MRS SparkSQL Data Connections
- Creating ClickHouse Data Connections
- Creating RDS for MySQL Data Connections
- Creating RDS for PostgreSQL Data Connections
- Creating RDS for SQL Server Data Connections
- Creating RDS for GaussDB Data Connections
- Creating GeminiDB Influx API Data Connections
- Creating Cloud Search Service Data Connections
- Creating DDM Data Connections
- Creating Oracle Data Connections
- Creating MySQL Data Connections
- Creating PostgreSQL Data Connections
- Creating SQL Server Data Connections
- Creating Elasticsearch Data Connections
- Editing Data Connections
- Searching for Data Connections
- Deleting Data Connections
-
Creating Data Connections
- Managing Components
- Component Guide
- Screen Combination
- Integrating DLV into Third-Party Systems
- Change History
- Developer Guide
- API Reference
-
FAQs
- What Is DLV Used For?
- Regions and AZs
- Can I Quickly Create a DLV Screen Using a Template?
- Can DLV Connect to Data Sources Through APIs?
- What Types of Data Connections Are Supported in DLV?
- How Do I Configure a CSV Data Source?
- How Do I Use the Interaction Function?
- What Can I Do If a Component Cannot Be Completely or Normally Displayed?
- How Do I Query Data Formats Supported by Different Components?
- What Can I Do When the WebGL Component Breaks Down?
-
More Documents
-
User Guide (ME-Abu Dhabi Region)
- Service Overview
- Preparatory Work
- Introducing the DLV Console
- How-Tos
- Managing Workspaces
- Creating Data Connections
- Creating Screens
- Developing Screens
- Managing Screens
- Managing Layers
-
Data Connection Management
-
Creating Data Connections
- Data Connection Overview
- Using Static Data Sources
- Creating API Data Connections
- Creating API Gateway Data Connections
- Creating CSV File Data Connections
- Creating Object Storage Service Data Connections
- Creating Data Warehouse Service Data Connections
- Creating Data Lake Insight Data Connections
- Creating MRS Hive Data Connections
- Creating MRS SparkSQL Data Connections
- Creating ClickHouse Data Connections
- Creating RDS for MySQL Data Connections
- Creating RDS for PostgreSQL Data Connections
- Creating RDS for SQL Server Data Connections
- Creating RDS for GaussDB Data Connections
- Creating GeminiDB Influx API Data Connections
- Creating Cloud Search Service Data Connections
- Creating a DAYU Data Connection
- Creating DDM Data Connections
- Creating Oracle Data Connections
- Creating MySQL Data Connections
- Creating PostgreSQL Data Connections
- Creating SQL Server Data Connections
- Creating Elasticsearch Data Connections
- Editing Data Connections
- Searching for Data Connections
- Deleting Data Connections
- Managing VPC Connections
-
Creating Data Connections
- Managing Components
- Component Guide
- Screen Combination
- Integrating DLV into Third-Party Systems
-
FAQs
- What Is DLV?
- What Is DLV Used For?
- Regions and AZs
- How Many Screens Can I Create in DLV?
- Can I Quickly Create a DLV Screen Using a Template?
- Can DLV Connect to Data Sources Through APIs?
- What Types of Data Connections Are Supported in DLV?
- How Do I Configure a CSV Data Source?
- How Do I Use the Interaction Function?
- What Can I Do If a Component Cannot Be Completely or Normally Displayed?
- How Do I Query Data Formats Supported by Different Components?
- What Can I Do When the WebGL Component Breaks Down?
- API Reference (ME-Abu Dhabi Region)
- Developer Guide (ME-Abu Dhabi Region)
-
User Guide (ME-Abu Dhabi Region)
- General Reference
Copied.
Editing Screens
This section uses a bubble chart as an example to describe how to edit a screen.
Screen Development Page
Log in to the DLV console. On the Screens page, locate the screen to be edited and click on the screen.
On the screen development page, you can design and develop screens based on service requirements, add components, configure page layouts, associate data sources, and publish screens.
No. |
Functional Area |
Description |
---|---|---|
1 |
Component area |
In the component area, DLV provides various components for you to add them to the canvas. For details about the components, see Overview. |
2 |
Layer area |
In the layer area, the name and thumbnail of each layer in a screen can be displayed, facilitating layer search. For details about layer management, see Managing Layers. |
3 |
Canvas |
Canvas of the screen. |
4 |
Canvas zoombar |
Drag the zoombar or click Click |
5 |
Horizontal ruler |
When the button in the upper left corner of the canvas displays as |
6 |
Vertical ruler |
When the button in the upper left corner of the canvas displays as |
7 |
Configuration panel |
When you select a screen or a component, the configuration information is displayed on the configuration panel. For details about how to configure a screen, see Editing Screens. For details about how to configure components, see Component Guide. |
8 |
Publish area |
The buttons in the publish area are described as follows:
|
9 |
Panel control area |
Used to control the area displayed or hidden on the screen development page. |
10 |
Layout |
You can select multiple components to align them. |
Editing Screens
- Log in to the DLV console.
- On the Screens page, locate the screen to be edited and click
on the screen. The screen development page is displayed.
Figure 1 Editing a screen - On the canvas, set the screen parameters on the Page Settings panel on the right.
- Screen Size: width and height of the canvas. Unit: pixel.
- Background Color: background color of the screen.
- Background Image: You can upload a custom image as the background image of the screen. If this parameter is not set, no background image is available by default.
- Display Mode: zoom mode of the screen.
- Thumbnail: Click Capture Image to take a thumbnail of the current screen as the screen cover. When you search for the screen on the Screens page, you can see the thumbnail.
CAUTION:
Using a thumbnail as a screen cover may disclose your data.
- Reset: Click Reset Background to restore the default background color and image.
- Adhesion Sensitivity: If this parameter is set to No fill, this function is disabled. If this parameter is set to another value, when you drag a component to the position close to another component or auxiliary line and the distance between them is less than or equal to this value, the component automatically adheres to the other component or auxiliary line. Unit: pixel.
- Allow export: If this parameter is selected, the screen can be exported as an image or a PDF file.
- Global Parameters: global interaction parameters.
Figure 2 Screen page setting - Add and manage components.
Add required components to the canvas. For details, see Managing Components.
- Manage layers.
After adding a component, you can manage the layer. For details, see Managing Layers.
Arranges Components
After adding components to the canvas, you can select multiple components and click the buttons in the layout area above the canvas to arrange the components.

Coordinates and Coordinate Auxiliary Lines of Components
In the upper left and lower right corner of a component, the coordinates and coordinate auxiliary lines of the component are displayed.

Auxiliary Lines
- Adding auxiliary lines
When the button in the upper left corner of the canvas displays as
, move the pointer to the top of the canvas or on the left of the ruler. When the pointer changes to a bidirectional arrow and a red auxiliary line is displayed on the canvas, click the mouse to add a red auxiliary line. You can add multiple horizontal or vertical auxiliary lines to the canvas.
Figure 5 Auxiliary lines - Adjusting positions of auxiliary lines
Move over a red auxiliary line and hold down the left mouse button while dragging the auxiliary line until to a desired position on the canvas. The distance between the auxiliary line and the left, right, upper, and lower boundaries of the canvas is displayed on the ruler.
- Showing/Hiding auxiliary lines
Click
in the upper left corner of the canvas to hide all auxiliary lines. In this case, you cannot add auxiliary lines.
To display all auxiliary lines again, click
in the upper left corner of the canvas. You can add auxiliary lines.
Figure 6 Showing/Hiding auxiliary lines - Deleting auxiliary lines
In the canvas, move over a red auxiliary line. When the pointer changes to a bidirectional arrow, hold down the left mouse button while dragging the auxiliary line to remove it from the canvas. Alternatively, right-click the auxiliary line and choose Delete from the shortcut menu.
Feedback
Was this page helpful?
Provide feedbackThank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.
For any further questions, feel free to contact us through the chatbot.
Chatbot