Transition Visibility Not Updating Based on Selector Value After Navigation or Refresh

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.