New Multi or Single Select Component for UniversalDashboard

Universal Dashboard Universal Dashboard Show Off
, , ,
21

Well that is great to hear :grinning: I hope you are finding this component useful @dkkazak ?

1 Like
22

I do have to admit that you have made me look like a superstar with our techs. They have been asking for the ability to multi select things in the past but have never been able to do so. When I introduced this last month (I officially rolled out the new dashboard for techs to manage users at the beginning of last month), I got “wows” when I got to that section.

3 Likes
23

So awesome to hear I am super happy to get that kind of response for a component I put out there…glad this has ticked the box for your end-users…It is also working well on this sales dashboard I got. :crazy_face:

2 Likes
24

Hi,
first thanks for this cool component, really makes a lot of UD workflows so much easier :+1:
unfortunately we do have a weird problem - our implementation of the UD-Selector component runs perfectly fine on a Windows Server 2019 but fails on a Server Core 2019 (PS-Version and .Net identical).

For the exact same code we get the error
“16:10:18 [Warn] PowerShellExecutionService Error executing endpoint CreateDistributionGroup. Property “SyncRoot” cannot be found. at Get-UDSelectorValue, : line 23”
on the core server when UD calls the Get-UDSelectorValue function.
We implemented this exactly as shown here: https://github.com/psDevUK/UD-Selector.

Any ideas?

1 Like
25

some progress - it also works on the core server when started from CLI. UD usually runs as service (as the same user I successfully tested CLI with) and only then we are getting the SyncRoot cannot be found error.
I have no idea how this could be related to the service? does this function somehow need an interactive session or something? quite out of ideas here :frowning:

26

Hey @stefaz first off massive thanks for using this component. As I build these components to purely extend the amount of components availble to end-users, and I do this in my own time on my own personal laptop, it does limit me to how much testing I can do on it…this component does seem to cause the most weird issues for people…I am running it on windows 10 iis and works great, showing my 1000+ results in a drop-down list with no lag which is great, but I think I said this before I built this component the same as I build my other components…I never personally tried running UD as a service, as it works great in IIS for me. I am really at a loss as to what to suggest…as had people saying it doesn’t work in 2.9.0 but does in 2.8.1 then someone else was like nah runs for me in 2.9.0…so maybe I need to go back and revisit this…on the plus-side both @adam and @AlonGvili are bringing so many new components to V3 of UD I am pretty sure there is a multi-select in V3 of UD. I am sorry I don’t have access to any server 2019 boxes :frowning:
Sorry re-reading your error message it is failing on the sub-function Get-UDSelector…so just for clarity to maybe compare the functions…this is how I am using it on a New-UDSelector -ID “selector1”

function Get-UDSelectorValue {
param($SelectorId)
$value = (((Get-UDElement -Id $SelectorId).Attributes.selectedOption | Select-Object Root -ErrorAction SilentlyContinue) | ConvertTo-Json -Depth 2 | ConvertFrom-Json | Select-Object -ExpandProperty Root -ErrorAction SilentlyContinue) | Select-Object -First 1
if (!$value) {
$val = ((Get-UDElement -Id $SelectorId).Attributes.selectedOption | ConvertTo-Json -Depth 1 | ConvertFrom-Json | Select-Object -ExpandProperty SyncRoot) | Select-Object -ExpandProperty SyncRoot
$length = $val.length
$i = 0
Do {
if (($i % 2) -eq 0) {
$value += "'$($val[$i])'" + ","
}
$i++
}
While ($i -le $length)
$value = $value.TrimEnd(",")
}
return $value
}
$Selected =  (Get-UDSelectorValue -SelectorId 'selector1') -replace ",''"
if (($Selected) -notmatch "\A'" )
{
$Selected = "'$Selected'"
}
$Session:SelectedValues = $Selected

I hope this helps in some way shape or form…I put it into a $session variable so it can be sync with the other components on my page to display the results from the selected list.
I mean if you haven’t already try outputting the $Selected to > C:\myfolder\something.txt and looking at the results of $Selected, or toast it on-screen…

Seems like it is this line it doesn’t like in the function:-

$val = ((Get-UDElement -Id $SelectorId).Attributes.selectedOption | ConvertTo-Json -Depth 1 | ConvertFrom-Json | Select-Object -ExpandProperty SyncRoot) | Select-Object -ExpandProperty SyncRoot

guess you need to inspect the difference between the $val on the server it does work on to the server it doesn’t work on…maybe powershell is casting it as something else on the server it doesn’t work on so it doesn’t have the syncroot? Please have a look at the posts @augustin.ziegler made:-

on the server that is not working to see if this does work…

27

wow, thanks for the long reply!
I finally figured it out and have to correct my initial presumption. it was indeed the PS version - the service was running with v7 whereas starting from CLI runs it with v5.
so long story short: the function only fails with PSv7 and runs ok with v5 - both as a service and when run via CLI.
so, this fixed it for us since we don’t have a hard requirement for v7 - but I would be really curious as to why this fails with v7.

