Setting URL Parameter Interaction

After setting the hash parameter, you can view the data specified by the hash parameter from the dynamic data sources (API data source or database data source).

Configuring URL Parameter Interaction

The following uses the API data source and database data source as an example to describe how to implement URL interaction.

Create a screen and add a component to the canvas. On the Data panel, set Data Source Type to the dynamic data source, such as API or Database. Configure the data source, and add a URL interaction variable in format of ${Interaction variable name}.
You can add URL interaction variables based on service requirements. The following are some simple examples for reference:
- For API data sources, use URL interaction variables. The following are URL configuration examples:
  - Example 1: Use a URL interaction variable in the URL of the API data source:
```
https://api.test?var=${var}
```
    Figure 1 URL interaction variable
  - Example 2: Use multiple URL interaction variables in the URL of the API data source and use ampersands (&) to separate variables.
```
https://api.test?var=${var}&var2=${var2}
```
- For database data sources, use URL interaction variables in SQL statements. The following are configuration examples:
  - Example 1: Use multiple URL interaction variables in SQL statements.
```
select * from ${var} where var2=${var2};
```
    Figure 2 URL interaction variable: SQL
  - Example 2: Use multiple URL interaction variables in SQL statements.
```
select ${var} from ${var2};
```

After the link is configured, click

in the upper right corner of the page to preview the screen. Add an interaction variable at the end of the URL of the screen preview page and access the page again to view the drilldown effect of the link. If drilldown effect is correctly displayed, go to the next step.

For example, the URL of the screen preview page is as follows:

https://console.huaweicloud.com/dlv/vision/preview/?projectId=9c3043ab4dac4055888643b331a0b227&locale=zh-cn&screenId=ff80808270c25d5d0170c261090b0000&name=dlv-demo&region=cn-north-7&workspaceId=9c3043ab4dac4055888643b331a0b227

Add the following interaction variables to the end of the URL of the screen preview page:

Example 1:

https://console.huaweicloud.com/dlv/vision/preview/?projectId=9c3043ab4dac4055888643b331a0b227&locale=zh-cn&screenId=ff80808270c25d5d0170c261090b0000&name=dlv-demo&region=cn-north-7&workspaceId=9c3043ab4dac4055888643b331a0b227#var=value

Example 2: If a URL contains multiple hash parameters, use ampersands (&) to separate them.

https://console.huaweicloud.com/dlv/vision/preview/?projectId=9c3043ab4dac4055888643b331a0b227&locale=zh-cn&screenId=ff80808270c25d5d0170c261090b0000&name=dlv-demo&region=cn-north-7&workspaceId=9c3043ab4dac4055888643b331a0b227#var=value&var2=value2

Publish the screen and obtain the screen URL. For details, see Publishing Screens.
For example, the URL of the screen is as follows:
```
https://console.huaweicloud.com/dlv/vision/share/?id=qwertyuiioapsdgfhj123456789c&locale=en-us&region=cn-north-1
```
In the URL obtained in the previous step, set the default value of the variable by setting the hash parameter. The parameter name is the same as the URL interaction variable name set in the data source.
Example 1:
```
https://console.huaweicloud.com/dlv/vision/share/?id=qwertyuiioapsdgfhj123456789c&locale=en-us&region=cn-north-1#var=value
```
Example 2: If a URL contains multiple hash parameters, use ampersands (&) to separate them. For example, the following example sets the interaction variables var and var2 at the same time:
```
https://console.huaweicloud.com/dlv/vision/share/?id=qwertyuiioapsdgfhj123456789c&locale=en-us&region=cn-north-1#var=value&var2=value2
```
In the browser or application code, use the URL of the screen to which the hash parameter is added to access the screen data specified by the parameter.
Use the URL in the preceding example to access the screen. When the page is opened, the value of the interaction variable var of the screen component is set to value, and the value of the interaction variable var2 is set to value2.