Button

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

3. Above the component list on the left of the canvas, enter button to find the component, then drag it to the central canvas.

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

   After adding the component, select it on the canvas to configure its position, size, opacity, background color, text style, and border on the style tab in the properties panel on the right.

Step 2: Configure the data source

In the style tab on the right of the web editor, configure the Button Content.

• Static data

  Edit the content in the input box to the right of Button Content.

  The button content displays as static text on the page.

• Dynamic data

  Click the data source icon to the right of the Button Content input box, select a data source type, complete the configuration, and click OK.

  Available data source types include device, API, application push, and page variable.

  The text updates in real time based on the associated data source.

  Note

  • The component supports string return values.
  • If you provide both static data and a dynamic data source for the Button Content, the dynamic data takes precedence.

Step 3: Configure the style

1. Optional: Set the background color, text style, and border style.
   Many style properties can be bound to data sources, including device, API, and application push. The Color property, however, supports only API and application push data sources.

   The value returned by the data source must match the required format.

   Parameter	Format
   Font size	Integer.
   Background, text, and border color	Boolean or enumeration. If the data source is a Device, you can only select a Property. Supported data formats are single-precision number, double-precision number, integer, Boolean, and enumeration. In this case, you can set the display color of the widget content when the device is offline. If the data format is numeric, you must use Convert integer to Boolean or Convert number to enumeration to set the display colors for different values. Note When you use this widget in a repeater list, to set the Color and the corresponding display color for when the device is offline based on a device's TSL model property, the widget's data source must be associated with a Device. Configure the data source as follows: If the repeater list's data source is a Device, the data source for the widget's Color can be set to Parent widget data source or Device. If the repeater list's data source is not a Device, the data source for the widget's Color must be a Device.
   Font weight	Standard and Bold.
   Border thickness	Integer. The value must be in the range of 0 to 100.

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

Step 4: Configure interactive actions

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

   For example, you can configure the widget to perform the Open Link action when it is clicked. You can also configure how the link opens.

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