LogoDark mode logo
LogoDark mode logo
Contact SupportLoading Light/Dark Toggle

  • How to integrate and visualize your external data
  • How to create a dashboard
  • Recycle Bin
  • Working with perspectives
  • Action buttons for dashboards and perspectives
  • VADA perspective
  • How to scope tiles
  • Timeframes for tiles
  • Grid Designer
  • Performance Metric Labels
  • How to use wildcards in metrics
  • How to show multiple metrics on one graph (v4.2 and below)
  • How to use Custom Labels
  • How to use criteria when scoping alerts
  • How to use criteria when scoping objects
  • How to run SCOM tasks
  • How to enable graph color matching
  • Sharing Dashboards with anyone - Open Access

dashboardinggrid designer

Grid Designer

The Grid designer is available in the grid columns panel in Grid visualizations. It allows you to easily add, hide, order, and customize columns of data that may come from any internal or external source.

Configuring columns

Hide / Show hidden columns

By default, when you configure a tile all columns will be displayed. To hide a column, simply click hide for each column you wish to hide.

If you have previously hidden some columns that you now want restored, you can click show all columns to show visible and hidden columns (the toggle will now read show visible columns only). Columns that are currently hidden will be grayed out and have the show option instead of hide.

These column modifications are performed client-side, so it's still most efficient to filter the columns directly in your query or script (for example, for SQL or Azure Log Analytics tiles), but if you're using an API that doesn't allow you to filter columns then this feature gets you the results you need.

☰ Drag and drop

Changing the column order couldn't be easier, simply click and drag the gray ☰ icon to the left of the column name.

Changing the name of a column

If you want to change a column name, simply click on the existing column name in the grid options panel and enter the new name.

To restore the original name, simply delete your updated name and the column will revert to its original name.

Edit

Data type and Conditional formatting

Select the data type that applies to the column. This will enable sorting to work effectively, i.e. in numerical order, and show the relevant conditional formatting options.

Text

Conditional formatting for text allows you to change the color when the cell value meets your criteria.

Click Add, then Select color and choose a color, then click on the mustache picker to see some examples.

For example:

{{value.indexOf('Windows') != -1}} would change the color when the value contains the word Windows. in the case shown.

{{value.match(/system|System/) != null}} would change the color when the value contains the word system or System.

Example of the text data type. Click to view fullsize.
Number

Conditional formatting for numbers allows you to change the color when the cell value meets your numerical criteria.

For example:

{{value > 0.2}} would change the color when the cell value is over 0.2

{{value >= 10 && value <= 90}} would change the color when the value is between 10 and 90

Example of the number data type. Click to view fullsize.
Time

Selecting the data type of time will automatically format the time data, and show you additional time related conditional formatting. To adjust the time/date format see Using Timeago to convert Unix timestamps

Mostly the time units are milliseconds, but if you know your time is in seconds you can change this here.

For the data type time you can match on any or all conditions

Example of the time data type. Click to view fullsize.
Conditional formatting example for expiring certificates. Click to view fullsize.

Boolean

For the data type boolean you can choose the true, false and default colors.

Example of the boolean data type. Click to view fullsize.

Default color

Optionally, set a color for values that don't match any conditional formatting.

Apply color to

By default conditional formatting is applied to the text in the column, click on background to apply the color to the background.

Whole row

With this ticked the color chosen will apply to the whole row, rather than just the cell. The Grid Columns section will show the default sort column.

Custom template

The custom template box allows you to format the way the data in a column is displayed. You can then type your standard SquaredUp 'mustache' syntax and click on done when you have the column looking exactly how you want it. If you want to preview the results before you're done, click anywhere outside the text box while editing it.

A

icon will appear next to the column edit option to indicate that a custom template has been applied.

The mustache syntax is great for converting numbers, adding units, highlighting key values or performing any other customizations you may need. For more information on mustaches see How to use Custom Labels.

Check out our GitHub Samples repository for samples around using mustache. You'll find snippets for custom labels, conversions, manipulating strings, using HTML, and many more use cases.

Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

  1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
    For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
  2. If you can't change the name of the property, you need to enter the property name in the following format:
    Original property name:
    {{properties.name-with-hyphens.value}}
    New format:
    {{properties['name-with-hyphens'].value}}

Using Timeago to convert Unix timestamps

You can use timeago to convert Unix timestamps from milliseconds to show a readable date and time. You can either display an absolute time (for example, August 20th 2021) or a relative time (for example, 20 hours ago).

There are four parameters you can use for converting the time, written in the following format:
timeago(Value you want to convert, Show Absolute, Show Time, Without Suffix, With Prefix).

The parameters for the value you want to convert can either be true or false:

Show Absolute
true = show absolute time (date) rather than relative time
false = show relative time
Show Time
true = if showing absolute time, show the time as well as the date
false = do not show the time with the date
Without Suffix
true = if showing relative time, this removes the "ago"
false = "ago" at the end will be shown (e.g. 10 hours ago)
With Prefix
true = adds "since" ahead of the absolute time, or "for" ahead of the relative time
false = no prefix will be shown

Tip: The default setting for all parameters is false. If you only want to change the first parameters, you can just use timeago(value, true, true) and it will be interpreted as timeago(value, true, true, false, false).

Examples:

To display the relative time (how long ago something occurred):

{{timeago(value)}}

To display the absolute time as the date without the time:

{{timeago(value, true)}}

To display the absolute time as the date with the time:

{{timeago(value, true, true)}}

To display the time with the prefix "for" for relative time and "since" for absolute time (for example, "the status has been unhealthy for 10 hours")

Option A) Use the fourth parameter and set it to true. This will insert the appropriate prefix for the absolute or relative time:

timeago(value, false, false, true, true)

