Autocompletion in InputField Type 'textbox'

Universal Dashboard
1

Hello,

Is it possible to create an input of type textBox with autocompletion?
If yes, can you please give me an example?

Thank you.

2

This is possible in V3 of UD which I was playing with the other nightā€¦but this is only in beta release stageā€¦I did a custom component drop down menu here:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSelector
which I think is as close to an autocomplete field you will get as this does auto-complete

3

thatā€™s exactly what iā€™m looking for, thanks.
However, is there a way to block multiple additions?

4

Hello @Hakmoon you could just use a drop-down list so only one option could be selectedā€¦I used the selector component I built as the original problem I saw using a lot of screen space with all the check-boxesā€¦so multiple choices was the original problemā€¦so yeah just use a built in UD drop down list for thisā€¦You need to download UDField from the marketplace here:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDField

5

thatā€™s exactly it, thank you very much for your help.

ps: why donā€™t you put the ā€˜Get-UDSelectorValueā€™ function in the UniversalDashboard.UDSelector module?

In any case, well done for your responsiveness.

2 Likes
6

Sorry this was sort of same question I answered on a different post, I got a cool example here of dynamic text boxes:- https://github.com/psDevUK/UD-Field in the second example of the readmeā€¦the reason the function didnā€™t get included as this was done after building the componentā€¦and not knowing, I do know now, but just have not got round to publishing an update, as I do these in my own time :crazy_face: and I got 4 kidsā€¦ I should publish an update thoughā€¦

7

um, i have a problem with data recovery.
The toast does not display anything.
I used several examples given and impossible to display the selection in the toast.

error
error2540Ɨ1209 54.1 KB

8

Hey @Hakmoon sorry to hear you having issues using thisā€¦ so first off have you read through:- New Multi or Single Select Component for UniversalDashboard as I know a fellow dashboarder was struggling but got there in the endā€¦ secondly have you tried the example shown here:-

Import-Module -Name UniversalDashboard.Community -RequiredVersion 2.8.1
Import-Module UniversalDashboard.UDSelector
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"
$init = New-UDEndpointInitialization -Module @('UniversalDashboard.UDSelector', 'UniversalDashboard.UDField')
Start-UDDashboard -Port 10005 -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Theme $theme -EndpointInitialization $init -Content {
        New-UDRow -Columns {
            New-UDColumn -size 7 -Endpoint {
                $Processes = Get-Process
                $hash = @()
                foreach ($item in $Processes) {

                    $hash += @{
                        value = $item.Name
                        label = $item.Id
                    }
                }
                New-UDSelector -id  "selector1" -Options {
                    $hash
                } -PlaceHolder "Select running processes..."
            }
            New-UDColumn -Size 4 -Endpoint {
                New-UDButton -Text "Processes Selected" -OnClick {
                    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:Selected = $Selected
                    Show-UDToast -Message "You selected $Session:Selected" -Duration 4000 -Position topLeft
                }
            }
        }


    }
)

This should list all process IDs then then process names will be shown when you click the buttonā€¦

9

Sorry, my fault, I had run the script in PowerShell V7.0.
The script does not work with version v7 of PowerShell.

Thank you for your help.

1 Like