UDStepper issues

Hey,

When using the stepper I am having 2 issues:

  1. “Previous data: $Body”

This is displaying the information as follows

image

Clients Full Name: {“context”:{“ClientsFullName”:“test”}}

  1. Validation
    If you go forward then back and wipe the cell it will pass validation
    Clients Full Name: {“context”:{“ClientsFullName”:"",“ClientsFQDN”:null}}

Code
New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -tag ‘div’ -Content { “Clients Full Name” }
New-UDTextbox -Id ‘ClientsFullName’ -Value $EventData.Context.ClientsFullName
} -Label “1. Clients Full Name”
New-UDStep -OnLoad {
New-UDElement -tag ‘div’ -Content { “Clients Full Name: $body”}
New-UDElement -tag ‘div’ -Content { “Clients FQDN” }

				New-UDTextbox -Id 'ClientsFQDN' -Value $EventData.Context.ClientsFQDN
			} -Label "2. Clients FQDN"
		} -OnFinish {
			New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
		} -OnValidateStep {
			$Context = $EventData
			if ($Context.CurrentStep -eq 0 -and $Context.Context.ClientsFullName -eq $null) #-or $EventData.Context.ClientsName -notmatch "(.|\s)*\S(.|\s)*"))
			{
				New-UDValidationResult 
			}
			else
			{
				New-UDValidationResult -Valid 
			}
		} -Orientation 'vertical'

Also when added to a UD card and the orientation set to normal the display does not match how the stepper would look normally.


This is the same behavior for paper too.

You’ll need to update your validation to check for an empty string.

 $Context.Context.ClientsFullName -ne ''

You can use the [String]::IsNullOrEmpty method to simplify the check.

-not [string]::IsNullOrEmpty($Context.Context.ClientsFullName)
1 Like

I got this working, but now a new issue has presented its self. It looks like the current step value is not there after the first step as no validation happens after step 0.