1 Like
28

This component is great! Is there a way to limit the user to only selecting one item? The list will contain a lot of items (users, in my case) so the search ability is great but I only want the user to be able to select one.

29

Hi @Hugepickle thanks for taking the time to download and explore this component. I did do a super-hero team-up with @BoSen29 to get this component completed. Having a quick butchers at https://react-select.com/home it does look possible. However I am thinking this would mean rebuilding this component, to only allow single option. I know UD v3 has so many super-cool new components that both @adam and @AlonGvili have been doing amazing work on. Just worried if I was to look into doing this, I would only be duplicating one of the new controls in UD v3 if you get me?
I do build all these components in my spare-time, and having 4 young daughters to entertain in lock-down and working full-time, is giving me less free time :grinning:
So I will ask @BoSen29 if we can do another team-up, or might just wait till v3…I mean you could build a process which automatically clears the input if more than one item selected, and show a toast or message on the screen to say only one item to be selected or something similar, but I know that is only a work-around solution to the one you want. Which I believe will mean building another version of this component. I hope this answers the question :crazy_face:

Update!

I have re-looked at this and wasn’t as hard as I initially thought, so made the change and it works…so will publish this soon, but fam all moaning at me for being on laptop…will update once done and published…

1 Like
30

Hey @Hugepickle I have now published this same component that works and behanves exactly like New-UDSelector, but only allows you to select a single item

SingleSelect
SingleSelect704×315 175 KB

I just published this to the powershell gallery :grinning:

2 Likes
31

Yay! Thanks!

I just installed, looks like I am your first download. Thanks so much, it works great!

image
image820×134 1.07 KB

One question: I noticed when I clicked an item to select it from the dropdown list, it appears in the main box. However, the dropdown list doesn’t disappear, it stays there, covering controls below it. Is there something I need to do to make it close after I select an item, such as run set-udelement?

32

Hello @Hugepickle didn’t really do much testing on this other than it only allowed you to select one item. I only removed one line of code from the original project. Guess I need to do some reading :open_book: on the options available on this component, see if there is an auto close

Update

Ok I found the option I needed to change, I’m just re-building the component now, hopefully you will see a 1.0.2 version real soon…if this all works out :crossed_fingers:

Another Update

I cannot believe I been up less than an hour, and rebuilt this component :crazy_face:

SingleSelectUpdate
SingleSelectUpdate759×315 168 KB

You now see then menu automatically closes after the selection has been made. I also added the clearable cross to clear the option, but this now looks good to go…so give me sometime to upload this to the powershell gallery now…Wahoo!

Last Update

I just pushed version 1.0.2 to the powershell gallery which in-turn will sync to the marketplace, this includes the clearable option and automatically closes the select list upon selection of an item. As shown in the latest GIF i posted above. This should now tick all the boxes for a decent alternative for a single drop-down selection list that is also searchable, clearable and auto-closes :grinning:

1 Like
33

Weird. Not seeing 1.0.2 in the PSGallery yet.

34

Hi @cadayton you should see 1.0.2 on the marketplace:- https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSingleSelector
or the powershellgallery:-
https://www.powershellgallery.com/packages/UniversalDashboard.UDSingleSelector/1.0.2
I def did this yesterday :grinning:

1 Like
35

Worked fine with v2.9.0. I was attempting to update UDSelector rather than UDSingleSelector. Thanks!

1 Like
36

This is just what I was looking for as well! Thanks!

1 Like
37

I love it! What a great component!

1 Like
38

Great component, I love it already. Thanks @psDevUK!

Just out of curiosity, has anyone been able to set the current selected value of a pre-existing UDSingleSelector? Not being able to do that with New-UDSelect is one of my biggest hangups with that component. I imagine this would use something involving a call to Set-UDElement, and altering some attribute of the selector, but I’ve had no luck thus far.

1 Like
39

Thanks @jmknight2 for the appreciation…just had a quick butchers at:-


and says…under the props
value - control the current value
So I may need to rebuild the component and add this in as an additional prop…aka parameter for the PS function side of things…crumbs…I just looked at the JSX and value is holding:-
value={selectedOption} and that selectedOption is const { selectedOption } = this.state have you tried setting the state of the component…let me try…

Ok @jmknight2 you owe me a :hamburger: and a pat on the :back: as I developed this component I have now spent the last 30 minutes cooking up this lovely recipe:-

