Common Title

Overview

The Common Title widget displays the core content or key information of a module. You can use multiple Common Title widgets in a data dashboard to label different sub-modules.

Scenarios

Use the Common Title widget to add titles and descriptions to a visualization application, making the subject of each section immediately clear. The widget also supports interactions with other widgets to control which dimension views or data content are displayed.

Examples

• Static title

  

• Interactive scenario

  

• Hyperlink redirection

  

Prerequisites

• Create a data dashboard. You can use a template, use a blank canvas, or use AI to generate one.

• Your business data is prepared. For more information, see Data Source.

Add the Common Title widget

1. Access the DataV console.

2. On the Workbench page, in the Data Dashboards area, hover over the target dashboard and click Edit. The canvas editor opens.

3. In the navigation pane on the left, follow the steps in the figure to add the Common Title widget to the canvas.

You can also use the global search feature to add the widget.

Connect to business data

After you add the widget, you must connect it to a data source. Click the Common Title widget. On the Data Source tab in the right-side configuration panel, select a data source for the widget.

• The following table describes the data fields that the Common Title widget accepts.

  Field	Description
  value	(Optional) The content of the title. If this field is not empty, its value overwrites the configuration in the style settings. If this field is empty, the content from the Style > Basic Style > Title Content setting is used.
  url	(Optional) The hyperlink address for the title. If this field is not empty, its value overwrites the configuration in the style settings. If this field is empty, the URL from the Style > Interaction > Hyperlink Configuration > Hyperlink setting is used.

  The data structure and an example of a generic title are shown below.

  [
    {
      "value": "DataV Official Website",
      "url": "https://www.aliyun.com/product/bigdata/datav?spm=5176.28536895.nav-v2-dropdown-menu-0.d_main_8_2_0.2d5b586cgSLMNb"
    }
  ]

  In the preview or published view, you can click the widget to go to the specified link.

  

• This section describes the core configuration items for the data source.

  Configuration	Description
  Select Data Source	Supports various data types, such as CSV files, APIs, and different databases. For more information, see Supported data source types. Edit data fields in a visual table or in code.
  Configure Filter (Optional)	Customize filter code to transform, filter, display, and perform simple calculations on data. For more information, see Manage data filters.
  Configure Data Mapping	Map fields from the selected data source to the widget's fields. This enables real-time data matching. Click the icon to configure field styles.
  View Response Result	Displays the data connected to the widget in real time. When the widget's data source changes, this section shows the latest data. Click the data response result to view the data field code. Click View Example to see the array type and sample code that the data source accepts. You can write your fields based on the example. Other data request configurations: Disable Loading State: If you check this box, the widget's initial loading content does not appear when the widget updates or when you preview the data dashboard. Controlled Mode: If you check this box, the widget does not request data when it initializes. Data requests can only be started by the blueprint editor or by global variable events. Auto Update Request: If you check this box, the platform polls for data updates at the interval you set. If you do not check this box, you must refresh the page manually or use the blueprint editor or global variable events to trigger data updates.

Configure the Common Title widget

Click the Common Title widget to open the right-side configuration panel, where you can set basic styles, global variables, interaction events, and blueprint interactions.

{
    "value": "Title",
    "url": "https://www.aliyun.com"
}

[
  {
    "value": "Title",
    "url": "https://www.aliyun.com"
  }
]

    {      
      // Movement method. Absolute positioning: to, relative positioning: by. Default: to.
        "positionType": "to",
      // Specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation method.
      "animation": {
        "enable": false,
        // Animation delay in ms.
        "animationDuration": 1000,
        // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

Demo

This demo uses the carousel feature of the Tab List widget to dynamically update the Common Title widget.

1. Add widgets to the canvas.

   1. Access the DataV console.

   2. Select a data dashboard and click Edit to go to the canvas editor.

   3. From the widget library in the navigation pane on the left, add the Tab List and Common Title widgets to the canvas.

2. Configure the blueprint interaction.

   1. Click the icon in the upper-left corner of the page to open the Blueprint Editor.

   2. On the Layer Node tab on the left, hover over a widget and click the icon to add the widget to the main canvas.

      Perform this operation for both the Common Title and Tab List widgets.

   3. On the Logic Node tab on the left, hover over the serial data processing node and click the icon to add the node to the main canvas.

   4. Connect the widgets as shown in the following figure. When a user clicks a tab in the Tab List, the corresponding data is imported into the Common Title widget.

   5. Click the serial data processing node and configure its processing method.

      return [{value:data.content}];

3. Click Preview in the upper-right corner of the page to preview the result.

4. (Optional) To go to a specific tab, add a Condition node before the serial data processing node. The processing method is executed only when the condition is met. Otherwise, a default value is displayed. For example, you can prevent the content of the first tab from being displayed.

   • Condition node

     return data.id > 1;

   • Serial data processing: Condition met

     return [{value:data.content}];

   • Serial data processing: Condition not met

     return [{value: "This is the title data"}];

5. Click Preview in the upper-right corner of the page to preview the result.