New-UDStepper

Synopsis

Creates a new stepper component.

Syntax

New-UDStepper [[-Id] <String>] [[-ActiveStep] <Int32>] [-Children] <ScriptBlock> [-NonLinear] [-AlternativeLabel] [-OnFinish] <Endpoint> [[-OnCancel] <Endpoint>] [[-OnValidateStep] <Endpoint>] [[-Orientation] <String>] [[-NextButtonText] <String>] [[-BackButtonText] <String>] [[-FinishButtonText] <String>] [[-CancelButtonText] <String>] [[-ClassName] <String>] [[-Style] <Hashtable>] [[-Sx] <Hashtable>] [<CommonParameters>]

Description

Creates a new stepper component. Steppers can be used as multi-step forms or to display information in a stepped manner.

Parameters

-Id

The ID of the component. It defaults to a random GUID.

Required?                    false
Position?                    1
Default value                ([Guid]::NewGuid())
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ActiveStep

Sets the active step. This should be the index of the step.

Required?                    false
Position?                    2
Default value                0
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Children

The steps for this stepper. Use New-UDStep to create new steps.

Required?                    true
Position?                    3
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-NonLinear

Allows the user to progress to steps out of order.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-AlternativeLabel

Places the step label under the step number.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnFinish

A script block that is executed when the stepper is finished.

Required?                    true
Position?                    4
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnCancel

Required?                    false
Position?                    5
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnValidateStep

[Parameter()] [Endpoint]$OnCompleteStep,

Required?                    false
Position?                    6
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Orientation

Sets the orientation of the stepper.

Required?                    false
Position?                    7
Default value                horizontal
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-NextButtonText

The text to display in the next button.

Required?                    false
Position?                    8
Default value                Next
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-BackButtonText

The text to display in the back button.

Required?                    false
Position?                    9
Default value                Back
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FinishButtonText

Required?                    false
Position?                    10
Default value                Finish
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-CancelButtonText

The text to display in the cancel button.

Required?                    false
Position?                    11
Default value                Cancel
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ClassName

A CSS class to apply to the stepper.

Required?                    false
Position?                    12
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Style

A hashtable of styles to apply to the stepper.

Required?                    false
Position?                    13
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Sx

A hashtable of styles to apply to the stepper.

Required?                    false
Position?                    14
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

Common parameters

This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about_CommonParameters.

Outputs

Examples

Example 1: Basic stepper

New-UDStepper -Id 'stepper1' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep2'
    } -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'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Creates a new stepper with three steps.

Example 2: NonLinear and AlternativeLabel

New-UDStepper -Id 'stepper2' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep23'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep24'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep25'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -NonLinear -AlternativeLabel

Creates a new stepper with three steps and non-linear and alternative label options.

Example 3: Vertical orientation

New-UDStepper -Id 'stepper3' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep5'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep6'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep7'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -Orientation 'vertical'

Creates a new stepper with three steps and vertical orientation.

Example 4: Custom button text

New-UDStepper -Id 'stepper4' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep8'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep9'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep10'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -NextButtonText 'Forward' -BackButtonText 'Reverse'

Creates a new stepper with three steps and custom button text.

Example 5: Optional step

New-UDStepper -Id 'stepper5' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep11'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep12'
    } -Label "Step 2" -Optional
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep13'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Creates a new stepper with three steps and an optional step.

Example 6: Custom icons

New-UDStepper -Id 'stepper6' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep14'
    } -Label "Step 1" -Icon (New-UDIcon -Icon 'Check')
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep15'
    } -Label "Step 2" -Icon (New-UDIcon -Icon 'Check')
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep16'
    } -Label "Step 3" -Icon (New-UDIcon -Icon 'Check')
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Creates a new stepper with three steps and custom icons.

Example 7: Validation

New-UDStepper -Id 'stepper7' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep17'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep18'
    } -Label "Step 2"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep19'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
    if ($EventData.CurrentStep -eq 0 -and [string]::IsNullOrEmpty($EventData.txtStep17)) {
        New-UDValidationResult -ValidationError 'Step 1 is required'
    }
    else {
        New-UDValidationResult -Valid
    }
}

Creates a new stepper with three steps and validation.

Example 8: Disable previous

New-UDStepper -Id 'stepper8' -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep20'
    } -Label "Step 1"
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 2" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep21'
    } -Label "Step 2" -DisablePrevious
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 3" }
        New-UDElement -tag 'div' -Content { "Previous data: $Body" }
        New-UDTextbox -Id 'txtStep22'
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

Creates a new stepper with three steps and disables the back button on the second step.

[Component("Stepper", "WandMagicSparkles", "Creates a new card.")]