Import-Module UniversalDashboard.Community -RequiredVersion 2.8.1
Import-Module "C:\UD\UDSelector\SingleSelector\src\output\UniversalDashboard.UDSingleSelector\UniversalDashboard.UDSingleSelector.psd1"
function New-UDSelectorItem {
    [CmdletBinding(DefaultParameterSetName = "Default")]
    param(
        [Parameter(
            ValueFromPipeline = $true,
            Mandatory = $true,
            Position = 0
        )]
        [string]$Value,
        [Parameter(
            ValueFromPipeline = $true,
            Mandatory = $false,
            Position = 1
        )]
        [string]$Label,
        [Parameter(
            Mandatory = $false,
            ParameterSetName = "Disabled"
        )]
        [switch]$isDisabled
    )
    Begin {
        $out = @{ };
    }

    Process {
        if ($null -eq $Label) {
            $Label = $Value
        }

        $out.label = $Label
        $out.value = $Value


        if ($isDisabled.IsPresent) {
            $out.isDisabled = $true
        }
    }

    End {
        return $out
    }
}
$init = New-UDEndpointInitialization -Function @('New-UDSelectorItem') -Module @('New-UDSingleSelector')
Get-UDDashboard | Stop-UDDashboard
$theme = New-UDTheme -Name "Basic" -Definition @{
    '.css-1wa3eu0-placeholder'        = @{
        'color' = "#56587b !important"
    }
    '.css-1okebmr-indicatorSeparator' = @{
        'background-color' = "#56587b !important"
    }
    '.css-1hwfws3'                    = @{
        'height'      = "30px"
        'align-items' = "flex-start"
        'box-sizing'  = "initial !important"
        'flex-wrap'   = "initial !important"
    }
    '.css-1rhbuit-multiValue'         = @{
        'background-color' = "#323246 !important"

    }
    '.css-xb97g8'                     = @{
        'background-color' = "#56587b"
        'color'            = "#fffaf4"
    }
    '.css-12jo7m5'                    = @{
        'color' = "rgb(255, 255, 255) !important"
    }
    '.css-tlfecz-indicatorContainer'  = @{
        'color' = "#56587b !important"
    }
    '.css-yk16xz-control'             = @{
        'border-color' = "#56587b !important"
    }
    '.css-1g6gooi'                    = @{
        'padding-top' = "9px !important"
        'color'       = "#56587b !important"
    }
} -Parent "Default"
$dashboard = New-UDDashboard -Title "New Component" -Theme $theme -Content {
    New-UDRow -Columns {
        New-UDColumn -size 7 -Endpoint {
            New-UDCard -BackgroundColor "#8789c0" -Endpoint {

                New-UDSingleSelector -id  "stuff" -Options {
                    New-UDSelectorItem -value "SomeStuff1" -label "FancyLabel1"
                    New-UDSelectorItem -value "SomeStuff2" -label "FancyLabel2"
                    New-UDSelectorItem -value "SomeStuff3" -label "FancyLabel3"
                    New-UDSelectorItem -value "SomeStuff4" -label "FancyLabel4" -isDisabled
                } -PlaceHolder "New Fancy Component..."

            }

            New-UDButton -Text "Set Default" -OnClick {
                Set-UDElement -Id stuff -Attributes @{ selectedOption = @(@{value = "christmas"; label = "Christmas" }) }
            }

            New-UDButton -Text "Toast" -OnClick {
                $val = (Get-UDElement -id "stuff").Attributes.selectedOption | ConvertTo-Json -Depth 1 | ConvertFrom-Json | Select-Object -ExpandProperty SyncRoot
                $source = @(($val | Select-Object -ExpandProperty SyncRoot))
                $length = $source.length
                $i = 0
                Do {
                    if (($i % 2) -eq 0) {
                        $value += $source[$i] + ","
                    }
                    $i++
                }
                While ($i -le $length)
                $value = $value.TrimEnd(",")
                Show-UDToast -Message "Selected Values:- $value" -Position topLeft -Duration 4000

            }
            New-UDButton -Text "RemoveMe" -OnClick {
                Remove-UDElement -id "stuff"
            }
            New-UDButton -text "ShowME" -OnClick {
                Set-UDElement -id "stuff" -Attributes @{
                    hidden = $false
                }
            }
            New-UDButton -Text "ClearMe" -OnClick {
                Clear-UDElement -Id "stuff"
            }


        }
        New-UDColumn -size 2 -Endpoint {
            if ((Get-UDElement -Id stuff).Attributes.selectedOption -eq $null) {
                Set-UDElement -Id stuff -Attributes @{ selectedOption = @(@{value = "christmas"; label = "Christmas" }) }
            }

        } -AutoRefresh -refreshinterval 2

    }
} -EndpointInitialization $init

Start-UDDashboard -Dashboard $dashboard -Port 10005

So there is a random way of setting Christmas as the default selection, even though it’s not even in the selection list, in-case that was your next question :smile: and @adam does this mean my select component is better than yours? :rofl: only joking jedi master :+1:

2 Likes
40

You’re the new jedi select master :wink:

2 Likes