Search code examples
javascripthtmlazureazure-application-insightsazure-dashboard

Move to specific location in Azure Dashboard

I currently have dashboard showing health of production as whole and all specific services. But it takes a lot of unnecessary time to get to specific service.

I tried to solve this issue by adding Markdown Tile with html text that includes javascript function to scroll to specific spot on dashboard (on top of page in example):

<html>
  <body>
    <button onclick="scrollToTop()">
      Click to scroll to top
    </button>
    <script>
      function scrollToTop() {
        window.scrollTo(0, 0);
      }
    </script>
  </body>
</html>

image of tile in dashboard

But this seems to only scroll in this specific tile not whole window.

Only other solution I can think of is creating single dashboard for specific service and travel to them using link option in markdown(but this would create quite lot dashboards...)

My question is if my javascript solution is possible and I used it wrongly or there is different approach how to achieve it.

Solution

  • HTML content of the markdown tile is pre-processed by the Azure portal before it's rendered. This is done to make sure that customizations won't affect the security or layout of the portal. During that pre-processing, any part of the HTML that poses a potential threat is removed.

    The following types of content aren't allowed by the portal:

    • <script> tags and inline JavaScript evaluations
    • <iframe> tags
    • <style> tags

    So your JavaScript solution is not possible with the current version of Azure Portal.

    As an alternative, you can break down all tiles into logical groups and place them on separate dashboards. If there are too many dashboards and it is difficult to navigate between them using the standard dropdown menu, you can create a special dashboard for navigation and put all required links into one or multiple markdown tiles. Here is a simple example of how content of such markdown tiles can look like:

    <a href='https://portal.azure.com/#URL_1'>Dashboard 1</a>
<br/>
<a href='https://portal.azure.com/#URL_2'>Dashboard 2</a>
<br/>
<a href='https://portal.azure.com/#URL_3'>Dashboard 3</a>

    Markdown tiles