Dashboard designer

The dashboard designer allows you to configure and edit the layout of the tiles on the page.

How to create a dashboard

The dashboard is saved as you go along so there's no need to save your changes. You can find your dashboard by clicking on the right-hand menu ☰ > system > unpublished. Draft dashboards are not visible to anyone other than you.

You can toggle between Edit mode and View mode by clicking the edit this dashboard button at the top right.

This article covers:

You might like to watch this 2 minute introduction to the dashboard designer:

Dashboard layout

Select a template

When you create a new dashboard or perspective you will be asked to select a template:

This instantly gets you started with preconfigured layout that you can change as you require.

So you might choose the Three tiles template:

Add new tile

You can add a new tile to any column:

Add column

You can add a new column to the left or right of any existing column:

Tiles added in a column are aligned by their left-hand edge. Adding a row will allow you to align the tops of the topmost tiles in the columns in that row (see below):

Resize columns

Hovering between columns shows the resizing arrow. You can drag the column to any width or snap to the 25%, 33%, 50%, 66% or 75% lines.

Note: Hold down the shift key while resizing to stop the column snapping to the preset widths.

Insert new row

You can add a row before or after any existing row.

Move tiles

Tiles can be dragged and dropped anywhere on the dashboard. Hover over a white area at the top of the tile and you will see the 4-arrow movement cursor:

Hold the left mouse button down and drag the tile around the dashboard. A thumbnail of the tile is shown so you can more easily see a gray area indicating where the tile can be dropped.

You can drag it to the top or bottom of the dashboard to create a new row, but you'll need to create a new column before dragging if you want the tile to be added to a new column.

Tile buttons

Copy tile to clipboard & Paste tile from clipboard

The configuration of a tile can be copied and pasted between different dashboards. Tiles can be copied between instances of the same edition, for example from one instance of DS Standalone to another of DS Standalone, but not across different editions.

The Copy tile to clipboard button is also available in view mode (when you're not editing a tile) which is useful if you don't have edit rights to the dashboard. Hover over the tile title bar and the Copy tile to clipboard button will appear at the top right of the tile.

When pasting the tile configuration, for the first time, the user will be prompted to grant the browser permission to view clipboard. Once clipboard permission has been granted for a site a clipboard icon appears in the browser address bar allowing the user to manage access via the browser settings.

The tile copy and paste functionality only works if the site is secure (using HTTPS), as this is a requirement for browsers following the W3 spec: Clipboard API and events. Firefox does not support the paste operation. See Mozilla: Browser Compatibility.

Delete tile

Individual tiles can be deleted using the Delete tile button at the top right of the tile:

There is no option to delete a whole row or column, instead you should delete or move individual tiles until the row or column is empty and is automatically removed.

When the last tile on a dashboard or perspective it removed the select a template option is shown.

Split tile

The Split tile button splits one tile into two tiles. This is different to adding a column, and is more like creating nested columns within the existing column.

The benefit of using split tile is that you can add a tile below the split tiles that spans the width of both. To add a tile above the split tiles, first add a full width tile below them, then drag it up to position it above them.

The animation below shows how the split tile option can be used with add column and add tile:

After adding a split tile you can add further columns by using the add column button (rather than splitting again).

Clone tile

Cloning a tile copies the tiles configuration and creates a clone of that tile below the existing tile. You can then edit the tile configuration as required.

Edit tile & Configure tile

The cog or Edit tile button takes you into the configuration settings for the tile.

There are detailed articles for each of the different tiles, that take you through all the configuration options and a walkthrough to get you started.

For more information about how to configure each tile type see the list of tile articles here:

SquaredUp DS Standalone > Dashboarding > Tiles

Publishing your dashboard

The dashboard is saved as you go along so there's no need to save your changes. You can find your dashboard by clicking on the right-hand menu ☰ > system > unpublished. Draft dashboards are not visible to anyone other than you.

A newly created dashboard will not be visible to others until it is published.

Only admins can publish dashboards, unless you have been given author permissions to a Team Folder see Team Folders

If you made changes to an existing dashboard, the changes will only be visible to others after you published the dashboard again.

You can identify a dashboard that has not been published yet or has unpublished changes by the unpublished button at the top:

When you click on the unpublished button, you'll have two options:

  • Publish will make the dashboard or changes visible to others.
    Note: A newly created dashboard will appear on the menu where you created it. To move the dashboard to a different place on the navigation bar see How to edit the Navigation Bar.
  • Discard will delete your draft dashboard if it has never been published or, if you made changes to an already published dashboard, discard the changes.

Publishing dashboards to different audiences

Find out how to publish dashboards to a subset of users using Team Folders or visible to anyone even unlicensed users with Open Access (Sharing Dashboards with anyone - Open Access).

Buttons at the top of dashboards

For more information about the other buttons at the top of the dashboard see:

How to create a dashboard

Walkthrough: Creating a dashboard using split tile and drag and drop

In this walkthrough we're going to create a more complex dashboard using the split functionality and dashboard designer tools. We recommend you configure the tiles before creating too complicated a layout, because tiles do change size when showing data.

  1. In SquaredUp navigate to where you'd like the dashboard to be created. Hover over the + button and click dashboard.
    This image shows creating a dashboard at the top level of the navigation bar:
    Or you might prefer to navigate to a subfolder and create the new dashboard there:


  2. Give the dashboard a title, by replacing the text that says New Dashboard.
  3. Click on the Two tiles template:
  4. First configure the right-hand tile to show some data. Click configure tile on the right-hand tile and configure a tile that will bring back a long column of data. For example Web API > Grid to show Pingdom checks:
  5. Click done. You should now have a dashboard with one long column on the right:
  6. Hover between the columns and drag the column resizing line to the right allowing it to snap into place towards the right of the screen making the right hand column narrower:
  7. We are now going to add a split to the left-hand column. Click on the Split tile button on the left-hand tile:

  8. The left-hand column will now show two tiles nested within it. Try resizing the whole of the left-hand column to see how the two 50% cells within retain their dimensions and resize with the wider column.
  9. Click add new tile beneath each of the split tiles to create 4 tiles:


    To look like this:

  10. Now click add new tile below the wider left-hand column to add a tile that spans the width of the two split tiles:
  11. You should now have a dashboard that looks like this:

    You can stop here, or you can add to your dashboard if you wish.
  12. We recommend you configure some tiles now, to see how they fill out the space available. The 4 tiles at the top left of the dashboard would work well as Web API donut tiles (How to use the Web API tile).
  13. You may find you need to create a new split and move tiles into that if you want the tiles to align by their top edge:
  14. You may wish to add a large title for a wall monitor display, using the Web Content tile (How to use the Web Content tile), and drag this to the top of the page or top of the split column:

FAQs

How do I delete a column or row?

Delete or move the individual tiles until the column or row is empty and then the empty column or row will automatically be removed. There is no option to delete a whole column or row.

How can I control the size of tiles?

Tile sizes will change slightly depending on the tiles you configure, and some tiles, such as Status tiles, can dynamically show more or less resources. For example, the list of unhealthy servers may be longer one day than another. If you're aware that one tile may expand or contract you might not want to put another tile beneath this one, instead you could add tiles to other columns.

Some tiles have options that allow you to control the tile size:

You can use toggle zoom button at the top right of the tile to change between the different ways Status icons can be displayed.

One long list
Column list
Icons only

Other tiles such as the Web Content tile have a height slider:

How to use the Web API tile

How to use the Web Content tile

Was this article helpful?


Have more questions or facing an issue?