Number input

Step 1: Add the component

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

2. In the mobile application editor, click the component icon on the far left.

3. (Optional) Add column components to set up the layout of your application page. For more information, see Horizontal Column and Vertical Column.

4. In the search box above the component list on the left of the canvas, enter number input to find the component, then drag it onto the canvas.

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

   After you add the number input, the style configuration panel on the right displays its default properties, including size (Medium), minimum value (0), maximum value (100), step (1), default value (0), text color (#222222), border color (#DDDDDD), and fill color (#FFFFFF).

(Optional) Step 2: Configure a data source

Configure a data source if you want the component to display and set a device property, or to show data from an API.

1. On the style panel, click Configure Data Source under Display Data.

2. On the Data Source Configuration page, configure the data source.

   Available data source types include device, API, and push notification.

   Note

   The data returned by the data source must be a single-precision floating-point number, double-precision floating-point number, or integer. If you use a device data source, the selected property must also be read-write.

3. Click OK.

   The number input's content updates in real time based on the bound data source.

Step 3: Configure styles

1. On the style panel, set the size, maximum value, minimum value, step, default value, and display style.

   Note

   • The step must be an integer.

   • The default value applies only when no data source is configured. If a data source is configured, the component uses the value from that data source instead.

   • If a device data source is configured, the minimum value, maximum value, and step use the corresponding settings from the device property.

2. Adjust the component's height and width, and its position on the page.

   For more information, see Common Styles.

Step 4: Configure interactions

1. On the interaction tab, click Add Interaction, then set the event and action.

   The component supports value change, click, and double-click events. For example, you can set the event to value change and the action to Refresh Component, then select a target component. When the value in the number input changes, this action refreshes the data in the specified component.

   For detailed instructions, see Interaction configuration.

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

   Note

   • If the component is bound to a device data source, you can send commands to the device. The component sends the value you enter or adjust to the device.

   • If the component is bound to an API data source, user input and adjustments have no effect.