New Multi or Single Select Component for UniversalDashboard

[Szeraax]

@stefaz @psDevUK

Maybe I found why it works on PS5 and not Pwsh. I made my toast UDButton return the raw json using this line:

New-UDButton -Text "Toast" -OnClick {
  $val = (Get-UDElement -id "stuff").Attributes.selectedOption | ConvertTo-Json -Depth 1
  Show-UDToast -Message "Selected Values:- $val" -Position topLeft -Duration 40000
}

On Pwsh, I get: Selected Values:- [ { "value": "2019 GameJam", "label": "2019 GameJam" }, { "value": "Arcade/Pinball", "label": "Arcade/Pinball" } ]

On Windows PowerShell 5.1, I get: Selected Values:- [ [ "2020 GameJam", "2020 GameJam" ], [ "Arcade/Pinball", "Arcade/Pinball" ] ]

As you can see, my Pwsh has a much better structure than 5.1. Interesting.

[jmknight2]

Sorry for the late reply, but thank you so much!! That’s exactly what I needed and it worked like a charm. Your the best!

[tom.obrien]

I love this component, it’s perfect for what I need. This is probably a question for @psDevUK - Do you know why the select box is focused on by default when a page is loaded with the selector? Here’s an example of one of my pages using it:

I tried forcing the focus to the company name dropdown using Select-UDElement but that doesn’t seem to work for select boxes so the focus stays on the selector.

[psDevUK]

Hey @tom.obrien thanks for showing the appreciation for this component. In the forms that I am using this component in, I have made it the first component in the list, so not come across this problem…I am sure there is a solution to this problem…I will knock up some demo form and do my best to make this work. Peace

[tom.obrien]

Excellent, thanks as always!

[psDevUK]

Hey @tom.obrien I havent forgot about your issue, but not got round to building anything dashboard related in the past few weeks…however I have looked into this, and I believe this is happening as the JSX file which was used to create this component, I have included the autoFocus which is doing it’s job and auto focusing the component…so to fix this I will need to rebuild the component, then re-publish this back to the powershell gallery which in-turn will sync to the marketplace, I will update once I have done this. Thanks

[tom.obrien]

Nice one! Thanks @psDevUK

[psDevUK]

Trust @tom.obrien my life is never dull, with four young daughters to entertain and full time job etc. So put a bit of time to one-side today to rebuild both the multi selection and single selection selector components. I have not published these to the powershell gallery yet, but I have stuck them both on GITHUB here:- https://github.com/psDevUK/UD-Selector/tree/master/No_AutoFocus I have not tested yet, but literally removed the word autoFocus on both cases, and rebuilt it in the same fashion. Hopefully this should now tick all the boxes for you

[tom.obrien]

Amazing thank you! I’ll give this a test today.

(4 daughters in lockdown, I feel for you! )

[tom.obrien]

I got sidetracked with some other work but I can confirm that it now works as expected and it now doesn’t focus on the select box. I’ve already integrated it in multiple places in my app now and I’ll be using the single select too in place of the udselect so it’s nice and consistent. Thanks again @psDevUK

[fd1911]

@psDevUK
Hi Adam!
Im having issues on this module. I want to populate the options from a Get-ADGroup query. I’ve tried different methods but those always trew me the " One or more errors occurred
You cannot call a method on a null-valued expression."
New-UDRow -Columns {
New-UDColumn -size 5 -Content {
New-UDTypography -Text "ARG"
$arrayArgDistrolist = @()
$grupo = get-adobject -Filter 'ObjectClass -eq "group"' -SearchBase "OU=Argentina,OU=Distribution Groups,OU=company,DC=company,DC=local" | Select-Object Name,DistinguishedName foreach ($grupos in $grupo) { $grupoArgDN= $grupos.DistinguishedName $grupoArgName = $grupos.Name $arrayArgDistrolist += @{ value ="“$grupoArgDN"" label ="”$grupoArgName""} } New-UDSelector -id "selectorARG" -Options {$arrayArgDistrolist} -Placeholder "Select Arg Groups" } }

[psDevUK]

Hello @fd1911 thanks for taking the time to try out this module…Apologies on late reply just been super busy trying to decorate the house…and I’m better at coding than DIY for sure…I been laying flooring for about 10 hours, but I will cook you up something tomorrow, to show this working reading Active Directory

[psDevUK]

Ok 34 minutes later after laying flooring all day, and cutting boards, I needed something else to zone into so here is a complete working dashboard example

