TL;DR Deep Linking Dashboards

By Anais Dotis-Georgiou / Product
Oct 04, 2022

If you’re an InfluxDB and InfluxDB UI user, you’ve almost certainly created dashboards. However, if you’re building dozens of dashboards in the InfluxDB UI, you might have come across the need to deep link related dashboards. In this tutorial we’ll learn how we can use the table view with Flux, string interpolation, and variables to deep link users to other dashboards.

Simplest example of deep linking dashboards

The simplest way to deep link a dashboard is to navigate to the dashboard that you want to link to and partially copy the URL.

Next, go ahead and use the following Flux to generate a table in a new dashboard with the link to the Earthquake Command Center dashboard.

import "array"

link = "https://us-west-2-1.aws.cloud2.influxdata.com/orgs/0437f6d51b579000/dashboards/0a13a76f3ab83000"

array.from(rows: [{"Page Link": "View the Page: ${link}"}])

Deep linking while preserving time range

While the example above might be suitable for most situations, you might also want to deep link to another dashboard and preserve the time range that you’re currently using to view your first dashboard. Here we use the http.pathEscape() function in conjunction with string interpolation and variables to convert the dashboard start and stop times to variables in the dashboard URL link. The use of the http.pathEscape() function to URL-encode strings by escaping special characters and replacing non-ASCII characters. The use of this function in the following example is redundant. However, it’s worth being aware of in case you want to build and link other URLs that require URL-encoding.

import "array"
import "http"

link = "https://us-west-2-1.aws.cloud2.influxdata.com/orgs/0437f6d51b579000/dashboards/0a13a76f3ab83000"
startTime = http.pathEscape(inputString: "${v.timeRangeStart}")
stopTime = http.pathEscape(inputString: "${v.timeRangeStop}")
vars = "?lower=${startTime}&upper=${stopTime}"
dashboardLink = "${link}${vars}"
array.from(rows: [{"Page Link": "View the Page: ${dashboardLink}"}])

You can take this a step further and create custom variables for your orgID and dashboardID as well to make deep linking dashboards in multiple places more streamlined. To learn more about creating your own custom variables, check out the following documentation.

Conclusion

I hope this blog post inspires you to take advantage of Flux to deep link dashboards. If you need any help, please reach out using our community site or Slack channel. I’d love to hear about what you’re trying to achieve and what features you’d like the task system in InfluxDB to have. Finally, If you’re developing a cool IoT application on top of InfluxDB, we’d love to hear about it, so make sure to share it on social using #InfluxDB! Additionally, feel free to reach out to me directly in our community slack channel to share your thoughts, concerns, or questions. I’d love to get your feedback and help you with any problems you run into!