- 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.
UI Types
This section describes the component configuration items supported by DLV. You can use the type field defined in the gui.json file to define types and configurations of components.
Supported Types
The Type field supports the following:
- Input: Text Box.
- Number: Numeric Control. The value can be entered and the maximum and minimum values can be customized.
- Select: Drop-down List. The filtering and custom input are supported.
- Color: Color Selector.
- Checkbox: Check Box.
- Slider: Slider
Text Box
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
placeholder |
No |
String |
Message displayed when the value is empty. |
value |
Yes |
String |
Value in the text box. |
The following provides an example:
1 2 3 4 5 6 7 |
{ "label": "Init value", "name": "initvalue", "type": "input", "placeholder": "input value", "value": "" } |
Numeric Control
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
Number |
Value of the numeric control. The default value is 0. |
min |
No |
Number |
The minimum value. The default value is -30,000. |
max |
No |
Number |
The maximum value. The default value is 30,000. |
precision |
No |
Number |
Number of decimal places to be reserved. The default value is 0. |
step |
No |
Number |
Adjustment range. The default value is 1. |
The following provides an example:

1 2 3 4 5 6 7 8 9 10 |
{ "label": "Size", "name": "size", "type": "number", "min": 0.1, "max": 1.5, "precision": 1, "step": 0.1, "value": "0.6" } |
Drop-down List
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
string |
Value selected from the drop-down list. |
data |
Yes |
Array<Object> |
All the optional values contained in the drop-down list. |
isSearch |
No |
Boolean |
Indicates whether the drop-down list supports the search function. The default value is false. |
The following provides a data example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "label": "Layout", "name": "initvalue", "type": "select", "data": [ { "key": "Center", "value": "center" }, { "key": "Left", "value": "left" }, { "key": "Right", "value": "right" } ], "value": "center" } |

Color Selector
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
String |
Value selected by the color selector. The value can be a gradient color or an echarts color value. |
gradient |
No |
Boolean |
Indicates whether gradient colors are supported. The default value is true. |
1 2 3 4 5 6 7 |
{ "label": "Color", "name": "color", "type": "color", "value": "rgba(70,94,212,1)", "gradient": true }, |
Check Box
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
Boolean |
Value of the check box. The value can be true or false. |
The following provides an example:

1 2 3 4 5 6 |
{ "label": "Checked", "name": "checked", "type": "checkbox", "value": true } |
Slider
Field Name |
Mandatory |
Parameter Type |
Description |
---|---|---|---|
value |
Yes |
Number |
Value of the slider. The default value is 0. |
min |
No |
Number |
Minimum value of the slider. The default value is 0. |
max |
No |
Number |
Maximum value of the slider. The default value is 100. |
step |
No |
Number |
Adjustment range. The default value is 1. |
The following provides an example:

1 2 3 4 5 6 7 8 9 |
{ "label": "Radius Value", "name": "radius", "type": "slider", "value": 0, "min": 0, "max": 10, "step": 1 } |
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