Best way to Have List Displayed with options already selected

Product: PowerShell Universal
Version: 1.5.8

Hi All

I have two lists, a list of possible options and a list of selected options. I want to present the list of possible options with the selected options overlaid/preselected. I want the user to be able to select/deselect various options and then I want to take the result and save it to a database.

Initially I attempted to use a Checkbox method, this I can get the Selected options to show up but can’t work out how to save them to list to use later, whenever I select a checkbox the last value in the list is duplicated, ie

New-UDDashboard -Title "Hello, World!" -Content {

    

$EventPossibleOptions = [System.Collections.ArrayList]@('Logon','Logoff','Forward','Disable','Push')

$EventPossibleOptionsSelected = [System.Collections.ArrayList]@('Disable','Push')

$Session:EventTestSelections = $EventPossibleOptionsSelected

                                                               

    Foreach ($PossibleValue in $EventPossibleOptions) {                                                                                                        

     

        if ($PossibleValue -in $EventPossibleOptionsSelected) {$Checked = $true} ELSE {$Checked = $false}

            New-UDCheckBox -id 'ArrayCheckBox' -Label "$($PossibleValue)" -Checked $Checked  -OnChange {

                Show-UDToast -Message "Setting to $Body" -Duration 1200 -MessageSize 30 -Position topCenter -Theme 'dark'                                                                                                                                                                

                if ($body -eq 'True'){

                    $Session:EventTestSelections.Add("$PossibleValue")

                } ELSE {

                    $Session:EventTestSelections.Remove("$PossibleValue")

                }

            }

        }

        New-UDButton -Text 'Get Value' -OnClick {

            Show-UDToast -Message "$($Session:EventTestSelections)"

        }

}

I then tried using a UDSelect, this presents nicer but I can’t seem to select more then 1 default option, so i don’t think it’s compatible, ie

New-UDDashboard -Title "Hello, World!" -Content {

    

$EventPossibleOptions = [System.Collections.ArrayList]@('Logon','Logoff','Forward','Disable','Push')

$EventPossibleOptionsSelected = [System.Collections.ArrayList]@('Disable','Push')

$Session:EventTestSelections = $EventPossibleOptionsSelected

                                                               

    New-UDSelect -Option {

        Foreach ($PossibleValue in $EventPossibleOptions){

        New-UDSelectOption -Name "$PossibleValue" -Value $PossibleValue                   

        }

    } -Multiple -DefaultValue $EventPossibleOptionsSelected -OnChange {

        Show-UDToast -Message $Body

        $Session:EventTestSelections = $Body

    }

    New-UDButton -Text 'Get Value deducted' -OnClick {

         Show-UDToast -Message "$($Session:EventTestSelections)"

    }

}

You can see the values being added, but the default values are treated as a string rather then selecting them.

How would people here go about achieving the outcome I desire?

Thanks
MaCCa

Hello @MaCCa just about to have some dinner, but just wanted you to know I also cooked up something for you to solve this issue. I did have a look earlier, but was not thinking straight. I have achieved my solution by upgrading my custom UDSelector component…I will post this to the powershell gallery and come back at you with my solution to this question :slight_smile:

Ok @MaCCa here is my solution…I am not saying this is the best way by any means, but this is a way that I have achieved what you were asking…I originally thought I could do this using some endpoint magic, but it didn’t yeild the expected results, well it did but auto-reset the results after the timed refresh interval, which was not an ideal solution. So I looked back at the multi-select component that @BoSen29 originally helped me out with. By simply tweaking the selectedOption to be passed as a prop aka parameter then adding the selectedOption to the return bit of the component allowed me to pull this off. The code I used can be found on the readme down near the bottom under version 2.0 I have pushed this to the powershell gallery which in-turn will sync to the marketplace. For now you can get it here:-

I show you in the DEMO code all the CSS colours you can tweak to match your page style. Hope this helps man as went the extra mile for you this time :smiley:
Here is the README for this component:-

Finally here is the demo code running to prove it all works as expected :smiley:

hey bud

Thanks again for coming to the rescue, trying it out now, will update shortly on how it goes :slight_smile:

Also I think it’s more them obvious now that I need to do your course sooner then later, I’ve just signed up so i can start to walk down the path your on, very exciting :slight_smile:

1 Like

Thanks for helping out a brother and purchasing my course on how to build custom components. I actually did this multi-select one year ago in Jan 2020. So nice to be able to update it a year later to make it even more useful. I did add a lot of previous custom components I built to the course, but if there is any that you after that I didn’t include more than happy to share those too.
Just hoping you do not have any difficulty running this custom component, I did see you was using a dark styled dashboard in your example, so as mentioned the README shows you the associated CSS to be able to style this selector in a dark style.
This was a handy feature to add, and just figured no-one else came back to you on this question, and not saying it couldn’t be done with the existing controls, but there is a reason why this particular REACT component gets 2 million plus downloads a week, and has been one of the most popular REACT components ever! Just suprised it’s not my most popular custom component? Anyways please let me know if you get any issues and more than happy to help, and thanks again for supporting a fellow dashboard user.

