Free Card

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

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

4. In the search box above the component list on the left of the canvas, enter Free Card, find the component, then drag it to the canvas in the center.

   Alternatively, click the Free Card component, select a preset Free Card template from the panel that appears, then drag the template onto the canvas.

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

Step 2: Configure component style

1. On the right of the mobile application editor, on the Style tab, adjust the component's width, height, and position on the page.

   For more information, see Common styles.

2. On the canvas, double-click the Free Card component.

3. On the right of the component editing page, on the Style tab, configure the Free Card's display style.

   Parameter	Description
   Container style	Set the fill color or image for the Free Card.
   	Set the thickness, color, style, and corner radius of the Free Card's border.

Step 3: Configure nested components

You can either use a Free Card template or manually add and configure components within the card.

1. On the component editing page, delete the components from the Free Card template.

   On the canvas, click the component you want to delete. A blue dashed selection box with control handles appears around it. Then, delete it.

2. Drag the desired components from the component list on the left into the Free Card and configure each component's style.

   For more information on component configuration, see the documentation for each component in the Mobile Visualization Development > Components directory.

Step 4: Configure data source

1. Click a component within the Free Card, such as a dashboard component. On the right, on the Style tab, click Configure Data Source next to Show Data.

   Note

   How you access the data source configuration page varies by component. For more information, see the documentation for each component in the Mobile Visualization Development > Components directory.

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

   The dashboard component supports the following data source types: device, API, static data, and application push.

   Note

   Supported data source types vary by component. For more information, see the documentation for each component in the Mobile Visualization Development > Components directory.

3. Click OK to complete the configuration.

4. Click Save in the upper-right corner of the page.

5. Click Back to Page in the upper-left corner of the component editing page to return to the mobile application editor. You can then preview and debug the component's data and visual effects.

   For more information, see preview and debug.