I get asked a lot about how to add buttons to a grid or table in Universal Dashboard. In this post I’ll show you how to do so. First, you need to create a grid and select the title, headers and properties you’d like expose.
The grid in our example will show the name, ID and a button to view all the modules of processes running on our system.
New-UDGrid -Title "Processes" -Headers @("Process Name", "Id", "View Modules") -Properties @("Name", "Id", "ViewModules")
Next, you need to get all the processes with Get-Process
and pipe them to ForEach-Object
so that we can create some PSCustomObjects
that match the data you are looking to output.
Get-Process | ForEach-Object {
[PSCustomObject]@{
Name = $_.Name
Id = $_.Id
ViewModules = $null
}
} | Out-UDGridData
Our grid will now show the Name and Id in each column.
Finally, in order to add a button to allow users to take action to each item in the table, we can create a new UDButton and assign an endpoint to the OnClick
handler to provide some functionality. The PSCustomObject then becomes the following.
[PSCustomObject]@{
Name = $_.Name
Id = $_.Id
ViewModules = New-UDButton -Text "View Modules" -OnClick (New-UDEndpoint -Endpoint {
Show-UDModal -Content {
New-UDTable -Title "Modules" -Headers @("Name", "Path") -Content {
$ArgumentList[0] | Out-UDTableData -Property @("ModuleName", "FileName")
}
}
} -ArgumentList $_.Modules)
}
There are two things to note in this example. First is that you can assign any control you’d like to nest within a table or grid. Second is that we are using New-UDEndpoint
and taking advantage of manual variable scoping to ensure that our data is correctly passed into our endpoint script block.
The result is that we have a grid of processes where we can view the modules for the process.
The full script can be found below.
Import-Module UniversalDashboard
Get-UDDashboard | Stop-UDDashboard
$Dashboard = New-UDDashboard -Title "Grid with buttons" -Content {
New-UDGrid -Title "Processes" -Headers @("Process Name", "Id", "View Modules") -Properties @("Name", "Id", "ViewModules") -Endpoint {
Get-Process | ForEach-Object {
[PSCustomObject]@{
Name = $_.Name
Id = $_.Id
ViewModules = New-UDButton -Text "View Modules" -OnClick (New-UDEndpoint -Endpoint {
Show-UDModal -Content {
New-UDTable -Title "Modules" -Headers @("Name", "Path") -Content {
$ArgumentList[0] | Out-UDTableData -Property @("ModuleName", "FileName")
}
}
} -ArgumentList $_.Modules)
}
} | Out-UDGridData
}
}
Start-UDDashboard -Dashboard $Dashboard -Port 10000