- 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.
Custom Component Development
Development Process
Environment Preparation
Go to the Node.js official website and download and install a Node.js version suitable for your operating system. Node.js supports the Windows, macOS, and Linux operating systems.
Installing Developer Tools
- Log in to the DLV management console. On the Control Center > Components page, click Download Developer Tools in the upper right corner of the page to download the developer tool package named dlv-cli-x.x.x, where x.x.x indicates the tool version.
Figure 1 Downloading the tool
- Decompress the dlv-cli-x.x.x package to the local host. Open the command prompt window in Windows or open the CLI terminal in Linux or Mac. Run the cd command to go to the dlv-cli-x.x.x directory, and run the npm link command to install the dlv-cli developer tool.
- After the tool is installed, run the dlv command. If the information shown in Figure 2 is displayed, the tool is successfully installed. Table 1 shows the information about the current developer tool.
Generating Component Packages
A component package is a custom component template provided by DLV. You can develop components based on the custom template.
Create a directory, for example, newCom, go to the directory, and run the dlv init command to create a component, as shown in Figure 3. Enter the information about the new component as prompted.
Do not run the dlv init command in the directory of developer tool dlv-cli-x.x.x. Otherwise, the developer tool cannot be used properly.
Message |
Description |
---|---|
Please select a language... |
Use ↑ and ↓ to select a language. |
Please set the component name... |
Set a component name, which consists of 1 to 32 characters, including letters, digits, and underscores (_), and must start with a letter or underscore (_). Unless otherwise specified, the names in this document comply with the naming rules. |
Please set the component alias... |
Set a component alias, which consist of 1 to 32 characters, including letters and special characters. . |
Please set the component version number... |
Set a component version number. The default version number is 1.0.0. |
Please describe the component... |
Describe a component. |
If the corresponding template file is generated in the new directory, the component package is successfully generated.
├──node_modules # npm dependency package
├──gui.json # Component configuration
├──index.js # Component entry
├──index.less # Component style
└──package.json # npm module description
Developing Components
After a component package is generated, you can customize components based on the generated template. For details, see Component Development Guide.
Previewing Components
Go to the component directory and run the dlv start command to preview a component. If the command output shows that the service is started, the Chrome browser is automatically launched and navigates to the component preview page.
The preview page consists of the central canvas area and the toolbar on the right. The details are as follows:
- Central canvas area
The central canvas area displays components and allows you to observe component changes in real time.
All configurations and data modifications made on the toolbar on the right are displayed on the components of the central canvas in real time.
The black frame of a component indicates the container size of the component. The black frame can be scaled in each direction to test the scaling performance of the component.
- Toolbar
The toolbar on the right consists of the pattern, data, and interaction panels.
Panel |
Description |
---|---|
Pattern |
The Pattern panel provides configuration items for components. After you set the configuration items, the corresponding configurations take effect on the components immediately. |
Data |
The Data panel provides data API configuration items for components. Once the data on the Data panel is changed, the changes are made on the components accordingly. |
Interaction |
The Interaction panel describes the component interaction. |
Publishing Components
Go to the component directory and run the dlv package command. A tar.gz package named in the format of component name-version number is generated outside the component directory. Upload the package to a component package on the Components page of the DLV management console to publish the package.
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