This component originated from the request for help here:-
You can download this awesome component right here:-
PowerShell Gallery | UniversalDashboard.UDSelector 1.0.0
Once again I was blessed to receive some extra help from @BoSen29 who was very kind and donated his personal time to help on this project. I mean I build all these components in my spare time, so it’s great to receive some extra help, and some good banter at the same time.
I had actually managed to build the component, bind the component (from taking the same steps from his previous help which I blogged about here:- Number Mask Input Component | Powershell Blog) so had the component fully working. But the way I was passing the data to the menu was in an array so @BoSen29 constructed it as a scriptblock, and even developed a handy mini-funtion to load the data into the multi-select. I have tested this component for a few days, and it is very responsive, so far I have only loaded 250 items into the selection menu via a hashtable, and this is lightning fast and responsive. You can also use this as a single select, as well as a multi select.
I decided to name this New-UDSelector as it can be used for single selection as well as multi-selection.
It can be a tad tricky getting the values back, but I have put a demo file here:-
https://github.com/psDevUK/UD-Selector/blob/master/UniversalDashboard.UDSelector/ImprovedDemo.ps1
Which shows the mini-function in-use and it also shows how this component can be styled to your requirements.
This component is like the 5th most popular react component out there. So hopefully this will prove the same for fellow dashboarders and give me loads of downloads
Ok this is by no means the prettiest code out there, but this is showing how you can get the values from a multi selection, or a single selection:-
Import-Module UniversalDashboard.Community
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"
$dashboard = New-UDDashboard -Title "New Component" -Theme $theme -Content {
New-UDRow -Columns {
New-UDColumn -size 5 -Content {
New-UDCard -BackgroundColor "#8789c0" -Content {
New-UDSelector -Id "stuff" -options {
@{ value = "merry"; label = "Merry" },
@{ value = "christmas"; label = "Christmas" },
@{ value = "everyone"; label = "Everyone" },
@{ value = "pal"; label = "Pal" }
}
}
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
@("GridData", "InsideGrid") | Sync-UDElement
}
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"
}
}
}
}
}
Start-UDDashboard -Dashboard $dashboard -Port 10005
Once again massive respect to @BoSen29 for the help, and secondly download your copy today