Out-UDGridData with selectable rows?

Universal Dashboard Universal Dashboard Help
1

I have a page that renders a SQL dataset returned from a dbatools Invoke-DbaQuery request. It works great, and UDGridData is very nice looking. I was wondering if there’s a way to link each row to a particular row/id value for clicking to open another page which reads the row/id value to display more details for that row? Here’s my example grid page…

New-UDPage -Name "CMPackages" -Icon app_store -Content {
New-UDGrid -Title "Configuration Manager Packages" -Endpoint {
    $SiteHost = $Cache:ConnectionInfo.Server
    $SiteCode = $Cache:ConnectionInfo.SiteCode
    $ptype = 0
    $query = "SELECT DISTINCT PackageID, Name, Version, Description, PkgSourcePath FROM dbo.v_Package WHERE PackageType = $ptype ORDER BY Name"
    Invoke-DbaQuery -SqlInstance $SiteHost -Database "CM_$SiteCode" -Query $query | 
        Select Name,PackageID,Version,Description | Out-UDGridData
}

}

2

Hey @skatterbrainz yeah this is possible and I have this working in a few of my grids I got. First place I saw this mentioned was here:-
https://poshtools.com/2019/01/17/universal-dashboard-adding-buttons-to-a-udgrid/
I managed to figure it out from this example provided. I got some I could share if you struggling but not to hand right now. Hopefully that link will enable you to do what you want.

3

Hey @psDevUK, page was very useful in getting this to work in the past, is there a thing were you can select an actual row in a udgrid?

4

Hey @dtnyc9005 I used to use powershell studio to build apps I needed. In that they have the datagrid where you can highlight a whole row on select. Do you mean that ability? I mean I have a grid in UD that displays a customer total for the week. I have an invoice button that when clicked shows all the items that customer bought in a modal window which adds to the total. This is I believe the only way to select the row

5

Yeah, was thinking if the row was possible, currently I’m doing the same where I have a column of buttons.

6

@dtnyc9005
Are you thinking of selecting multiple rows and then use a button at the end to do a function on the selected rows?
I’d probably go with manually adding a checkbox button into the grid in another column.

1 Like
7

Doh @BoSen29 why didn’t I think of that…I was thinking checkboxes as well on powershell studio datagrids, just never thought about adding checkboxes to UD grids…DOH! well pointed out! @dtnyc9005 I believe as @BoSen29 has mentioned adding checkboxes not buttons would be the approach to go, then I guess have a submit button at the bottom of the grid which would give you all the row numbers which have been selected to then perform an action on those items…

8

What I was looking for is an equivalent to an OnClick handler at the row level like HTML exposes via javascript…

<tr onclick="document.location.href='page2.htm';"><td>cell1</td><td>cell2</td></tr>
9

Hey @skatterbrainz Im not a HTML guy, but if you know what your doing constructing HTML tables then why not use that via the New-UDHTML command, I answered someones question the other day and it worked. UD uses https://griddlegriddle.github.io/Griddle/ for the UD grids that are displayed. Any modificiation to this UD grid element will mean downloading a clone from github off of ironman universal dashboard, then run the build.ps1 file to create the output folder, then modify the ud-grid.jsx file to include this feature, then re-run the build script then import the module from the output folder, and test if your modification worked, then create some pester tests, then do a PR back to the main github ironman…I only know this much as the export to CSV didnt work in IE which I have to use for the users using my dashbaords…it took me a good few attempts to say the least. :thinking:

2 Likes
10

Yeah, I like this approach too! This could work now have to get a protype going…

1 Like
11

I suppose I could build the HTML code for that, but New-UDGrid / Out-UDGridData are so much cleaner :slight_smile:

12

Oooh! I think I discovered the better way using UDTableGrid and UDElement from this forum post: Coloring Elements in a Table based on a property - The downside is no “filter” feature, or column sorting. But I’m still learning.

13

I know others have attempted this: https://github.com/ironmansoftware/universal-dashboard/issues/911

There are some issues with it as seen in that issue.

I’m looking at introducing a new grid with many more features in the next minor version of UD - https://github.com/ironmansoftware/universal-dashboard/issues/697

That would allow for more of this type of functionality.

2 Likes
14

nice! keep us posted?

