Grids
Universal Dashboard is now a part of PowerShell Universal. This documentation is for reference to the v2 version of Universal Dashboard and is no longer maintained.
Grids
Grids output data similar to tables but allow for paging and sorting the data in the grid. Grids are produced using the Griddle library. Grids are created with the New-UDGrid cmdlet and data for the grid is output using the Out-UDGridData cmdlet.
Simple Grid
To create a simple grid, pass data from a cmdlet to Out-UDGridData from within the New-UDGrid's Endpoint script block.
1
New-UdGrid -Title "Processes" -Endpoint {
2
Get-Process | Select Name,ID,WorkingSet,CPU | Out-UDGridData
3
}
Copied!
Custom Headers
To specify custom headers, use the -Headers parameter of New-UDGrid.
The below script selects the Name, Id, WorkingSet and CPU of ProcessInfo objects returned by Get-Process. The gird auto refreshes every minute.
1
New-UdGrid -Title "Processes" -Headers @("Name", "ID", "Working Set", "CPU") -Properties @("Name", "Id", "WorkingSet", "CPU") -AutoRefresh -RefreshInterval 60 -Endpoint {
2
Get-Process | Select Name,ID,WorkingSet,CPU | Out-UDGridData
3
}
Copied!
The above script produces the following grid.
Formatting DateTimes on the client
If your data set includes a System.DateTime object as one of the properties, the UDGrid component will format the DateTime is the user's browsers local time zone settings. It uses MomentJS to format the date time into a readable string. By default, it uses the
lll format which yields a date time such as Sep 4, 1986 8:30 PM. You can customize the date time format by specifying the -DateTimeFormat on New-UDGrid.1
New-UdGrid -Title "Files" -Headers @("Name", "Last Write Time") -Properties @("Name", "LastWriteTime") -AutoRefresh -RefreshInterval 60 -Endpoint {
2
Get-ChildItem C:\temp | | Out-UDGridData
3
} -DateTimeFormat 'LLLL'
Copied!
Including links in columns
In addition to passing raw data down to a grid, you can also include links. Use the
New-UDLink cmdlet to add links into columns.1
$Dashboard = New-UDDashboard -Title "Grids - Custom Columns" -Content {
2
New-UDGrid -Title "Animals" -Headers @("Animal", "Order", "Wikipedia") -Properties @("Animal", "Order", "Article") -Endpoint {
3
$Data = @(
4
[PSCustomObject]@{Animal="Frog";Order="Anura";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Frog")}
5
[PSCustomObject]@{Animal="Tiger";Order="Carnivora";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Tiger")}
6
[PSCustomObject]@{Animal="Bat";Order="Chiroptera";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Bat")}
7
[PSCustomObject]@{Animal="Fox";Order="Carnivora";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Fox")}
8
)
9
$Data | Out-UDGridData
10
}
11
}
12
Start-UDDashboard -Dashboard $Dashboard
Copied!
Server Side Processing
When the
-ServerSideProcessing parameter is specified, it calls the Endpoint script block to perform the paging, filtering and sorting. To allow for this, there are several variables that are provided when the Endpoint script block is executed.Name
Description
Type
$Skip
The number of records to skip.
integer
$Take
The number of records to take.
integer
$SortColumn
The name of the property or column to sort on.
string
$SortAscending
Whether to sort ascending, otherwise descending.
string
$FilterText
The text to filter items or records by.
string
1
$Dashboard = New-UDDashboard -Title "Grids - Custom Columns" -Content {
2
$Headers = @("Animal", "Order", "Wikipedia")
3
$Properties = @("Animal", "Order", "Article")
4
New-UDGrid -Title "Animals" -ServerSideProcessing -PageSize 5 -Headers $Headers -Properties $Properties -Endpoint {
5
$Data = @(
6
[PSCustomObject]@{Animal="Frog";Order="Anura";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Frog")}
7
[PSCustomObject]@{Animal="Tiger";Order="Carnivora";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Tiger")}
8
[PSCustomObject]@{Animal="Bat";Order="Chiroptera";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Bat")}
9
[PSCustomObject]@{Animal="Fox";Order="Carnivora";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Fox")}
10
[PSCustomObject]@{Animal="Lion";Order="Carnivora";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Lion")}
11
[PSCustomObject]@{Animal="Leopard";Order="Carnivora";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Leopard")}
12
[PSCustomObject]@{Animal="Cat";Order="Carnivora";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Cat")}
13
[PSCustomObject]@{Animal="Goldfish";Order="Cypriniformes";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Goldfish")}
14
[PSCustomObject]@{Animal="Eel";Order="Anguilliformes";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Eel")}
15
[PSCustomObject]@{Animal="Parrot";Order="Anguilliformes";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Parrot")}
16
[PSCustomObject]@{Animal="Crocodile";Order="Crocodilia";Article=(New-UDLink -Text "Wikipedia" -Url "https://en.wikipedia.org/wiki/Crocodile")}
17
)
18
$FilteredAndSortedData = $Data |
19
Where-Object Animal -like "*$filtertext*" |
20
Sort-Object $SortColumn -Descending:(!$SortAscending)
21
​
22
$FilteredAndSortedData |
23
Select-Object -Skip $Skip -First $take |
24
Out-UDGridData -TotalItems $FilteredAndSortedData.Count
25
}
26
}
27
Start-UDDashboard -Dashboard $Dashboard
Copied!
Important points here:
- It's important to do the filter and sort before the paging with skip and first, as it will not behave as expected.
- Totalitems need to be specified, else UD dont know how many pages there are, and it will not display the page info
Last modified 8mo ago