PowerShell Universal
Ironman SoftwareForums
v2
v2
  • About
  • Get Started
  • Additional Resources
  • Installation
    • Docker
    • Upgrading
  • Licensing
  • System Requirements
  • Supported Browsers
  • Cmdlet Help
  • Templates
  • API
    • About
    • Endpoints
    • Security
    • Error Handling
    • Rate Limiting
  • Automation
    • About Automation
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • Terminals
    • Triggers
  • User Interfaces
    • About
    • Dashboards
      • Building Dashboards
      • Components
        • Dashboards
        • Pages
        • Dynamic Regions
        • Element
        • Error Boundary
        • HTML
        • Building Custom Components
        • Data Display
          • Alert
          • Chip
          • Date and Time
          • Icon
          • List
          • Table
          • Tree View
          • Typography
        • Data Visualization
          • Charts
          • Map
        • Feedback
          • Backdrop
          • Modal
          • Progress
          • Skeleton
        • Inputs
          • Autocomplete
          • Button
          • Checkbox
          • Code Editor
          • Date Picker
          • Editor
          • Floating Action Button
          • Form
          • Radio
          • Select
          • Slider
          • Switch
          • Textbox
          • Time Picker
          • Transfer List
          • Upload
        • Navigation
          • Drawer
          • Link
          • Menu
          • Stepper
          • Tabs
        • Layout
          • Grid Layout
          • Grid
          • Hidden
        • Utilities
          • Transitions
        • Surfaces
          • AppBar
          • Card
          • Paper
          • Expansion Panel
      • Interaction
      • Marketplace
      • Role Based Access
      • Scheduled Endpoints
      • Sessions
      • Themes
        • Cascading Style Sheets
        • Styles
      • Custom Variable Scopes
      • Migrating From Universal Dashboard 2.9
    • Pages
      • Alerts
      • Bar Chart
      • Button
      • Form
      • iFrame
      • Image
      • Line Chart
      • Liquid Chart
      • Paragraph
      • Statistic
      • Table
      • Variables
  • Platform
    • Cache
    • Desktop Mode
      • Hotkeys
    • Modules
    • Monitoring
    • Published Folders
    • Templates
    • Variables
  • Configuration
    • About
    • API
    • Environments
    • Git
    • Hosting
      • Azure
      • IIS
      • Single-File
    • Login Page
    • Management API
    • Settings
    • Security
      • Access Controls
      • App Tokens
      • Client Certificate
      • OpenID Connect
      • SAML2
      • WS-Federation
    • Repository
    • Running as a Service Account
  • Development
    • Debugging Scripts
    • Editor
    • Hangfire
    • Logging
    • Profiling
    • Visual Studio Code Extension
  • Changelog
  • Extension Changelog
  • Legacy Universal Dashboard Docs
Powered by GitBook

Copyright 2025 Ironman Software

On this page
  • Stepper
  • Validating a Step
  • Skipping Steps
  • Disable Previous Button
  • Vertical Steppers
  • API

Was this helpful?

  1. User Interfaces
  2. Dashboards
  3. Components
  4. Navigation

Stepper

Stepper component for Universal Dashboard

PreviousMenuNextTabs

Last updated 3 years ago

Was this helpful?

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

New-UDStepper -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.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' -Value $EventData.Context.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' -Value $EventData.Context.txtStep3
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
}

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.

{
    context: {
        txtStep1: "value1",
        txtStep2: "value2",
        txtStep3: "value3"
    },
    currentStep: 0
}

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.

{
    context: {
        field1: "value1" 
    },
    currentStep: 0
}

You will have to convert the JSON string to an object to work with in PowerShell and then return the validation result.

New-UDStepper -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.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' -Value $EventData.Context.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' -Value $EventData.Context.txtStep3
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
    $Context = $EventData
    if ($Context.CurrentStep -eq 0 -and $Context.Context.txtStep1 -eq 'bad')
    {
        New-UDValidationResult 
    }
    else
    {
        New-UDValidationResult -Valid 
    }
}

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.

New-UDStepper -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.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' -Value $EventData.Context.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' -Value $EventData.Context.txtStep3
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
    $Context = $EventData
    if ($Context.CurrentStep -eq 0 -and $Context.Context.txtStep1 -eq 'bad')
    {
        New-UDValidationResult 
    }
    else
    {
        New-UDValidationResult -Valid -ActiveStep 2
    }
}

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.

New-UDStepper -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.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' -Value $EventData.Context.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' -Value $EventData.Context.txtStep3
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -OnValidateStep {
    New-UDValidationResult -Valid -DisablePrevious
}

Vertical Steppers

You can create a vertical stepper by setting the -Orientation parameter to vertical.

New-UDStepper -Steps {
    New-UDStep -OnLoad {
        New-UDElement -tag 'div' -Content { "Step 1" }
        New-UDTextbox -Id 'txtStep1' -Value $EventData.Context.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' -Value $EventData.Context.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' -Value $EventData.Context.txtStep3
    } -Label "Step 3"
} -OnFinish {
    New-UDTypography -Text 'Nice! You did it!' -Variant h3
    New-UDElement -Tag 'div' -Id 'result' -Content {$Body}
} -Orientation 'vertical'

API

New-UDStepper
New-UDStep
New-UDValidationResult
Autocomplete
Checkbox
Date Picker
Radio
Select
Slider
Switch
Textbox
Time Picker
Upload