Careful friends may find DataV's editor on the right side of an additional “Interactive” tab, there is no curiosity about what it is doing?
Next, I will lead you to find out!
Configuration
Getting Started
First of all, let's review what is callback id, in DataV callback id refers to the parameter that a component passes to other components when responding to a user action or automatically triggering an update, and this parameter can be used as a dynamic variable when querying data in other components. For example, if the user clicks on a province in the map component, the grouped bar chart will take the selected province as a parameter to query the statistics of each city, or when the time in the timeline component changes, the rotating list component will take the time as a parameter to get the new data.
This time, we provide an independent editing block on the basis of callback id to facilitate you to use this feature of callback id clearly and quickly.
Take the number flipper as an example, this component can provide a parameter value (“field” in the following figure, corresponding to the field in the data source) to other components when the number changes, when we click the “Enable” button in the upper right corner, the system will automatically set a variable with the same name value (“Bind to Variable” in the following figure). When we click the “Enable” button on the right corner, the system will automatically set a variable with the same name, value (“Bind to Variable” in the figure below), to point to this parameter.
Of course, you can also change the name of the variable in the “Bind to Variable”, as shown in the figure below, we change the value to income, then when the variable is used in other components, you can use income to get the parameter. With this feature, we can set different variable names for different components to achieve the purpose of differentiating the use of different parameters.
Advanced
1. Setting up custom fields
In addition, in the data source configuration of the component, we also support to set the data other than the required fields of the component, for example, we set an additional id field for the number flipper, the value is 123.
At this time, go back to the place of editing “Interaction”, click “New Field”, fill in the id in the “Field” field, and fill in the variable name you want to set in the “Bind to Variable” field. name. Note that the variable will only take effect when both “Field” and “Bind to Variable” are filled in at the same time.
2. Setting the default value of the callback id.
We can set the default value of the callback id by setting the request parameter in the url, such as:
http://datav.aliyun.com/screen/000000?myid=123
Note: 000000 means screen id
When accessing through this url, the value of callback idmyid is already set to 123 when the page is opened.
Multiple callback ids are connected to each other using the & symbol, e.g.
http://datav.aliyun.com/screen/000000?myid=123&income=1000
Note: 000000 means screen id
The default values of both callback idmyid and income are set here.
The use of
The use of callback ids remains the same as before, just use the :variable name (e.g. :abc) in the data source.
Example: SQL.
select :name as value
select A from table where year = :name
API.
http://api.test?income=:income&id=:myid
One more thing
We've added a callback parameter auto-completion feature, which means that when configuring a data source, just type : and the editor will prompt you for the names of all the variables that have been configured in the current screen, so you can use the up and down buttons to select them, and the enter key to confirm them. When there are a lot of interactive components in the screen, this feature is not very sweet, you don't need to go to one by one point component to check what variables are set before.
Use Cases
Big Data Cuisine - Finding Delicious Tastes on the Map
DataV brings you a review of national air quality changes before and after the Chinese New Year