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!

API

Last modified 5mo ago