UDInput select drop down with multi-select?

Universal Dashboard Universal Dashboard Help
1

I’ve got a scenario where I would like to provide users with the ability to select multiple options from a long dropdown list, then take the input in my Endpoint section as an array and loop through for each item they select. Is this a functionality someone has managed to get UD to do yet? Based off my knowledge and searching both the docs and poshud demo site, I’m not seeing a built in method to do it.

2

Looks like these do exist, but maybe need to build a custom component https://www.npmjs.com/package/react-select and another with less dependencies so should be easier to build https://www.npmjs.com/package/react-select-plus

3

Have you had any thoughts on this Adam? Seeing as how you’re a month better at custom components now :wink:
Merry Christmas!

gav

4

Hello @OpsEng to be totally honest this one slipped my mind. Life is always busy for me having 4 kids and a full-time job, there is never a dull moment. I only just finished developing:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDNumberMask
As saw this as being something really useful, and forces end users to put it in the correct format without regex.
Stuck at work today, so might treat myself to a few days holiday, then maybe look at this in the new year, remind me in another month :smile: see where I am at. Peace

1 Like
5

Hey @OpsEng and @dcherry88 just to show you both that I am in the festive spirit of Christmas have a look at what I have just boshed together:-
selector
Im looking at building a food ordering portal and needed this capability myself, and thanks to @OpsEng gentle reminder on this, and the fact other people looking for this capability then lets make it happen…I had to download a stupid amount of dependencies, now I need to be able to pass the values as props, into an array or something…step two bind this component to UD so the values can be read. Then be time to release to the general public.
Maybe another super-hero team-up with @BoSen29 is on the cards…

Wow…@BoSen29 did a good job showing me what I didn’t know. I can now retrieve the selected values…so I just need to accomplish the step of passing the list as a hastable I reckon to make this dynamic…then it looks pretty much good to go…hopefully

3 Likes
6

I’m down for another Teams call bro!

7

Sound man :smile: managing to read the values, but it is an array…so not sure how to totally splice it up. I can show and hide it too :smile: I am just rebuilding it now with props for the menu option…but got to wrap kids presents…only like 1hr 15 mins to xmas in UK

8

We’ll look at it another day bro. Xmas is over in Norway as we celebrate the 24th :open_mouth:
Good job thus far man!

9

Never knew you guys did Christmas on the 24th. Couldn’t you all wait just one more day? Or did everyone vote to opening presents a day early? :grinning:
So I actually think the select list of objects needs to be passed as JSON to get a dynamic select list.
Never done this before on a parameter. Guess I need to pass it as a string?
Like everything on this is working

10

We wanted to be unique, hence the 24 :open_mouth:
Hmm, We’ll have a look when we’re both avaliable bro :slight_smile:

1 Like
11

Just struggling to pass

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

as a prop / parameter in powershell…just so you can prep the solution :smile: that seems to be the last hurdle, I mean it can read the values you selected, but it is in an array hashtable format, so not the prettiest…but need to figure out the dynamic search list, else it will be a component with all the products my company sells :crazy_face:

12

Looks doable bro,

Heading to more chirstmas parties myself now, i’ll hit you up when i have some free time :slight_smile:

Could you share your current control, so i can mentally prepare?

13

Ok so I don’t drink but as it’s Christmas day…officially as it’s the 25th…I had a few drinks…I have figured this out now :grin: it’s almost ready to be released I think…added autofocus, and animation on closing a selection…chuffed as nuts I got this working :metal:
selector3

2 Likes
14

Awesome!
20 character limit

15

So looked at tweaking the output display out this component, as figured I would probably be asked, as I thought the input field looked a tad bit chunky for my liking. So I tweaked some CSS settings, and you can flip it to look more like your theme you are using…like so…
selectorFin

16

Good Job Adam, can you post the component jsx file as well?

17

Thanks @wsl2001 if you would like to do some testing of this component before I publish it to the powershell gallery I uploaded it to:-


The JSX file is here:-

It would be nice to pass the options which make up the selection list in a better way…if you think you can improve this before I release it please let me know. Peace

P.S The DEMO.ps1 on the root of this is repository shows how to use this component, and how to style it…I did add a placeholder parameter but didn’t use it in the DEMO

1 Like
18

Another amazing Module!

I just installed in my Dashboard as I found an immediate need for this :slight_smile:

1 Thing I am noticing (not sure if its just me) is when I only select 1 option from the list the Attributes retrieved from the Get-UDElement is null. But if I add a second option I can then see both in the Get-UDElement results.

1 Option Selected

image
image968×506 14.2 KB

2nd Option Selected
image
image962×521 18.4 KB

19

Thanks for the appreciation @mylabonline…damn I need to get using the Admin terminal, could of saved me a lot of time on getting the single selection…well it’s not pretty by any means…but it works

I have posted a working solution I am using to determine if it it a single select or multi select. I hope this answers this question as I needed to figure this out myself.

Basically do something like:-

        $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"
1 Like
20

Thanks @psDevUK That worked!

I have created a first draft of a function that will provide the output of the UDSelector regardless of 1 or multiple values.

I will optimize the cmdlet below, and add some JSON output (for my own need) but below works. Just call that cmdlet in your OnClick and away you go. I think this is much more efficient than calling the entire Get-UDElement across your dashboard

image
image1270×139 11.7 KB

Get-UDSelectorValue -SelectorId 'stuff'

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
}

image
image738×556 15 KB

1 Like