UDButton in UDSelect

1

In order to build a drop down menu for actions - UDButton (e.g. start, delete, …).
This can also be the case in an UDGrid foreach item.

image

image
image911×527 11.1 KB

Is there any solution for this?

 New-UDRow -Endpoint {
        New-UDColumn -LargeSize 6 -Content {
            New-UDSelect -Id 'Select' -Label 'Select' -Option {
                New-UDSelectOption -Name " " -Value "null"

                New-UDSelectOption -Name "Start" -Value (New-UDButton -Text "Start" -OnClick (New-UDEndpoint -Endpoint {Show-UDToast -Title 'starting...' -Duration 3000}))
                New-UDSelectOption -Name "Delete" -Value (New-UDButton -Text "Delete" -OnClick (New-UDEndpoint -Endpoint {Show-UDToast -Title 'deleting...' -Duration 3000}))
            }
        }

        New-UDColumn -LargeSize 6 -Content {
            New-UDCard -Title 'Select Menu' -Content {
                New-UdGrid -Title 'Grid' -Headers @('ID', 'Timestamp', 'Value', 'Action') -Properties @('ID', 'Timestamp', 'Value', 'Action') -Endpoint {
                    $Data = @()
                    1..100 | %{$Data += [PSCustomObject]@{
                            ID = (New-Guid).Guid
                            Timestamp = (Get-Date).AddSeconds($_)
                            Value = (Get-Random -Minimum 1 -Maximum 100)
                            Action = (
                                New-UDSelect -Id 'Select' -Label 'Select' -Option {
                                    New-UDSelectOption -Name " " -Value "null"
                        
                                    New-UDSelectOption -Name "Start" -Value (New-UDButton -Text "Start" -OnClick (New-UDEndpoint -Endpoint {Show-UDToast -Title 'starting...' -Duration 3000}))
                                    New-UDSelectOption -Name "Delete" -Value (New-UDButton -Text "Delete" -OnClick (New-UDEndpoint -Endpoint {Show-UDToast -Title 'deleting...' -Duration 3000}))
                                }
                            )
                        }
                    }
                    $Data | Out-UdGridData
                }
            }
        }
    }
2

Or do I have to work around this by using UDSelect -OnChange.
This will have a much different user experience than a button displayed in the drop down.
My use case is also a big benefit for others … if it is possible to have custom components in an select.

Other example would be a drop down with users (New-UDMuAvatar) which is a great user experience.

3

@adam what do you think about this?

4

see

5

will revert some of my statements by using

New-UDSelectOption  -Icon

but my problem with an inner button still exists

6

you can accomplish the same task using

New-UDFab -ButtonColor 'orange' -Icon bathtub -Size Large -onClick {
    Show-UDToast -Message "Take a bath!"
} -Content {
    New-UDFabButton -ButtonColor 'blue' -Icon fax -onClick {
        Show-UDToast -Message "Send a fax!"
    }
    New-UDFabButton -ButtonColor 'green' -Icon fax -onClick {
        Show-UDToast -Message "Send a fax!"
    }
    New-UDFabButton -ButtonColor 'red' -Icon fax -onClick {
        Show-UDToast -Message "Send a fax!"
    }
}
7

Thanks for your answer but this is not working for me in a UDGrid.

8

We need to build a component from this