Input fields generated dynamically

Universal Dashboard Universal Dashboard Help
1

I’m in the process of creating a Deployment Request tool, and want to create an input box to determine which microservices are going to be included into a release. Basically this:

image
image.png1143×715 22 KB

image
image.png1206×688 12.5 KB

But I’m not sure how to implement the code to capture this information. Here’s what I have:

Show-UDModal -Content {
$services = Get-Content ./pages/$Product/Manifest/Microservices.json | ConvertFrom-Json
New-UDInput -Title "Services" -Content {
    foreach ($service in $services) {
        New-UDInputField -Type checkbox -Name ($service.Name -replace " ", "") -Placeholder $service.Name
        $serviceNames += ($service.Name -replace " ", "")
    } 
} -Endpoint {
    param()
}

}

I’m could just manually have each InputField be named and then name them in the param() in the Endpoint, but I’d like to continue with the approach I have, which takes them from a master list JSON file. Any ideas anyone? Thanks in advance!

2

I’m at the same exactly spot. I can’t figure out how to pass the fields values from dynamically created inputFields to the endpoint part of UDInput.

Any progress on this one?

3

Hello @vmel and welcome to the UD forums even if it is 29 days late…ok I always like to chip-in and help out on problems I think I could actually solve, and to me this thread still seems pretty open…so I would personally use this for my list selection:- https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSelector
lots of info on this component here:-
New Multi or Single Select Component for UniversalDashboard
Explains how to gather the selection for further use. I also hope this answers your original question @mgeorgebrown89 if either of you still stuck and I can help let me know. Peace
P.S as for the input bit, I just built a input-field component tonight that can now reference each input field by it’s own ID this to me is a game changer for dynamically creating and showing/hiding input fields. Further testing to be done in the morning…

4

Hey man is this what you after…? This is a dynamic list of processes, from my machine, which then generates dynamic input fields…I need to upload the New-UDField component to the marketplace but this is what I have so far:-

dynamicInput
dynamicInput993×509 304 KB

This has been generated using the following code:-

Import-Module -Name UniversalDashboard.Community -RequiredVersion 2.8.1
Import-Module UniversalDashboard.UDSelector
Import-Module UniversalDashboard.UDField
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
                    $Session:Selected > C:\ud\test.txt
                    @("Results") | Sync-UDElement
                }
            }
            New-UDColumn -Size 12 -Endpoint {
                New-UDElement -Id "Results" -Tag div -Endpoint {
                    if (-not($Session:Selected -eq $null)) {
                        New-UDHeading -Size 4 -Text "You selected the following process names"
                        $procs = $Session:Selected -split ','
                        foreach ($proc in $procs) {
                            New-UDField -Label $proc -Value $proc
                        }
                    }
                } -AutoRefresh
            }
        }


    }
)

Is this what you looking for…?