Button

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 Components icon on the far left.

3. (Optional) Add a column component to configure the application page layout. For more information, see Horizontal and Vertical Columns.

4. In the search box above the component list on the left side of the canvas, search for Button and then drag the component onto the canvas.

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

   After you drag the button component onto the canvas and select it, the properties panel appears on the right. This panel contains the Style and Interaction tabs. On the Style tab, you can configure properties such as Button Content, Button Type (Normal), Button Size (medium), Font Size, Text Color, Stroke Color, Fill Color, and Click Color.

Step 2: Configure the data source

In the Style tab on the right, configure the Button Content.

• Static data

  In the Button Content field, enter your static text.

  The content then appears statically on the page.

• Dynamic data

  Click the configure data source icon to the right of the input box, select a data source type, complete the configuration, then click OK.

  Available data source types include device, API, application push, and page variable. The associated data source updates the button content in real time.

  Note

  • The data source for the button's content must return a string.

  • If you configure both static data and a dynamic data source for the Button Content, the dynamic data takes precedence.

Step 3: Configure the style

1. On the Style tab, configure the component's appearance.

   Parameter	Description
   Basic	Configure the button's type, size, font properties, and horizontal fill behavior.
   Style	Configure the colors for the button's text, stroke, fill, and click state.

2. Adjust the component's position on the page. For more information, see General styles.

Step 4: Configure interactions

1. On the Interaction tab on the right side of the mobile application editor, click Add Interaction to set an Event and an Action.

   Supported events include Click and Double-click. For example, you can set the Click event on the component to trigger the Refresh Component action, which refreshes a specified component's content.

   For details, see Interaction Configuration.

2. Preview and debug the data and style of the component. For details, see Preview and Debug.