15

Of course! When I release that, you’ll know :wink:

1 Like
16

Hey @dtnyc9005 Did you ever get a working prototype for this? Im looking for the same functionality.

17

Hi J-C, I did not get a working prototype. The project I was working on, which that was for, got cancelled, and I was pulled in a different direction.

19

I think I figure Something out. I at least solved the problem I set out to solve.

g5oayN4v1A
g5oayN4v1A1920×945 498 KB

Import-Module UniversalDashboard

Get-UDDashboard | Stop-UDDashboard

$ProcessList = Get-Process

$theme = Get-UDTheme -Name 'DefaultTight'

$Cache:CheckBoxElementArray = @{ }

$Dashboard = New-UDDashboard -Title "Process Info" -Theme $theme -Content {

    $GridSplat = @{

        Title      = "Process Information"

        Headers    = @(' ', "Select", "Name", "Id", "Handles", "Info")

        Properties = @(' ', "Select", "Name", "Id", "Handles", "info") # Case must match PSCO

        Endpoint   = {

            $Cache:CheckBoxElementArray = @{ }

            $ProcessList | Select-Object | ForEach-Object {

                [PSCustomObject]@{

                    Select  = New-UDCheckbox -Id $_.Id -OnChange (

                        New-UDEndpoint -Endpoint {

                            $CheckBoxElement = Get-UDElement -Id $_.Id

                            $Cache:CheckBoxElementArray[$_.Id] = @{

                                Checked = $CheckBoxElement.Attributes["checked"]

                                Name    = $_.ProcessName

                                Id      = $_.Id

                                Handles = $_.Handles

                            }

                        })

                    Name    = $_.ProcessName

                    Id      = $_.Id

                    Handles = $_.Handles

                    info    = New-UDButton -Text "Info" -OnClick (New-UDEndpoint -Endpoint {

                            Show-UDModal -Content {

                                New-UDTable -Title "Info" -Headers @( "Process Name", "Process Id", "Handles")  -Content {

                                    Get-Process -Id $_.Id | ForEach-Object {

                                        [PSCustomObject]@{

                                            Handles = $_.Handles

                                            Name    = $_.ProcessName

                                            Id      = $_.Id

                                        }

                                    } | Out-UDTableData -Property @(  "Name", "Id", "Handles")

                                }

                            }

                        })

                }

            } | Out-UDGridData

        }

    }

    New-UDButton -Text "Select Process" -OnClick (New-UDEndpoint -Endpoint {

            Show-UDModal -Height '60%' -Width '90%' -Content {

                New-UDGrid @GridSplat -PageSize 5

                New-UDButton -Text "Show Selections" -OnClick (

                    New-UDEndpoint -Endpoint {

                        Show-UDModal -Content {

                            New-UDTable -Title 'Selected' -Headers @("Name", "Id", "Handles") -Content {

                                foreach ($Key in $Cache:CheckBoxElementArray.Keys) {

                                    [PSCustomObject]@{

                                        Name    = $Cache:CheckBoxElementArray[$key]['Name']

                                        Id      = $Cache:CheckBoxElementArray[$key]['Id']

                                        Handles = $Cache:CheckBoxElementArray[$key]['Handles']

                                    } | Out-UDTableData -Property @("Name", "Id", "Handles")

                                }

                            }

                        }

                    }

                )

            }

        })

}

Start-UDDashboard -Dashboard $Dashboard -Port 10001
3 Likes
20

If anyone has any constructive criticism regarding my code in the above example feel free to lmk :slight_smile:

21

@J-C Thanks for sharing. I’m guessing shared code is likely different from what you really implement. Anyway if someone doesn’t like it they are free to change it as desired. My preference is 2 spaces indentation between blocks of code. In VScode, I set code folding preference to ‘indentation’.

   if (condition) {
     "this is true"
   } else {
     "this is false"
   }

Now in large code files ‘Ctrl K+0’ will collapse down to a single page in VScode ususally. I know others like to have multiple files per project which make sense for larger projects. Many moons ago when I was doing system programming, it wasn’t unusual to be working with code files with 100,000 lines of code or bigger. This was mainframe stuff. I think is best to develop your own style and stick to it and be acceptable of other styles that don’t match your desires.

1 Like