I want you to know how much I really appreciate all your help and that you attacking these issues with such finesse is, without trying to blow smoke up your @$$, is really inspirational for me.

I recently welcomed my first born and the little guy had a rough night so only just getting back to this now for a bit before bed, if i don’t update again i will tomorrow after work :slight_smile:

I assume from your comments regarding CSS that the component doesn’t support the native dark/light switch? If not would it be something I could have a play at trying to enhance after upping my skills by doing your course?

Congratulations on your new born…I got 4 daughters so I know all about long nights, hopefully your little man has a better time after some rest.
Not too sure on the whole PU thing as I have not had a chance to migrate yet. I did create my own custom light/dark mode component, but I had to define a CSS list for the elements to apply it to, so doubt the PU light.dark mode will change it. But very easy to style using UniversalDashboard.Style which is on the marketplace. Any questions or issues on the course just drop me a direct message and more than happy to help. But I do cover CSS styling in the course, as mentioned happy to help on any questions. Thanks

1 Like

cheers, its a whole new world hehe that’s for sure.

Back to the matter at hand :slight_smile: I’ve tried without success to get the New-UDSelector working, it doesn’t seem to be loaded, i can see the module is installed using Get-Module, I’ve added the module to Universal’s environments.ps1 as well as directly to the script, still won’t load the command.

Tried using V2.99 and latest dashboard, same error

Import-Module UniversalDashboard.UDSelector

New-UDDashboard -Title "Hello, World!" -Content {   

    Import-Module UniversalDashboard.UDSelector

    New-UDCard -BackgroundColor "#8789c0" -Content {

        New-UDSelector -Id "stuff" -Selected {

            @{ value = "push"; label = "Push" },

            @{ value = "pull"; label = "Pull" }

        } -options {

            @{ value = "push"; label = "Push" },

            @{ value = "pull"; label = "Pull" },

            @{ value = "jump"; label = "Jump" },

            @{ value = "throw"; label = "Throw" }

            @{ value = "kick"; label = "Kick" }

            @{ value = "punch"; label = "Punch" }

        }

    }    

}

I’ll try again tomorrow night and see what else I might be doing wrong :frowning:

Doh! I was expected to see a fancy gif with it all working :frowning: ok plan b Adam Driscoll was nice enough to try out this component in PU

Which can be found here:- Universal Dashboard Marketplace - UniversalDashboard.EventTimeline
I saw he tweeted it was working in his PU environment, so I know this component works in PU so can you please try out this component, then if this fails…I would say it is something you are doing…but if it works, then it will mean I will need to look at the component and maybe downloading PU myself to get it working in PU…
Or not sure if @adam can chip in on the whole running custom components in PU…I thought it automatically loaded the required module…?

good thinking to try that module out, I had read some posts on the forum on adding components before checking the documentation and had loaded them wrong way :sweat_smile:

It’s mostly working now, the only issues I found using your sample code in a new dashboard were

  1. The drop down is hidden from view and you have to use mouse scroll to view it, this happens using your code example as well as a modal:

If i set the modal to full screen it works

  1. Button doesn’t reveal selected items:

Ok cool beans at least a step in the right direction. The custom component is showing and starting to behave more correctly. As for putting it in a modal, hopefully you can still set the height and width of a modal, and sure that will allow it to show in the modal without you having to go full screen on the modal…or maybe at a few HTML paragraph spaces after the custom component to give it some room for the drop down. Weird but I see what you mean from your GIF.
There is quite a bit of information on this post:- New Multi or Single Select Component for UniversalDashboard which goes through the various ways you can read the value from what has been selected. I am sure one of those ways will work, just frustrating not knowing why your not getting the same results as me? Maybe it’s time I upgraded…

Great idea, I did this dynamically based on the value count and it scales well.

Do you know how to create a blank line? It seems a space isn’t enough and I need a character to get the result

 $i = 0
 Do {
         #New-UDElement -Tag p -Content { New-UDTypography -Text " " }
         New-UDElement -Tag p -Content {New-UDParagraph -Text ' ' }
         $i++
         } While ($i -le $settingArrayPossibleValues.count)

$i = 0
           Do {
                  #New-UDElement -Tag p -Content { New-UDTypography -Text " " }
                  New-UDElement -Tag p -Content {New-UDParagraph -Text '.' }
                  $i++
                 } While ($i -le $settingArrayPossibleValues.count)

If you mentioning a space here is something like:-
New-UDElement -Tag p -Content { New-UDHTML -Markup "<br>"}
https://docs.ironmansoftware.com/dashboard/components/html
Hope this helps
Or even
New-UDHTML -Markup "<p></p>"
Instead of new-udelement?

If this is not what you are after let me know. Thanks

P.S or it is &nbsp that you after in HTML?

New-UDElement -Tag p -Content { New-UDHTML -Markup "<br>"} works, thank you!

There’s a very slick look and feel to this component, i like it.

1 Like