New-UDCard -TitleAlignment "center" -Title "New Client" -Content { 
	New-UDStepper -id "newclient" -Steps {		
		New-UDStep -OnLoad {
			New-UDElement -tag 'div' -Content { "Clients Full Name" }
			New-UDTextbox -Id 'ClientsFullName' -Value $EventData.Context.ClientsFullName
		} -Label "Step 1" 
		New-UDStep -OnLoad {
			$LastResults = $Body | ConvertFrom-Json 
			New-UDElement -tag 'div' -Content { "Client Name: "+$LastResults.context.ClientsFullName}
			New-UDElement -tag 'div' -Content { "Clients FQDN" }
			New-UDTextbox -Id 'ClientsFQDN' -Value $EventData.Context.ClientsFQDN
		} -Label "Step 2"
		New-UDStep -OnLoad {
			$LastResults = $Body | ConvertFrom-Json
			New-UDElement -tag 'div' -Content { "Client Name: "+$LastResults.context.ClientsFullName}
			New-UDElement -tag 'div' -Content { "Clients FQDN: "+$LastResults.context.ClientsFQDN}
			New-UDElement -tag 'div' -Content { "Clients Production DNS Server" }
			New-UDTextbox -Id 'ClientsProductionDNSServer' -Value $EventData.Context.ClientsProductionDNSServer
		} -Label "Step 3"
		New-UDStep -OnLoad {
			$LastResults = $Body | ConvertFrom-Json
			New-UDElement -tag 'div' -Content { "Client Name: "+$LastResults.context.ClientsFullName}
			New-UDElement -tag 'div' -Content { "Clients FQDN: "+$LastResults.context.ClientsFQDN}
			New-UDElement -tag 'div' -Content { "Clients Production DNS Server: "+$LastResults.context.ClientsProductionDNSServer}
			New-UDElement -tag 'div' -Content { "Clients Disaster Recovery DNS Server" }
			New-UDTextbox -Id 'ClientsDisasterRecoveryDNSServer' -Value $EventData.Context.ClientsDisasterRecoveryDNSServer
		} -Label "Step 4" -optional
	} -OnFinish {
		New-UDCard -TitleAlignment "center" -Title "Confirm" -Content { 
			$LastResults = $Body | ConvertFrom-Json
			$output = @(
				[pscustomobject]@{
					Details = 'Client Name'
					Data= $LastResults.context.ClientsFullName
				}
				[pscustomobject]@{
					Details = 'Clients FQDN'
					Data= $LastResults.context.ClientsFQDN
				}
				[pscustomobject]@{
					Details = 'Clients Production DNS Server'
					Data= $LastResults.context.ClientsProductionDNSServer
				}
				[pscustomobject]@{
					Details = 'Clients Disaster Recovery DNS Server'
					Data= $LastResults.context.ClientsDisasterRecoveryDNSServer
				}
			)
			New-UDGrid -Container -Content {
				New-UDGrid -Item -ExtraSmallSize 12 -Content {
					New-UDTable -data $output
				}
				New-UDGrid -Item -ExtraSmallSize 3 -Content {
					New-UDButton -Icon (New-UDIcon -Icon rocket) -Text 'Deploy' -OnClick {
					
					}
				}
				New-UDGrid -Item -ExtraSmallSize 3 -Content {
				}
				New-UDGrid -Item -ExtraSmallSize 3 -Content {
				}
				New-UDGrid -Item -ExtraSmallSize 3 -Content {
					New-UDButton -Icon (New-UDIcon -Icon ban) -Text 'Cancel' -OnClick {
					}
				}
			}
		}
	} -OnValidateStep {
		$Context = $EventData
		if ($Context.CurrentStep -eq 0 -and $Context.Context.ClientsFullName -eq $null -or $Context.Context.ClientsFullName -notmatch "(.|\s)*\S(.|\s)*")
		{
			New-UDValidationResult 
		}
		else
		{
			New-UDValidationResult -Valid 
		}
		if ($Context.CurrentStep -eq 1 -and $Context.Context.ClientsFQDN -eq $null -or $Context.Context.ClientsFQDN -notmatch "(.|\s)*\S(.|\s)*")
		{
			New-UDValidationResult 
		}
		else
		{
			New-UDValidationResult -Valid 
		}
		if ($Context.CurrentStep -eq 2 -and $Context.Context.ClientsProductionDNSServer -eq $null -or $Context.Context.ClientsProductionDNSServer -notmatch "\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b")
		{
			New-UDValidationResult 
		}
		else
		{
			New-UDValidationResult -Valid 
		}
		if ($Context.CurrentStep -eq 3 -and $Context.Context.ClientsDisasterRecoveryDNSServer -eq $null -or $Context.Context.ClientsDisasterRecoveryDNSServer -notmatch "\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b")
		{
			New-UDValidationResult 
		}
		else
		{
			New-UDValidationResult -Valid 
		}
	}-Orientation 'vertical' 
}

I’d recommend using [string]::IsNullOrWhiteSpace() over [string]::IsNullOrEmpty().
The former will evaluate a string containing only whitespace characters as $true as well

1 Like

@Support

You need to adjust your validation logic. Try this.

