Text

Application example

When you develop a web visualization application, use the Text component to set the page title.

Step 1: Add 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, enter Text and drag the component to the canvas.

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

   

Step 2: Configure data source

In the web application editor, in the Style panel on the right, configure the Text component's content.

• static data

  In the Text Content input field, enter your content. Alternatively, double-click the Text component on the canvas to enter content.

  The content is then displayed statically.

• dynamic data

  Click the data source configuration icon to the right of the text input field, select a data source type, complete the configuration, and then click OK.

  Available data source types are device, API, App Message, and Page Variable.

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

  Note

  • The component supports the following data types from a data source: float, double, integer, and string.

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

  • If the data source is device, you can configure the text to display when the device is offline.

    When using this component in a Repeat List, to configure its display for when the device is offline, you must associate its data source with a device. The configuration is as follows:

    • If the data source of the Repeat List is a device, this component's data source can be set to parent component data source or device.

    • If the data source of the Repeat List is a non-device type, this component's data source must be device.

Step 3: Configure style

1. In the web application editor, on the Style tab in the right-side pane, configure the component's font, font size (custom values supported), color, font weight, line height, and Alignment.

   Multiple parameters on the Style tab support dynamic data sources. Available data source types are device, API, App Message, and Page Variable. However, the component visibility and color parameters only support device, API, and App Message data sources.

   Each parameter requires a specific data format. The data returned by your data source must match the required format.

   Parameter	Format
   component visibility	A boolean or enum type. Set the corresponding values for Visible and Invisible. If the data source is a device, you can only select a property from the thing model. Supported data formats are float, double, integer, boolean, and enum. In this case, you can configure whether the component is visible when the device is offline. If the data source returns a numerical data type, you must use Convert Integer to Boolean or Convert Number to Enum to configure the visibility. Note In a Repeat List, to configure component visibility based on a thing model property (including the offline state), the component's data source must be a device. The configuration is as follows: If the data source of the Repeat List is a device, the data source for component visibility can be set to parent component data source or device. If the data source of the Repeat List is a non-device type, the data source for component visibility must be device.
   font	A string type. The data returned by the data source must be the name of a font installed on the client machine.
   font size, line height	A float, double, or integer type.
   color	A boolean or enum type. If the data source is a device, you can only select a property from the thing model. Supported data formats are float, double, integer, boolean, and enum. In this case, you can configure the display color of the component's content when the device is offline. If the data source returns a numerical type, you must use Convert Integer to Boolean or Convert Number to Enum to set the colors for different values. Note In a Repeat List, to configure the color based on a thing model property (including the offline state), the component's data source must be a device. The configuration is as follows: If the data source of the Repeat List is a device, the data source for the component's color can be set to parent component data source or device. If the data source of the Repeat List is a non-device type, the data source for the component's color must be device.
   font weight	Normal and Bold.

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 component's Interaction tab to configure events and actions. For more information, see Configure interactions.

   For example, you can configure the component to trigger the open link action on click. This action allows you to specify how a link opens and what it displays.

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