Import-Module UniversalDashboard
Import-Module ActiveDirectory
Import-Module UniversalDashboard.UDSelector
Get-UDDashboard | Stop-UDDashboard
$theme = New-UDTheme -Name "Basic" -Definition @{
    '.css-1wa3eu0-placeholder'        = @{
        'color' = "rgb(164, 174, 193) !important"
    }
    '.css-1okebmr-indicatorSeparator' = @{
        'background-color' = "rgb(164, 174, 193) !important"
    }
    '.css-1hwfws3'                    = @{
        'height'      = "30px"
        'align-items' = "flex-start"
        'box-sizing'  = "initial !important"
        'flex-wrap'   = "initial !important"
    }
    '.css-1rhbuit-multiValue'         = @{
        'background-color' = "rgb(183, 195, 219) !important"

    }
    '.css-xb97g8'                     = @{
        'background-color' = "rgb(164, 174, 193)"
        'color'            = "#fffaf4"
    }
    '.css-12jo7m5'                    = @{
        'color' = "rgb(255, 255, 255) !important"
    }
    '.css-tlfecz-indicatorContainer'  = @{
        'color' = "rgb(164, 174, 193) !important"
    }
    '.css-yk16xz-control'             = @{
        'border-color' = "rgb(164, 174, 193) !important"
    }
    '.css-1g6gooi'                    = @{
        'padding-top' = "9px !important"
        'color'       = "rgb(164, 174, 193) !important"
    }
} -Parent "Default"
$init = New-UDEndpointInitialization -Module @("ActiveDirectory")
$dashboard = New-UDDashboard -Title "Active Directory" -Theme $theme -Content {
    New-UDRow -Columns {
        New-UDColumn -size 8 -Content {
            New-UDCard -BackgroundColor "#8789c0" -Endpoint {
          $SecurityGroupMemembers = Get-ADGroupMember -Identity "YOUR_SECURITY_GROUP" | select Name,SamAccountName | export-csv "C:\adam\test.csv" -NoTypeInformation
          $Members = Import-Csv C:\adam\test.csv
                $hash = @()
    foreach($item in $Members) {
    $hash += @{
    value = $item.Name
    label = $item.SamAccountName
    }
    }
New-UDSelector -id "stuff" -Options {
$hash
} -PlaceHolder "Select Security Members..."
}
            }

            New-UDButton -Text "Toast" -OnClick {
                $val2 = (Get-UDElement -id "stuff").Attributes.selectedOption.Count | ConvertTo-Json | ConvertFrom-Json
                if ([int]$val2 -gt 1) {
                    $val = (Get-UDElement -id "stuff").Attributes.selectedOption | ConvertTo-Json -Depth 1 | ConvertFrom-Json | Select-Object -ExpandProperty SyncRoot
                    [array]$source = $val | Select-Object -ExpandProperty SyncRoot
                    $c = 0
                    $values = $source | ? { $c % 2 -eq 0; $c++ }
                    $length = $values.length
                    $i = 0
                    Do {
                        $value += "'$($values[$i])'" + ","
                        $i++
                    }
                    While ($i -le $length)
                    $Session:value2 = $value.Substring(0, $value.Length - 4)
                    Show-UDToast -Message "Selected Values:- $Session:value2" -Position topLeft -Duration 4000
                }
                elseif ([int]$val2 -eq 1) {
                    $single = (Get-UDElement -id "stuff").Attributes.selectedOption
                    $selection = $single | Select-Object Root | ConvertTo-Json -Depth 2 | ConvertFrom-Json
                    $finalvalue = $selection | Select-Object -ExpandProperty Root
                    $Session:value2 = $finalvalue | Select-Object -First 1
                    Show-UDToast -Message "You Selected $Session:value2"
                }
            }

        }
    } -EndpointInitialization $init

Start-UDDashboard -Dashboard $dashboard -Port 10009

Thats how I boshed it together in 34 minutes from typing my last post, one less thing for me to do tomorrow

[tom.obrien]

I appreciate this is a super late reply but I had the same error and found it was a new param in the latest version “-Selected” that needs to be added to the command, even if it’s an empty script block. For example:

New-UDSelector -id “selector” -Options {$array} -Placeholder “Selector Name” -Selected {}

[psDevUK]

Damn should of made that a mandatory parameter…will try to update the module just still busy decorating…

[MaCCa]

I feel partially responsible for that param (Thanks again Adam for creating it for me )

[RamonMA]

Sorry if this has already been mentioned here, I tried searching but didn’t find anything. Is there a way to fix this when using the single selector component on UDv3 Dark theme?

Using using the light theme, the dropdown text looks as it supposed to, but with the dark theme the text in the dropdown turns white so you can’t see the text in the dropdown (only one you can see is the currently highlighted one due to the background color changing slightly.)

[psDevUK]

Hello @RamonMA when I initially built this component Powershell Universal didn’t exist I believe, as I built this for UD…I have now got myself using Powershell Universal. This problem was mentioned before to me I believe but I was not using Powershell Universal at the time.
So now you jogged my memory I will have a butchers at fixing this theming issue. It will most likely require rebuilding this, so let me look into this and will update once I’ve had a proper butchers at this. Thanks

[RamonMA]

No, thank you @psDevUK. I too am migrating my dashboards to PSU from UD2.9. It would be nice if the New-UDAutoComplete and New-UDSelect were kinda merged together in PSU. I like using auto complete, but I need there to be a key value pair for each of the option, like select has.

[RamonMA]

FYI I was able to work around this for time being using the New-UDStyle cmdlet.

Since the background of the dropdown list is always white, black covers the light and dark them.