Option B) You can leave out the fourth parameter that controls if the prefix "for" or "since" is inserted automatically. Since you left it out, it defaults to false, causing no prefix to be shown. Instead you insert the word "for" or "since" manually before the timeago function.

for timeago(value, false, false, true)

To convert a time value from seconds to milliseconds:

Some APIs, like Pingdom for example, return the value in seconds. Since Timeago uses the time value in milliseconds, you need to multiply by 1000 in that case:

{{timeago(value*1000)}}

Example with a Pingdom property:

{{timeago(properties.lasttesttime*1000)}}

Adding custom columns

You can dynamically construct new columns based on the data returned by your tile, which is invaluable when dealing with data sources that only support simple data retrieval, or where the API does not return data in a simple tabular form (such as many JSON based Web APIs).

To add a custom column:

  1. Click the add button near the bottom of the grid columns panel.
  2. Click the column name and change the name from customcolumn1 to the name you want to give the column.
  3. In the data key path box, enter the (original) name of the column or path to the desired property in the returned data (this will depend on the API you are returning data from). If you need to access the values of multiple columns (i.e. concatenating two columns together) simply leave the box empty.
  4. Optionally, if you want to customize the display of the column, you can enter a mustache in the custom template box
  5. Click done when you have finished.

Custom columns have a pencil icon in the grid options panel to indicate they have been added by a dashboard author.

Example: Customizing the output of a SCOM task

In this example, we are going to customize the output of a SCOM task from the Data On Demand management pack that displays CPU process information. This will include hiding columns which may not be interesting, reformating some data for legibility, and separating the path column into separate folder and executable columns, so that a long path doesn't make it hard to see what program is being run.

  1. Add a new tile to a dashboard or windows server perspective. If using a dashboard, on the scope panel specify a valid Windows computer.
  2. Click on SCOM Task and then On-Demand Task (Grid). Click next.
  3. In the task config panel select List Processes (Data On Demand) as the task to execute.
  4. Click hide next to sessionId, handles, parentPid and threads.
  5. Click add and select Format in the override parameters dropdown. Enter csv and click apply changes (execute). Click next twice.
  6. Rename cpuPercent to CPU Usage % by clicking on its name in the grid columns panel.
  7. Rename the privateBytes column to Private MB and click edit. In the template box enter {{Math.round(value/1048576)}}. Click done.
  8. Rename the path column to Folder. Click edit and enter {{value.substring(0,value.lastIndexOf('\\'))}}. Click done.
  9. Click add to add a new custom column. Rename the column from customcolumn1 to Executable. In the path box enter path and in the custom template box enter {{value.slice(1+ value.lastIndexOf('\\'))}}. Click done.
  10. Click and drag the ☰ icon to the left of the Executable column above the Folder column.
  11. Click the orange done button to finish editing the tile.

Using Timeago to convert Unix timestamps

You can use timeago to convert Unix timestamps from milliseconds to show a readable date and time. You can either display an absolute time (for example, August 20th 2021) or a relative time (for example, 20 hours ago).

There are four parameters you can use for converting the time, written in the following format:
timeago(Value you want to convert, Show Absolute, Show Time, Without Suffix, With Prefix).

The parameters for the value you want to convert can either be true or false:

Show Absolute
true = show absolute time (date) rather than relative time
false = show relative time
Show Time
true = if showing absolute time, show the time as well as the date
false = do not show the time with the date
Without Suffix
true = if showing relative time, this removes the "ago"
false = "ago" at the end will be shown (e.g. 10 hours ago)
With Prefix
true = adds "since" ahead of the absolute time, or "for" ahead of the relative time
false = no prefix will be shown

Tip: The default setting for all parameters is false. If you only want to change the first parameters, you can just use timeago(value, true, true) and it will be interpreted as timeago(value, true, true, false, false).

Examples:

To display the relative time (how long ago something occurred):

{{timeago(value)}}

To display the absolute time as the date without the time:

{{timeago(value, true)}}

To display the absolute time as the date with the time:

{{timeago(value, true, true)}}

To display the time with the prefix "for" for relative time and "since" for absolute time (for example, "the status has been unhealthy for 10 hours")

Option A) Use the fourth parameter and set it to true. This will insert the appropriate prefix for the absolute or relative time:

timeago(value, false, false, true, true)

Option B) You can leave out the fourth parameter that controls if the prefix "for" or "since" is inserted automatically. Since you left it out, it defaults to false, causing no prefix to be shown. Instead you insert the word "for" or "since" manually before the timeago function.

for timeago(value, false, false, true)

To convert a time value from seconds to milliseconds:

Some APIs, like Pingdom for example, return the value in seconds. Since Timeago uses the time value in milliseconds, you need to multiply by 1000 in that case:

{{timeago(value*1000)}}

Example with a Pingdom property:

{{timeago(properties.lasttesttime*1000)}}

Was this article helpful?


Have more questions or facing an issue?
Submit a ticket

On this page

  • Configuring columns
  • Hide / Show hidden columns
  • ☰ Drag and drop
  • Changing the name of a column
  • Edit
  • Data type and Conditional formatting
  • Default color
  • Apply color to
  • Custom template
  • Using Timeago to convert Unix timestamps
  • Adding custom columns
  • Example: Customizing the output of a SCOM task
  • Using Timeago to convert Unix timestamps

Footer

Sites

  • SQUAREDUP
  • SQUAREDUP DS
  • DOWNLOAD
  • COMMUNITY ANSWERS

Quick Links

  • SUBMIT A REQUEST
  • EVENTS
  • CAREERS

Small Print

  • PRIVACY POLICY
  • TERMS AND CONDITIONS
Youtubex (Twitter)LinkedIn

© SquaredUp 2025