Disabling Stepper next button

Product: PowerShell Universal
Version: 5.5.5

I have created a Stepper with a number of fields, I have a validation script block which checks if the fields contain content. What I would like to do is disable the Next button if all the fields have not been validated as valid i.e., containing content.

Is there a way to do this?

Hi Ricky

Here is an example that “prevents” you from moving on unless the validation conditions have been completed.


    New-UDStepper -Id 'demoStepper' -Steps {
        # Step 1
        New-UDStep -Label 'Basic' -OnLoad {
            New-UDTextbox -Id 'txtName' -Label 'Name'
        }

        # Step 2
        New-UDStep -Label 'More' -OnLoad {
            New-UDTextbox -Id 'txtAge' -Label 'Age' -Type number
        }

        # Review
        New-UDStep -Label 'Review' -OnLoad {
            New-UDMarkdown -Markdown ("**Name:** {0}  `n**Age:** {1}" -f $EventData.Context.txtName, $EventData.Context.txtAge)
        }
    } -OnValidateStep {
        $ctx = $EventData  # has .CurrentStep and .Context
        ## CurrentStep can be used to target a specific step (starts from 0)
        ## ID (in this case txtName and txtAge) can be used for other logic.
        ## Context contains all the data you have submitted so fare. 
        
        ## This modal will show you what information is in EventData throughout each step.
        Show-UDModal -Content {
            
            New-UDMarkdown -markdown ("**txtName:** {0} `n **txtAge:** {1} `n **context:** {2} `n **currentstep:** {3} `n **Condition:** {4}" -f $ctx.txtName,$ctx.txtAge, $ctx.context, $ctx.currentStep, $(([int]$EventData.txtAge -is [int])))

        }

        ## You can use the currentStep and/or the ID of your textbox/other components for validation
        ## Here we look at the first step and make sure that the text box with the id txtName is not empty
        If ($ctx.currentStep -eq 0) {

            If  ([string]::IsNullOrWhiteSpace($ctx.txtName)) {
                New-UDValidationResult -ValidationError "Please fill out the text box"
            } 

        }
        

        ## Here we target the second step and are checking if our textbox contains an int
        ## New-udtextbox can also be set to type number as I've done above. But for whatever reason it will still take text.. So this condition will prevent that.
         if ($ctx.CurrentStep -eq 1) {       
            $raw = $ctx.txtAge
            if ($null -eq $raw -or $raw -notmatch '^\d+$') {
                New-UDValidationResult -ValidationError 'Will only accept a number'
              
            }
        }

        ## make sure to always return valid at the end
        New-UDValidationResult -Valid

    } -OnFinish {
        Show-UDToast -Message 'Done!' -Duration 2500
    }