Dynamic Modals from Table

[PorreKaj]

Hi,

I have a table, in that table each row has a button calling a Show-Udmodal.

The code for the button and Modal is added through a Select Expression on a get-ADUser, and basically i’m looking for a way to have a modal display info based on the user in the row where the button is clicked.

I’ve tried something like below, but once displayed the Header and card title is blank.

Has anyone done anything similar?

@{Name="DetailsModal";Expression={
                                
                                $Username = $_.Samaccountname
                                New-UDButton -Text "Click" -OnClick {
                                    Show-UDModal -Header {New-UDHeading -Size 4 -Text "$Username"} -Content { New-UDCard -Title "$($_.Samaccountname)" -Size large -Content {}}
                                }
                                
                            }}

[adam]

Try manual variable scoping using New-UDEndpoint and an -ArgumentList.

@{Name="DetailsModal";Expression={
                                
                                $Username = $_.Samaccountname
                                New-UDButton -Text "Click" -OnClick (New-UDEndpoint {
                                    Show-UDModal -Header {New-UDHeading -Size 4 -Text $ArgumentList[0]} -Content { New-UDCard -Title $ArgumentList[0] -Size large -Content {}}
                                } -ArgumentList $UserName )
                                
                            }}

More info on this topic here: https://docs.universaldashboard.io/endpoints/event-handler-endpoints

[PorreKaj]

Cool, that almost works.

for your code to work (at least for me), I had to add -Endpoint in front of the codeblock for the New-UDEndpoint.

$Username = $_.Samaccountname
                                New-UDButton -Text "Click" -OnClick (
                                    New-UDEndpoint **-Endpoint** {
                                        Show-UDModal -Header {
                                            New-UDHeading -Size 4 -Text "$($ArgumentList[0])"
                                        } -Content { 
                                            New-UDCard -Title "$($ArgumentList[0])" -Size large -Content {
                                            }
                                        }
                                } -ArgumentList $UserName )

Thanks!

[adam]

Cool! Glad it worked.

[adegutis]

I am trying to do something similar but cannot get the data to pass to the UDCard. I am using the results from a SQL query and passing the data to a UDgrid. The grid has a UDButton (Details). When I click on the button the UDCard displays but instead of the 2 lines of info (data and contact) I get Cannot index into a null array. Not sure how I need to pass the data down to the card. Here’s my code:

New-UDPage -Name "Certificates" -Icon link -Content {
    $Columns = @('System', 'URL', 'CommonName', 'LastCheck', 'Details' )
    $Query = 'SELECT *, null as Details FROM Certificates'
    $invokeDbaQuerySplat = @{
        SqlInstance     = 'SqlServer'
        Database        = 'Certificates'
        Query           = $Query
        EnableException = $true
    }
    $Data = Invoke-DbaQuery @invokeDbaQuerySplat
    New-UDColumn -Size 12 {
        $newUDGridSplat = @{
            FontColor       = 'White'
            Title           = "Certificate List"
            Headers         = $Columns
            PageSize        = 20
            Properties      = $Columns
            BackgroundColor = 'Black'
            Endpoint        = {
                $Data | Select-Object $Columns | ForEach-Object {
                    [PSCustomObject]@{
                        System     = $_.System
                        URL_FQDN   = $_.URL
                        CommonName = $_.CommonName
                        LastCheck  = $_.LastCheck
                        Details    = New-UDButton -Text "Details" -OnClick (
                            New-UDEndpoint -Endpoint {
                                Show-UDModal -Content {
                                    New-UDCard -Title 'Details' -Content {
                                        New-UDElement -Tag "p" -Attributes @{ className = "white-text" } -Endpoint {
                                            $('Date Added : {0}' -f $($ArgumentList[0]))
                                        } -ArgumentList $ArgumentList[0]
                                        New-UDElement -Tag "p" -Attributes @{ className = "white-text" } -Endpoint {
                                            $('Contact : {0}' -f $($ArgumentList[1]))
                                        } -ArgumentList $ArgumentList[1]
                                    }
                                }
                            } -ArgumentList $_.DateAdded, $_.Contact
                        )
                    }
                } | Out-UDGridData
            }
        }
        New-UDGrid @newUDGridSplat
    }
}

[leeberg]

Hey @adegutis thank you for the detailed example it made it easy for me to repro!- I think I see what is going on here…

For this section:
$Data | Select-Object $Columns | ForEach-Object {

When you Select-Object Columns your ARE NOT bringing in .DateAdded, $.Contact. What this means is that when you are trying to pass this arguments into your elements they are null. This is causing the error you are seeing.

One Tip here- When I start my New-UDEndpoint for my click I like to assign my arugments to variables, this way you WON’T get the big nasty NULL error, your values will just be null… maybe not the most efficient PowerShell usage but can save some confusion…

New-UDEndpoint -Endpoint { 
     $DistinguishedName = $ArgumentList[0]
     $ParentNetBios = $ArgumentList[1]

Back to your script…

The second issue is that down in your New-UDelements you are using Argumentlists and in the case of the Contact you are specifying ArguementList Item 1 (which is the second item) but you only passed in one item.

Soo…

I was able to copy paste your script and insert fake data and got it to work quite nicely by doing the following:

#$Data | Select-Object $Columns | ForEach-Object {~~
$Data | ForEach-Object {

# $('Contact : {0}' -f $($ArgumentList[1]))
$('Contact : {0}' -f $($ArgumentList[0]))

And Boom :