Editable Input Field based on https://github.com/Garphild/react-editable-input
- -Id allows you to set a unique id to the input field to the obtain the values from it at a later stage
- -Label this is a mandatory parameter which displays the placeholder for the input field
- -Value allows you to display a pre-defined value in the field before it is edited
- -FullWidth can either be set to $true or $false default is $true
- -Disabled will determine if the input field can be edited
This example shows this component being used within UDLayout to produce two input fields, one that you can type in and one that has a pre-defined value. Pressing the button will toast the value you typed into the first input field. Hopefully this is enough to inspire you for use-cases of your own:-
New-UDLayout -Columns 2 -Content {
New-UDInputField -Id 'INPUT' -Label "Does this really work?" -FullWidth $false
New-UDInputField -Id 'INPUT2' -Label "Test two begin" -Value "Yes it does" -FullWidth $false
New-UDButton -Text "TEST" -OnClick {
$FieldValue = (Get-UDElement -id 'INPUT').Attributes.value
Show-UDToast -Message "You selected $FieldValue" -Position topLeft -Duration 4000
}
}
This example uses the UDSelector component I built, in-conjunction with this component to dynamically display input fields of the selected process IDs.
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
}
}
}
)