By using AWS re:Post, you agree to the AWS re:Post Terms of Use
AWS re:Postre:Post

CloudWatch Dashboard: Is there a way to create a link to a specific Text widget?

0

I've got a CloudWatch Dashboard with several widgets on it. I'm currently using Text widgets to define "sections" of the dashboard. I would like to create a hyperlink to a specific Text widget. Is that possible?

If I create a Text widget with the following markup:

# Registrations

...it results in the following HTML:

<div class="cwdb-text-container-content">
    <h1 id="registrations">Registrations</h1>
</div>

Ordinarily I would expect to be able to append #registrations to the end of the URL and the browser would scroll me to the corresponding HTML element with that id. Unfortunately, I see that the URL for my specific dashboard already has a #-fragment in the URL (presumably used by the client-side JavaScript app). I've tried adding #registrations to different part of the URL (along with appending ;id=registrations) and nothing seems to work.

Got any suggestions?

Topics
Management & GovernanceNetworking & Content Delivery
Tags
Amazon CloudWatch
Language
English
AWS-User-3422629
asked 2 years ago166 views
1 Answer
0
<!DOCTYPE html>
<html>
<head>
    <title>Custom CloudWatch Dashboard Navigation</title>
    <style>
        .section {
            margin: 50px 0;
        }
    </style>
</head>
<body>
    <div id="dashboard">
        <h1 id="registrations" class="section">Registrations</h1>
        <p>Details about registrations...</p>
        <h1 id="metrics" class="section">Metrics</h1>
        <p>Details about metrics...</p>
    </div>
    <script>
        // Example script to navigate to a specific section based on URL fragment
        function navigateToSection() {
            const hash = window.location.hash.substring(1); // Remove the #
            const targetElement = document.getElementById(hash);
            if (targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth' });
            }
        }

        window.addEventListener('load', navigateToSection);
    </script>
</body>
</html>

AWS Documentation and Resources:

  1. CloudWatch Dashboards User Guide:

  2. CloudWatch API Reference:

Hikaru Nguyen
answered a month ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions

Relevant content