Number box

Example

For example, you can use a number box to display temperature data from a sensor. In preview mode or in the published web app, you can set a new temperature and send it to the device.

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. In the search box above the component list on the left of the canvas, enter number box to find the component, then drag the component to the canvas.

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

   After selecting the component, configure its properties on the Style tab in the properties panel on the right. These properties include coordinates, dimensions, component name, visibility, opacity, data source, minimum value, maximum value, step, default value, and text styles (font, font size, color, font weight, and alignment).

Step 2 (optional): Configure data source

To have the component display and set a device property or show data from an API, configure a data source.

1. In the Style panel on the right side of the web application editor, click Configure Data Source next to Display Data.

2. On the data source configuration page, select and configure a data source.
   The supported data source types are Device, API, and App Push.

   Note

   • The data source must return an integer, single-precision number, or double-precision number.
   • If the data source is a device, you can only bind the component to a read/write device property with a data type of integer, single-precision number, or double-precision number.
3. Click OK.
   The linked data source updates the number box value in real time.

Step 3: Configure styles

1. In the web app editor, go to the Style tab on the right to set the maximum value, minimum value, step, default value, and text styles.
   Note If the data source is a device:

   • Minimum value, Maximum value, and Step default to the device property's settings.
   • The updated minimum and maximum values cannot exceed the device property's configured range.
   • If the device property is an integer, Step must be an integer.
   • The component displays device data directly, so the Default value setting has no effect.

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

Step 4: Configure interactions

1. 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.

2. Click Preview in the upper-right corner of the page to view how the component displays data or debug its interactions.
   Note If the data source is a device, you can send commands by entering a value or using the adjustment buttons. If the data source is an API, you cannot enter a value or make adjustments.