Text box-IoT Studio(IoT Studio)-阿里云帮助中心

Unlike the text component, a text box accepts user input. For example, you can use it as a search box on a page. This topic shows you how to configure this component.

Example

You can use a text box for username and password fields on a login page to validate user input. For example, you can set the placeholder for the username field to Email/Member Name/8-digit ID and the placeholder for the password field to Enter your password.

Step 1: Add the component

Create a web application. For more information, see Create a web application.
In the Web application editor, click the component icon on the left.
Above the component list on the left side of the canvas, enter Text Box in the search box, and then drag the component onto the canvas.

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

(Optional) Step 2: Configure data source

In the Style panel on the right side of the web application editor, click Configure Data Source next to Display Data.
On the Data Source Configuration page, select a data type and complete its configuration.

The available data source types are Device, API, Application Push, and Page Variable.

Note
The data source must return a string.
Click OK.

The text box content updates in real time based on the bound data source.

Step 3: Configure styles

In the Style panel, configure the component's appearance.

Parameter	Description
Placeholder	Sets the hint text that appears before a user enters a value, such as "Enter a device name".
Character limit	Limits the number of characters a user can enter. A Chinese character is counted as a single character.
Default value	Sets the initial content to display in the text box.
Text wrap	Enables multi-line input.
Text style	Configures the font, font size, color, font weight, horizontal alignment, and vertical alignment.
Background color	Sets the background color of the text box.

Note

If the component is bound to a data source, the Placeholder and Default value settings are ignored.

Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure actions

Select the Interaction tab to configure events and actions. For more information, see Interaction configuration.

For example, you can configure an action such as Call Other Services to invoke an API when the component's value changes, thereby refreshing the data returned by that API.
Click the Preview icon in the upper-right corner of the page to view the displayed data or debug the component's actions.

Note
If the data source is a device, you can send the content that is entered in the text box to the device as a command. If the data source is an API, the text box displays the API data, and user input is typically used to trigger other actions rather than being saved.