Universal Dashboard – Adding buttons to a UDGrid

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