New-UDDashboard -Title "Hello, World!" -Content {
    New-UDCard -TitleAlignment "center" -Title "New Client" -Content { 
        New-UDStepper -id "newclient" -Steps {		
            New-UDStep -OnLoad {
                New-UDElement -tag 'div' -Content { "Clients Full Name" }
                New-UDTextbox -Id 'ClientsFullName' -Value $EventData.Context.ClientsFullName
            } -Label "Step 1" 
            New-UDStep -OnLoad {
                $LastResults = $Body | ConvertFrom-Json 
                New-UDElement -tag 'div' -Content { "Client Name: "+$LastResults.context.ClientsFullName}
                New-UDElement -tag 'div' -Content { "Clients FQDN" }
                New-UDTextbox -Id 'ClientsFQDN' -Value $EventData.Context.ClientsFQDN
            } -Label "Step 2"
            New-UDStep -OnLoad {
                $LastResults = $Body | ConvertFrom-Json
                New-UDElement -tag 'div' -Content { "Client Name: "+$LastResults.context.ClientsFullName}
                New-UDElement -tag 'div' -Content { "Clients FQDN: "+$LastResults.context.ClientsFQDN}
                New-UDElement -tag 'div' -Content { "Clients Production DNS Server" }
                New-UDTextbox -Id 'ClientsProductionDNSServer' -Value $EventData.Context.ClientsProductionDNSServer
            } -Label "Step 3"
            New-UDStep -OnLoad {
                $LastResults = $Body | ConvertFrom-Json
                New-UDElement -tag 'div' -Content { "Client Name: "+$LastResults.context.ClientsFullName}
                New-UDElement -tag 'div' -Content { "Clients FQDN: "+$LastResults.context.ClientsFQDN}
                New-UDElement -tag 'div' -Content { "Clients Production DNS Server: "+$LastResults.context.ClientsProductionDNSServer}
                New-UDElement -tag 'div' -Content { "Clients Disaster Recovery DNS Server" }
                New-UDTextbox -Id 'ClientsDisasterRecoveryDNSServer' -Value $EventData.Context.ClientsDisasterRecoveryDNSServer
            } -Label "Step 4" -optional
        } -OnFinish {
            New-UDCard -TitleAlignment "center" -Title "Confirm" -Content { 
                $LastResults = $Body | ConvertFrom-Json
                $output = @(
                    [pscustomobject]@{
                        Details = 'Client Name'
                        Data= $LastResults.context.ClientsFullName
                    }
                    [pscustomobject]@{
                        Details = 'Clients FQDN'
                        Data= $LastResults.context.ClientsFQDN
                    }
                    [pscustomobject]@{
                        Details = 'Clients Production DNS Server'
                        Data= $LastResults.context.ClientsProductionDNSServer
                    }
                    [pscustomobject]@{
                        Details = 'Clients Disaster Recovery DNS Server'
                        Data= $LastResults.context.ClientsDisasterRecoveryDNSServer
                    }
                )
                New-UDGrid -Container -Content {
                    New-UDGrid -Item -ExtraSmallSize 12 -Content {
                        New-UDTable -data $output
                    }
                    New-UDGrid -Item -ExtraSmallSize 3 -Content {
                        New-UDButton -Icon (New-UDIcon -Icon rocket) -Text 'Deploy' -OnClick {
                        
                        }
                    }
                    New-UDGrid -Item -ExtraSmallSize 3 -Content {
                    }
                    New-UDGrid -Item -ExtraSmallSize 3 -Content {
                    }
                    New-UDGrid -Item -ExtraSmallSize 3 -Content {
                        New-UDButton -Icon (New-UDIcon -Icon ban) -Text 'Cancel' -OnClick {
                        }
                    }
                }
            }
        } -OnValidateStep {
            $Context = $EventData
            if ($Context.CurrentStep -eq 0 -and $Context.Context.ClientsFullName -ne $null -and $Context.Context.ClientsFullName -match "(.|\s)*\S(.|\s)*")
            {
                New-UDValidationResult -Valid
            }
            elseif ($Context.CurrentStep -eq 1 -and $Context.Context.ClientsFQDN -ne $null -and $Context.Context.ClientsFQDN -match "(.|\s)*\S(.|\s)*")
            {
                New-UDValidationResult  -Valid
            }
            elseif ($Context.CurrentStep -eq 2 -and $Context.Context.ClientsProductionDNSServer -ne $null -and $Context.Context.ClientsProductionDNSServer -match "\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b")
            {
                New-UDValidationResult  -Valid
            }
            elseif ($Context.CurrentStep -eq 3 -and $Context.Context.ClientsDisasterRecoveryDNSServer -ne $null -or $Context.Context.ClientsDisasterRecoveryDNSServer -match "\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b")
            {
                New-UDValidationResult  -Valid
            }
            else
            {
                New-UDValidationResult 
            }
        }-Orientation 'vertical' 
    }
}

Thanks that works

1 Like