Manage Page Parameters¶
In a DTV single-page application, navigators automatically produce a set of parameters that drive widget interactions. In practice, however, navigator parameters are often not the right format or granularity for your needs. For example:
The time navigator produces a full timestamp, but a chart title only needs the year.
A new value needs to be derived by combining multiple navigator parameters.
Custom parameters are designed for exactly these cases. Using a JavaScript script, you can transform existing navigator parameters into the values your page actually needs.
At runtime, Global parameters = Navigator parameters + Custom parameters. Both types are available for widget linkage, calculated fields, title references, and more.
Open Parameter Panel¶
In the single-page application editor, click Others → Parameters in the top-right corner to open the Parameter Panel.
The panel lists all navigator parameters and any custom parameters already configured for the page.
Add Custom Parameters¶
Click Edit Custom Parameters in the panel and complete the following steps:
1. Define Parameter Information¶
Click Add Custom Parameter on the right side of the pop-up and fill in the following information:
Field |
Description |
|---|---|
Parameter Name |
Display name shown in the panel. Supports internationalization. |
ID |
The |
Parameter Example |
A sample value to help others understand the expected format. |
Description |
Explains the purpose of the parameter. |
2. Write Script¶
The script is a JavaScript function that takes the navigator parameters as input and calculates the values of custom parameters. It runs automatically whenever navigator parameters change, updating the custom parameter values.
The following built-in variables are available:
Variable |
Description |
|---|---|
|
A JS object containing all navigator parameters, e.g. |
|
The current language, e.g. |
|
Console log output, same usage as |
The script must end with a return statement that returns a JS object whose keys are the full custom parameter IDs (including the _DT_ prefix).
Note
Keys in the return object must include the _DT_ prefix and match the parameter ID exactly, otherwise the parameter will not receive its value.
Example: The time navigator produces startTime/endTime in YYYY-MM-DD HH:mm:ss format. To extract just the year:
var startYear = null;
var endYear = null;
if (global.startTime) {
startYear = new Date(global.startTime).getFullYear();
}
if (global.endTime) {
endYear = new Date(global.endTime).getFullYear();
}
return {
_DT_startYear: startYear,
_DT_endYear: endYear
};
3. Debug Script¶
Use log or console.log to print intermediate values to the browser developer console and verify your script logic. If log output does not appear, enable debug mode by running the following command in the browser console and then refreshing the page:
localStorage.setItem("dtv_debug", "true")
Edit and Delete Custom Parameters¶
Click Edit Custom Parameters in the panel, locate the parameter in the list, and click its inline edit or delete icon.
Edit: Modify the name, ID, parameter example, description, or script logic.
Delete: Remove parameters that are no longer needed.
Navigator parameters cannot be edited or deleted.
Use Parameters¶
Once configured, custom parameters and navigator parameters are available in the following contexts:
Context |
How to use |
Reference |
|---|---|---|
Widget navigator linkage |
When configuring linkage between a widget and a navigator, select the target parameter from the parameter list. |
|
Calculated fields |
When creating or editing a calculated field in widget data configuration, select the parameter from the parameter list. |
|
Widget title |
When configuring a widget title, select Dynamic and reference the parameter using |
|
Title link URL |
When configuring a title interaction, set Actions to Click Title to Jump, Redirection Method to URL, and reference the parameter in URL using |