How to create a dashboard with links to management tools

[Atadi]

Hi guys,

I have been searching for an application dashboard that has links to all management consoles in our environment. I have tried and tested almost all known options available on the interweb but have yet to find the perfect solution. The closest I have gotten to a “perfect” solution was with Heimdall Application Dashboard. I was about to call it quits when I realized that this might be doable with our SquaredUp.

I therefore created a new dashboard and tried to add these links in a web content tile. A few things that posed a challenge right away were 1. no ability to add an icon to url’s 2. my lack of html knowledge.

These tiles are what I came up with so far:

And this is what I am trying to replicate:

Am I wasting my time or is there any chance, small or complicated as it may be, to achieve this in SquaredUp?

[Atadi]

This is what I am trying to replicate:

[shawn149]

Hello Atadi,

Yes, this is possible with SquaredUp with a little bit of HTML coding and the Web Content tile.

Here is the basic HTML you need to achieve the results you want (indented for readability):

<a href="https://www.address.of.mgmt.tool.com">
  <table style="width: 100%; height: 100%; background-color: #3e4245;">
    <tbody>
      <tr>
        <td style="width: 30%; text-align: center;">
          <img src="c:\website\images\icon1.png" alt="Embedded Image description" width="100%" />
        </td>
        <td style="width: 55%; text-align: left;">
          <h1><span style="color: #ffffff;">Mgmt Tool Dashboard</span></h1>
        </td>
        <td style="width: 15%; text-align: center;">
        	<img src="c:\website\images\arrow.png" alt="Click here to go to management tool" width="32" />
        </td>
      </tr>
    </tbody>
  </table>
</a>

Use one Web Content tile per management tool.

Be sure to update the following:

• The HTTPS address for the management tool.
• The source destination of the icon for the management tool. You can either put it in a shared directory within your website or you can convert the images to Base64 (which is what I did).
• Create your own arrow image.
• Update the descriptions for Screen Readers

When you are finished, your dashboard should look like this:

Here is the same dashboard in Dark Mode:

As I alluded to above, I have a working version of this dashboard. Let me know if would like a copy and I will private message it to you. I’m not posting it here because I converted all of the icons to Base64 and that makes for some very ugly-looking JSON!

Cheers!

[Atadi]

It’s working, sort of. Only one tiny thing I need to confirm.
What is the correct <img src= entry needed if I have created the following folder structure that contains the .png images?

C:\inetpub\wwwroot\SquaredUpv5\Custom\Logos\

So far I’ve tried <img src=“Custom/Logos/Cloudflare.png” and
img src=“file:///C:/inetpub/wwwroot/SquaredUpv5/Custom/Logos/Cloudflare.png”

but they don’t seem to work.

[Jelly]

The folder will likely be removed when you upgrade SquaredUp. Place your Custom\Logos folder in wwwroot instead of inside the SquaredUp directory.

Then you just need to use \Custom\Logos\Cloudflare.png

[Atadi]

Excellent! That did it.
Thanks for the swift reply.