How to use callback IDs to enable filter interaction between widgets

更新时间:
复制 MD 格式

This topic describes how to use a callback ID to enable filter interaction between widgets in the DataV console. When you click one widget, another widget responds to that action.

What is a callback ID

A callback ID is a parameter variable. It controls how parameters are passed between widgets to enable interaction. For example, in the following figure, when you click the ticker board widget, its current value is passed to other widgets through the income field.

How to set a callback ID

  1. Log on to the DataV console.

  2. On the My Visualizations page, click Edit above the project that you created.
  3. Select the Ticker Board widget. Click the Interaction tab in the editor on the right of the canvas.

  4. Select the Enable checkbox to the right of the On Data Change event.

    image

  5. In the Bind to Variable field, change the variable name from value to income.

    After this is configured, other widgets can use income to retrieve the corresponding parameter value.

How to use a callback ID

  1. Select another ticker board widget and click the Data tab.

  2. Click Configure Data Source and set the data source type to Database.

  3. In the SQL input box, enter select :income as value.

  4. Click the image icon in the upper-right corner of the page to preview the results.image

  5. When you click the upper ticker board, the value of the lower ticker board updates to match it. This confirms that the data is retrieved using the callback ID.回调ID_Trim

FAQ

Q: In the canvas editor, I configured a callback ID, but the callback value cannot be retrieved. This causes the data query to fail. What should I do?

A: The canvas editor cannot trigger events to retrieve callback values. This causes the data request to fail. Use one of the following two methods to view the return value of the request:

  • Preview page: Check the return value of the request on the Network tab of the browser console, or view the value directly in the widget.

  • Edit page: Add test parameters to the visualization application URL to test the data. Use the following format:

    https://datav.aliyun.com/admin/screen/99999?parameter_name=parameter_value