Product: PowerShell Universal
Version: 5.5
I have a stepper component with a selector and a textbox inside a transition. The textbox is shown or hidden based on the selected option.
The selector has two options: "staff" and "contractor". If "contractor" is selected, the Staff ID textbox should be hidden.
The issue is:
If I move to the next step and then go back, "contractor" is still selected, but the textbox is incorrectly visible.
The same happens if I refresh the page.
In both cases, the textbox appears even though the current selection should hide it.
New-UDApp -Content {
New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtTicketNo' -Value $EventData.Context.txtTicketNo
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 2" }
New-UDElement -Tag 'div' -Content { "Previous data: $Body" }
$bodydata = $body | convertfrom-json
Show-UDToast "Role is: $($bodydata.context.Role)"
if ($bodydata.context.Role -eq 1) {
Set-UDElement -Id 'toggleStaffID' -Properties @{
in = $EventData -eq 'True'
}
}
else {
Set-UDElement -Id 'toggleStaffID' -Properties @{
in = 'false'
}
}
New-UDSelect -Id 'Role' -DefaultValue $EventData.Context.Role -Option {
New-UDSelectOption -Name 'Staff' -Value 1
New-UDSelectOption -Name 'Contractor' -Value 2
} -OnChange {
if ($EventData -eq 1) {
Show-UDToast $EventData
Set-UDElement -Id 'toggleStaffID' -Properties @{
in = $EventData -eq 'True'
}
}
else {
Set-UDElement -Id 'toggleStaffID' -Properties @{
in = 'false'
}
}
}
New-UDTransition -Id 'toggleStaffID' -Content {
New-UDTextbox -Id 'txtStaffID' -Value $EventData.Context.txtStaffID -Label 'Staff ID'
} -Collapse -CollapseHeight 100 -Timeout 1000
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 3" }
New-UDElement -Tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content { $Body }
}
}
Hi,
when working with visibility and dynamic inputs I suggest to use the New-UDDynamic funtionality because the homepage is built like line for line so some variables can get not loaded in time which will result in wrongly shown fields.
Here is your code but adapted with New-UDDynamic and some other small changes which works for me:
....
New-UDSelect -Id 'Role' -DefaultValue $EventData.Context.Role -Option {
New-UDSelectOption -Name 'Staff' -Value 1
New-UDSelectOption -Name 'Contractor' -Value 2
} -OnChange {
Sync-UDElement -Id "dynamic_toggleStaffId"
}
New-UDDynamic -Id "dynamic_toggleStaffId" -Content {
$ShowTransition = switch((Get-UDElement -Id "Role").Value) {
"1" {
$true
}
Default {
$false
}
}
New-UDTransition -Id 'toggleStaffID' -Content {
New-UDTextbox -Id 'txtStaffID' -Value $EventData.Context.txtStaffID -Label 'Staff ID'
} -Collapse -CollapseHeight 100 -Timeout 1000 -In:$ShowTransition
}
....
Hi Ricky,
Welcome!
If I’ve understood your question right, then you are asking for the new-UDtextbox called Staff ID to popup when Staff is picked from the dropdown box - I’ve added an example here that can do that.
I’ve also disabled the “back” button. This was done because the Staff ID box does not disappear when you go back - You could play around with New-UDdynamic and Remove-UDelement to see if you can remove it on going back, but I thought that this was more clean.
Also, the New-UDTransition did not work with this setup. Not sure why - Haven’t spend much time testing it honestly.
Another option is to add validation - So that people cannot go to the next step unless they pick the right combination of fields.
New-UDApp -Content {
New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 1" }
New-UDTextbox -Id 'txtTicketNo' -Value $EventData.Context.txtTicketNo
} -Label "Step 1"
### My changes below
New-UDStep -OnLoad {
## Selection box for Contractor/Staff
New-UDSelect -Option {
New-UDSelectOption -Name "Contractor"
New-UDSelectOption -Name "Staff"
} -Id 'MySelect' -OnChange {
## We use the session state to store our choice - You could use Page instead of session if you thinnk it's too broad
$Session:SelectState = $EventData
Sync-UDElement -Id "MyDynamicContent"
}
## We use dynamic content to control textbox visibility
New-UDDynamic -Content {
## If choice equals staff -> show textbox - remove textbox if choice changes to contractor
If ($Session:SelectState -eq "Staff") {
## New-udtransition combined with a new-udtextbox does not seem to work...
New-UDDivider -Orientation vertical
New-UDTextbox -Id 'txtStaffID' -Label 'Staff ID' -OnEnter {
$Session:StaffTextID = $EventData
}
}
} -Id "MyDynamicContent"
} -Label "Step 2"
## Down here I've added a DisablePrevious to make sure that people don't go back.
### End of my changes
New-UDStep -DisablePrevious -OnLoad {
New-UDElement -Tag 'div' -Content { "Step 3" }
New-UDElement -Tag 'div' -Content { "Previous data: $Body" }
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
} -Label "Step 3"
} -OnFinish {
New-UDTypography -Text 'Nice! You did it!' -Variant h3
New-UDElement -Tag 'div' -Id 'result' -Content { $Body }
##Validation steps
} -OnValidateStep {
## Step one will always go thorugh
If ($EventData.Currentstep -eq 0) {
New-UDValidationResult -Valid
}
## Step 2 needs staff from droppdown box and data in the Staff ID to not be empty
elseIf ($EventData.Currentstep -eq 1 -and $Session:SelectState -eq "Staff" -and [string]::IsNullOrEmpty($Session:StaffTextID) -eq $true) {
New-UDValidationResult -Valid
}
## Step 2 can also be valid if contractor is picked
elseIf ($EventData.Currentstep -eq 1 -and $Session:SelectState -eq "Contractor") {
New-UDValidationResult -Valid
}
## Step 3 will always go through
elseIf ($EventData.Currentstep -eq 2) {
New-UDValidationResult -Valid
}
else {
New-UDValidationResult -ValidationError "Please Fill out all the required fields"
}
}
## End of validation steps
}
Hi,
Thank you so much for your help this is exactly what I was trying to do.
Hi,
Thanks for all your help, not quite what I wanted but useful all the same. Ms-Marox post works exactly how I wanted. But once again thanks for your help.