Components
In the web visual editor, you can add components and configure their interactions to build diverse applications.
Component overview
Components are the core of the web application editor and the basic building blocks of a web application. The web visual editor includes the following types of components:
|
Type |
Description |
|
Common components |
Provides commonly used components to help you build applications faster. |
|
You develop these components on the component development platform, and they are private to your account. |
|
|
Includes Text, Compound components, Space components, Media components, Control components, Chart components, Form components, and Popup container components. |
|
|
Includes Scale, Gauge Clock, Multi-color Gauge, Single-color Gauge, Scale Slider, Slider, I-Pipe, Cross Pipe, T-Pipe, L-Pipe, Fan, Digital Tube, Boiler, Industrial Button, and Knob Switch. |
|
|
Power distribution components, Sewage treatment components, Smart water supply components, HVAC components, Smart greenhouse |
These are custom components from third-party developers. They are uploaded to the IoT Studio platform as component packages and made available to all developers. For more information, see Third-party components. |
Add a component
-
In the web application editor, click the component icon
on the far left. -
In the component list to the left of the canvas, search for a component by name, then drag it onto the canvas.
Alternatively, you can select a component type from the component drop-down list to expand the list and find the component you need.
-
Configure the component in the properties panel on the right. For details, see the Web visual development components section of this documentation.
Common component operations
-
Right-click a component to open a context menu with options to delete, bring forward, send backward, bring to front, and send to back.
Select a component and right-click it to cut, copy, lock, and more.
Note-
You can paste cut components across pages within the same application.
-
You can paste copied components across pages, applications, and projects under the same account.
-
You must unlock a component before performing any operations on it.
-
-
Group or ungroup components
-
Group: Select multiple components, right-click, and select group.
Note-
You can configure the group's name, visibility, and opacity in the Style tab of the properties panel.
-
You can paste cut or copied component groups across pages within the same application.
-
-
Ungroup: Select a component group, right-click, and select ungroup.
-