Image Tiles

Image tiles can be used to display images, such as company logos or architecture diagrams, on dashboards. The Live Diagram mode (SVG images only) allows you to show the current health state of workspaces, dashboards, or objects on your diagrams. Select the Image icon to start configuring the tile.

  1. Upload an image or Enter an image URL
    By default, you can upload an image from your device to SquaredUp. This will be hosted securely within your organization. Alternatively, you can enter a URL to an image you’d like to display.
  2. Live Diagram
    If the uploaded image is an SVG file, and contains hyperlinks to SquaredUp objects you’ll have the option to Show health state on the diagram. See Image tiles.
    1. Fill or Icon style
      When Show health state is enabled, you can choose to either display the health state as a colored fill for the linked object or to overlay a success / warning / error icon on the linked object.
  3. Image Description
    Optionally, enter a description for the image. This will be shown to screen readers and if you hover over the image on the dashboard.
  4. Click Save.
    The image will be rendered to fill the tile (without stretching). You can resize the tile by dragging the bottom right corner of the tile. The image will automatically scale should you wish to resize the tile.

Creating a live diagram

Live diagrams display the health state of workspaces, dashboards or objects from SquaredUp. For this functionality to be available an SVG file containing hyperlinks to the relevant objects should be uploaded.

  1. Using your preferred SVG editor (for example, https://diagrams.net) or Microsoft Visio create your diagram.
  2. In SquaredUp, browse to the workspace, dashboard, or object for which you’d like to show live health state for, and copy the URL from your browser’s address bar. For example, https://app.squaredup.com/dashboard/dash-12345abcdef.
  3. In the SVG editor, select the relevant shape and add a hyperlink to the link you copied (for example, in diagrams.net right-click and select Edit link).
  4. Export the SVG from the editor and upload the file to SquaredUp via the Image tile.

    You may want to add some border or padding to the SVG, and most diagrams work best when exported with a transparent background.

  5. Ensure Show health state is enabled. You should see the color of the shapes change to reflect the current health state of the object and the shape will also be hyperlinked to the object for drilldown.

Troubleshooting live diagrams

  • If you are using any external images within your SVG, ensure these images are embedded. Any external references will be blocked due to browser security policies.
  • When hyperlinking a shape in SVG it’s worth noting that SquaredUp will select the first child element to when using Fill mode.

Formatting image tiles

This one minute video shows you how to format your text and image tiles once they have been configured:

Was this article helpful?

Have more questions or facing an issue?
Submit a ticket