Updated on 2023-03-09 GMT+08:00

Creating Screens Quickly (Interaction)

You can use the interaction function to implement data linkage between components on screens.

This example demonstrates how to implement data linkage between components through geographical search and bar charts. The general procedure is as follows:

  1. Adding and Configuring Components
  2. Previewing and Publishing Screens

Prerequisites

You have logged in to the DLV console and created a screen using a blank template.

Adding and Configuring Components

  1. Open the screen development page, click the Interaction icon, and select Geography Search in the Components list.

    Figure 1 Selecting the geographical search component

  2. On the Pattern panel, configure the geographical search component. In this example, use the default settings.

    Figure 2 Configuring the geographical search component

  3. Switch to the Data panel and set the data of the geographical search component.

    Figure 3 Setting the data of the geographical search component

  4. Switch to the Interaction panel and define and use interaction variables.

    Figure 4 Defining and using interaction variables

  5. In the component list on the left, choose Charts > Bar.

    Figure 5 Selecting a bar chart component

  6. On the Pattern tab page, configure the bar chart pattern. This example uses the default settings.

    Figure 6 Configuring the bar chart pattern

  7. Switch to the Data tab page and configure the bar chart.

    1. Configure field mapping and select a data source type. As shown in Figure 7, the component is associated with dynamic data.
      Figure 7 Associating with dynamic data
    2. Press Shift+$ to reference the interaction variable ${name} defined in 4.
      Figure 8 Referencing the interaction variable

Previewing and Publishing Screens

  1. In the upper right corner of the screen development page, click to preview the screen.
  2. If you reset the geographical location in the geographical search, the bar chart displays only the data of the corresponding location.
  3. After ensuring that interaction works, click in the upper right corner of the screen development page, configure publish parameters, and then share the screen with other users.

    Figure 9 Publishing and sharing the screen