Very new Powershell Universal User here. Being using in DEV and company is about to purchase the license.
I'm creating an app that has several types of inputs to collect. I need some of the input to be required by the end user. How can I make New-UDTextbox a required field?
AI suggested there is a -Required switch....but looking at the cmdlet documentation I don't see that or any other switch that might help me here.
Curious if anyone has a solution.
you could use the -onvalidate option.
Either for each input text field, or you wrap all input fields with a form and use -onvalidate on the form. The latter way you would block submission until all required field are filled.
I've tried this....but I can leave the box empty and move on without anything stopping me.
New-UDTextBox -Id 'emailAddress' -Label 'Email Address' -Placeholder 'Enter your email address' -FullWidth -OnValidate {
If ($EventData -eq $null)
{
New-UDValidationResult -ValidationError "Email Address is a required field."
}
}
Is that what you were thinking?
Also i am using New-UDStepper. So i just saw it has "-OnValidateStep". so maybe there is where i need to define these conditions to display to the end user that certain fields are required. I will give that a go.
Almost.
If you use a form you can validate both.
E.g. each field for syntax or values
and the whole form for being filled completely.
By using an array to define all fields you can be granular.
Using a $page scope variable makes sure the content is available in all UD elements.
New-UDPage -Name "formtest" -Content {
$page:form=@{
fields=@(
@{
ID="givenName"
Label="Given Name"
}
@{
ID="lastName"
Label="Last Name"
}
@{
ID="empID"
Label="Employee ID"
}
)
}
New-UDForm -Id 'MultiFieldForm' -Content {
New-UDStack -Direction Column -Spacing 2 -Children {
foreach ($field in $page:form.fields) {
New-UDTextbox -Id "$($field.ID)" -Label "$($field.Label)" -OnValidate {
if ([string]::IsNullOrWhiteSpace($EventData)) {
New-UDValidationResult -ValidationError "$($field.Label) is required"
} else {
New-UDValidationResult -Valid
}
}
}
}
} -OnValidate {
$FormContent=$EventData
$Errors=@()
foreach ($field in $page:form.fields) {
if ([string]::IsNullOrWhiteSpace($FormContent.($field.ID))) { $Errors+="$($FormContent.$field.Label)" }
}
if ($Errors.Count -gt 0) {
New-UDFormValidationResult -ValidationError "Please fill out all required fields: $($Errors -join ", ")"
} else {
New-UDFormValidationResult -Valid
}
} -OnSubmit {
Show-UDToast -Message "All fields valid! Submitting: $($EventData | convertto-json )" -Duration 4000
} -SubmitText "whatever text you like for the submit action" -ButtonVariant outlined
}stepper is more guided and the user is required to input step by step.
It is a bit more effort but might be the right option to chose depending on your requirements.
It certainly can do the validation as well.
I am not a big fan of UD Form, so I wrote my own highly customizable validation module. It works like a charm across all of my applications
Also i am using New-UDStepper. So i just saw it has "-OnValidateStep". so maybe there is where i need to define these conditions to display to the end user that certain fields are required. I will give that a go.
@jdietz
It's true that New-UDTextbox does not have an explicit -Required switch. PowerShell Universal applications are deeply interactive React apps so validation isn't handled by the browser directly.
As @deroppi hinted at, because you are using New-UDStepper, the correct place to enforce required fields is in the -OnValidateStep block of the Stepper itself, not on the Textbox.
Here is exactly how you block a user from advancing in your Stepper if a textbox is empty:New-UDStepper -Steps { New-UDStep -Label "Step 1" -OnLoad { New-UDTextbox -Id "txtStep1" -Label "Required Email Address" } New-UDStep -Label "Step 2" -OnLoad { New-UDTypography -Text "You made it to Step 2!" }} -OnFinish { Show-UDToast -Message "Finished!"} -OnValidateStep { $Context = $EventData # Explicitly check if we are on Step 1 (Steps are 0-indexed) and if our textbox is blank if ($Context.CurrentStep -eq 0 -and [string]::IsNullOrWhiteSpace($Context.Context.txtStep1)) { # This will pop up a red error below the stepper and disable the Next button New-UDValidationResult -ValidationError "Email Address is a required field." } else { # Let them pass! New-UDValidationResult -Valid }}
🎰 Bonus Trick
If you want to add the visual red asterisk (*) next to the label so users know it's required before they hit next, you can actually pass raw Material UI attributes through using the -Attributes parameter on New-UDTextbox.New-UDTextbox -Id "txtStep1" -Label "Email Address" -Attributes @{ required = $true }
Just remember, that asterisk is only visual for the user. You still must use -OnValidateStep (for a Stepper) or -OnValidate (on a New-UDForm) to actually prevent them from submitting empty data.
Please let us know how you fare