DataV:Button

Component overview

The button is a control widget that, when clicked, triggers specified operations such as navigation, submission, and selection or cancellation. It allows customization of color, size, label content, and hyperlink, and can interact with other widgets to display linked pages or prompt information in a visualization application.

Scenarios

Buttons are commonly used in visualization applications for interface switching, hyperlink navigation, and executing submission or confirmation instructions.

Effect display

• Static Button

  

• Hyperlink Navigation

  

• Interactive Scenario

  

Prerequisites

• A data dashboard is available that supports creation using a template, a blank canvas.

• Business data is ready for use. For more information, see Data Source.

Add button

1. Access the DataV console.

2. Navigate to Workbench > > All Applications > > Data Dashboard and select the desired dashboard to access the canvas editing page.

3. In the left-side navigation pane, under the Component Library > Control > Button Class list, click the Button widget to add it to the canvas.

You can also use global search to add related widgets.

Integrate business data

After adding the widget, integrate the prepared business data for display. Click the button and in the right-side Data Source tab, select the data for the widget to render.

• The data fields received by the button are as follows.

  Field	Description
  value	This data is output when the Click Button Event is triggered. For more information about events, see Blueprint Interaction.

  An example data structure is as follows.

  [
    {
      "value": "Submit"
    }
  ]

• The key configuration items for the data source are as follows.

  Configuration Item	Description
  Select Data Source	Supports integrating various types of data such as CSV files, APIs, and various databases. For more information, see Data Source. You can edit data fields using a visual table or code.
  Configure Filter (Optional)	Used to customize filter code to achieve data structure transformation, filtering, display, and simple calculations. For more information, see Manage Data Filters.
  Configure Data Mapping	Used to map fields from the selected data source to the corresponding fields of the widget to achieve real-time data matching. Click the icon to configure field styles.
  View Response Results	Used to display the data integrated into the widget in real-time. When the widget data source changes, the latest data will be displayed here. Click the data response result to view the code of the data fields written. Click to view the example to see the array type and code example received by the data source. You can refer to the example to write related fields. Other data request configurations: Disable Loading State: When selected, the loading content during widget initialization will not be displayed when updating or previewing the data dashboard. Controlled Mode: When selected, the widget will not request data in the initialization state. At this time, data requests can only be initiated through the blueprint editor or global variable events. Automatic Update Request: When selected, the platform will dynamically poll and update data according to the polling time you set. If not selected, you need to manually refresh the page or trigger a request to update data through the blueprint editor and global variable events.

Configure button

Click the button widget to configure its basic style, global variables, and interaction occurrences in the right-side panel. This includes advanced configuration and blueprint interaction configuration.

{
  "value": "Submit"
}

[
  {
    "value": "Confirm"
  }
]

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

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