How to use the Grid designer when configuring tiles

This article explains how to use the Grid designer introduced in Squared Up v3.2

Overview

The ‘Table Display’ component has been replaced in v3.2 by a flexible new ‘Grid Display’ component. With this you can easily add, hide, order, and customize columns of data that may come from any internal or external source.

In order to configure the grid, expand the grid columns panel on any supported tile.

Supported tiles

Column selection and ordering

Hide a column

By default when you configure a supported tile (see above) all columns will be displayed. To hide a column, simply click hide for each column you wish hidden.

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

The column modifications are performed client-side, so it’s still most efficient to filter the columns using your SQL or OMS query, but if you’re using an API that doesn’t allow you to filter columns then this feature gets you the results you need.

Ordering columns

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

Customize column display

The grid designer allows you to not only rename columns, but also change how the data in each column is formatted and displayed. This uses the standard Squared Up ‘mustache‘ syntax, and is great for converting numbers, adding units, highlighting key values or performing any other customizations you may need.

Renaming 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.

Change the way a column is displayed

To format a column, click edit to the right of a column to display the custom template box. You can then type your mustache (if you want to preview the results, click anywhere outside the text box) and click on done when you have the column looking exactly how you want it.

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

For more information on mustaches see How to use custom labeling.

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 custom_column_1 to whatever 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 (see Change the way a column is displayed above).

  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

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 it’s name in the grid columns panel.

  7. Click edit to the left of your CPU Usage column. In the custom template column enter `{{value}}%’ to add a percent symbol to the value. Click done.

  8. Rename the privateBytes column to Private MB and click edit. In the template box enter {{Math.round(value/1048576)}}. Click done.

  9. Rename the path column to Folder. Click edit and enter {{value.substring(0,value.lastIndexOf('\\'))}}. Click done.

  10. Click add to add a new custom column. Rename the column from custom_column_1 to Executable. In the path box enter path and in the custom template box enter {{value.slice(1+ value.lastIndexOf('\\'))}}. Click done.

  11. Click and drag the ☰ icon to the left of the Executable column above the Folder column.

  12. Click the orange done button to finish editing the tile.

How to use Custom labeling

How To use The OMS Tile label: How to use the Grid designer when configuring tiles keywords: grid designer columns column template