DocsICP FilingConsole
Documentation
Home Page IoT Studio User Guide Web Visualization Development Widgets Form widgets Dropdown box

Dropdown box

Updated at:
Copy as MD
My Favorites

A dropdown box lets users select an item from a list. This topic explains how to configure this component.

Step 1: Add the component

  1. Create a web application. For more information, see Create a web application.

  2. In the web application editor, click the component icon 组件 on the far left.

  3. Above the component list on the left, enter dropdown box, find the component, and drag it to the canvas.

    For more information about adding components, see Add a component.

    On the Style tab in the right-hand properties panel, configure the component's position, size, name, opacity, text color, and background color.

Step 2: Configure the data source

In the Style panel on the right, configure the list content options as described in the table below.

Parameter

Description

List content

Specifies the data source type for the list content.

  • Device: Select a product. The dropdown box will then list the names of all devices within that product.

  • Product in Project: The dropdown box lists the names of all products in the current project.

  • Data Source: Populate the dropdown options from an API, Static Data, or Application Push.

Select product

This item appears when you set List Content to Device. Select the product that contains the target devices.

Default value

This parameter appears after you configure List content. Use it to set a default value for the dropdown box:

  • Always the first item in the list: Uses the first item in the list as the default value.

  • Custom: Select a specific device under the selected Device source, or a specific product under the Product in Project source.

  • URL parameter: Uses a URL parameter (in key=value format) from the final published URL of the application. You must specify the parameter key and a fallback value.

    This method is often used with the Open Link action in the Interaction settings. For more information, see Open Link.

Step 3: Configure styles

  1. In the Style panel on the right, set the text color and background color of the component.

  2. Adjust the position of the component on the page. For more information about common component style settings, see Style Configuration.

Step 4: Configure interactions

  1. Select the Interaction tab for the component to configure events and actions. For more information, see Configure Interactions.

    For example, when the component's value changes, you can execute the Refresh component action. This lets you refresh another component's content based on the selection in the dropdown box.

  2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.

Previous：JSONNext：Multiple selector