Textbox

Textbox component for Universal Apps

A textbox lets users enter and edit text.

Textbox

New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
New-UDTextbox -Label 'Disabled' -Placeholder 'Textbox' -Disabled
New-UDTextbox -Label 'Textbox' -Value 'With value'

Textbox Types

Textboxes can be switched to accept specific types, such as passwords, numbers, or emails.

Password Type

A password textbox will mask the input.

New-UDTextbox -Label 'Password' -Type password

Number Type

Only accepts numbers. Some browsers will include up and down arrows to increase and decrease the current value.

New-UDTextbox -Label 'Number' -Type number -Minimum 10 -Maximum 10000 -Value 1234

Multiline

You can create a multiline textbox by using the -Multiline parameter. Pressing enter will add a new line. You can define the number of rows and the max number of rows using -Rows and -RowsMax.

New-UDTextbox -Multiline -Rows 4 -RowsMax 10

Interaction

Retrieving a textbox value

You can use Get-UDElement to get the value of a textbox

New-UDTextbox -Id 'txtExample' 
New-UDButton -OnClick {
    $Value = (Get-UDElement -Id 'txtExample').value 
    Show-UDToast -Message $Value
} -Text "Get textbox value"

Setting the textbox value

New-UDTextbox -Id 'txtExample' -Label 'Label' -Value 'Value'

New-UDButton -OnClick {

    Set-UDElement -Id 'txtExample' -Properties @{
        Value = "test123"
    }

} -Text "Get textbox value"

Icons

You can set the icon of a textbox by using the -Icon parameter and the New-UDIcon cmdlet.

New-UDTextbox -Id "ServerGroups" -Icon (New-UDIcon -Icon 'server') -Value "This is my server"

Masking

You can use the -MaskPattern to define a mask for the textbox. The following is an example of a textbox mask.

New-UDTextbox -Id 'textbox16' -MaskPattern '[phone]'

The definition can contain

• 0 - any digit

• a - any letter

• * - any char

• other chars which are not in custom definitions supposed to be fixed

• [] - make input optional

• {} - include fixed part in unmasked value

• ` - prevent symbols shift back

If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0).

The masking for the textbox is controlled by imaskjs.

OnEnter

The -OnEnter event handler is executed when the user presses enter in the text field. It is useful for performing other actions, like clicking a button, on enter.

New-UDTextbox -OnEnter {
    Invoke-UDEndpoint -Id 'submit' -Session
}

New-UDButton -Id 'submit' -OnClick {
    Show-UDToast -Message 'From Textbox'
}

OnBlur

The -OnBlur event handler is executed when the textbox loses focus.

New-UDTextbox -OnBlur {
    Show-UDToast "Blurred"
}

OnValidate

Use the -OnValidate event handler to validate input typed in the textbox.

New-UDTextbox -OnValidate {
    if ($EventData.Length -lt 10)
    {
        New-UDValidationResult -ValidationError 'String needs to be longer than 10'
    }
}

API

New-UDTextbox