Stepper
Stepper component for Universal Dashboard
Steppers convey progress through numbered steps. It provides a wizard-like workflow.
Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved. The stepper supports storing input data in the stepper context. It supports the following controls.

Stepper

1
New-UDStepper -Steps {
2
New-UDStep -OnLoad {
3
New-UDElement -tag 'div' -Content { "Step 1" }
4
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
5
} -Label "Step 1"
6
New-UDStep -OnLoad {
7
New-UDElement -tag 'div' -Content { "Step 2" }
8
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
9
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
10
} -Label "Step 2"
11
New-UDStep -OnLoad {
12
New-UDElement -tag 'div' -Content { "Step 3" }
13
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
14
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
15
} -Label "Step 3"
16
} -OnFinish {
17
New-UDTypography -Text 'Nice! You did it!' -Variant h3
18
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
19
}
Copied!
The $Body variable will contain a JSON string that contains the current state of the stepper. You will receive information about the fields that have been defined within the stepper and info about the current step that has been completed. The $Body JSON string will have the following format.
1
{
2
context: {
3
txtStep1: "value1",
4
txtStep2: "value2",
5
txtStep3: "value3"
6
},
7
currentStep: 0
8
}
Copied!

Validating a Step

You can validate a step in a stepper by specifying the OnValidateStep parameter. The script block will receive a $Body variable with JSON that provides information about the current state of the stepper. You will need to return a validation result using New-UDValidationResult to specify whether the current step state is valid.
The JSON payload will have the following format. Note that steps are 0 indexed. If you want to validate the first step, check to make sure the step is 0.
1
{
2
context: {
3
field1: "value1"
4
},
5
currentStep: 0
6
}
Copied!
You will have to convert the JSON string to an object to work with in PowerShell and then return the validation result.
1
New-UDStepper -Steps {
2
New-UDStep -OnLoad {
3
New-UDElement -tag 'div' -Content { "Step 1" }
4
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
5
} -Label "Step 1"
6
New-UDStep -OnLoad {
7
New-UDElement -tag 'div' -Content { "Step 2" }
8
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
9
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
10
} -Label "Step 2"
11
New-UDStep -OnLoad {
12
New-UDElement -tag 'div' -Content { "Step 3" }
13
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
14
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
15
} -Label "Step 3"
16
} -OnFinish {
17
New-UDTypography -Text 'Nice! You did it!' -Variant h3
18
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
19
} -OnValidateStep {
20
$Context = $EventData
21
if ($Context.CurrentStep -eq 0 -and $Context.Context.txtStep1 -eq 'bad')
22
{
23
New-UDValidationResult
24
}
25
else
26
{
27
New-UDValidationResult -Valid
28
}
29
}
Copied!

Skipping Steps

You can direct the user to a particular step in the OnValidateStep event handler. Use the New-UDValidationResult -ActiveStep parameter to move the user to any step after clicking next. Step indices are 0 based.
This example moves the user to the last step after completing the first step.
1
New-UDStepper -Steps {
2
New-UDStep -OnLoad {
3
New-UDElement -tag 'div' -Content { "Step 1" }
4
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
5
} -Label "Step 1"
6
New-UDStep -OnLoad {
7
New-UDElement -tag 'div' -Content { "Step 2" }
8
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
9
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
10
} -Label "Step 2"
11
New-UDStep -OnLoad {
12
New-UDElement -tag 'div' -Content { "Step 3" }
13
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
14
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
15
} -Label "Step 3"
16
} -OnFinish {
17
New-UDTypography -Text 'Nice! You did it!' -Variant h3
18
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
19
} -OnValidateStep {
20
$Context = $EventData
21
if ($Context.CurrentStep -eq 0 -and $Context.Context.txtStep1 -eq 'bad')
22
{
23
New-UDValidationResult
24
}
25
else
26
{
27
New-UDValidationResult -Valid -ActiveStep 2
28
}
29
}
Copied!

Disable Previous Button

You can disable the previous button by using the -DisablePrevious parameter of New-UDValidationResult .
This example disables the previous step whenever the user moves forward in the stepper.
1
New-UDStepper -Steps {
2
New-UDStep -OnLoad {
3
New-UDElement -tag 'div' -Content { "Step 1" }
4
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
5
} -Label "Step 1"
6
New-UDStep -OnLoad {
7
New-UDElement -tag 'div' -Content { "Step 2" }
8
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
9
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
10
} -Label "Step 2"
11
New-UDStep -OnLoad {
12
New-UDElement -tag 'div' -Content { "Step 3" }
13
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
14
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
15
} -Label "Step 3"
16
} -OnFinish {
17
New-UDTypography -Text 'Nice! You did it!' -Variant h3
18
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
19
} -OnValidateStep {
20
New-UDValidationResult -Valid -DisablePrevious
21
}
Copied!

Vertical Steppers

You can create a vertical stepper by setting the -Orientation parameter to vertical.
1
New-UDStepper -Steps {
2
New-UDStep -OnLoad {
3
New-UDElement -tag 'div' -Content { "Step 1" }
4
New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.txtStep1
5
} -Label "Step 1"
6
New-UDStep -OnLoad {
7
New-UDElement -tag 'div' -Content { "Step 2" }
8
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
9
New-UDTextbox -Id 'txtStep2' -Value $EventData.Context.txtStep2
10
} -Label "Step 2"
11
New-UDStep -OnLoad {
12
New-UDElement -tag 'div' -Content { "Step 3" }
13
New-UDElement -tag 'div' -Content { "Previous data: $Body" }
14
New-UDTextbox -Id 'txtStep3' -Value $EventData.Context.txtStep3
15
} -Label "Step 3"
16
} -OnFinish {
17
New-UDTypography -Text 'Nice! You did it!' -Variant h3
18
New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
19
} -Orientation 'vertical'
Copied!
New-UDStepper
Name
Type
Description
Required
Id
String
The ID of the component. It defaults to a random GUID.
false
ActiveStep
Int32
Sets the active step. This should be the index of the step.
false
Steps
ScriptBlock
The steps for this stepper. Use New-UDStep to create new steps.
true
NonLinear
SwitchParameter
Allows the user to progress to steps out of order.
false
AlternativeLabel
SwitchParameter
Places the step label under the step number.
false
OnFinish
Endpoint
A script block that is executed when the stepper is finished.
true
OnValidateStep
Endpoint
A script block that is executed when validating each step.
false
Orientation
string
Vertical or Horizontal
false
New-UDStep
Name
Type
Description
Required
Id
String
The ID of the component. It defaults to a random GUID.
false
OnLoad
Endpoint
The script block that is executed when the step is loaded. The script block will receive the $Body parameter which contains JSON for the current state of the stepper. If you are using form controls, their data will be availalble in the $Body.Context property.
true
Label
String
A label for this step.
false
Optional
SwitchParameter
Whether this step is optional.
false
Last modified 5mo ago