> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/de/apps/components/navigation/stepper.md).

# Stepper

**Stepper stellen den Fortschritt durch numerierte Schritte dar. Sie bieten einen assistentenähnlichen Workflow.**

Stepper stellen den Fortschritt durch eine Folge logischer und numerierter Schritte dar. Sie können auch zur Navigation verwendet werden. Stepper können nach dem Speichern eines Schritts eine kurzzeitige Rückmeldung anzeigen. Der Stepper unterstützt das Speichern von Eingabedaten im Stepper-Kontext. Er unterstützt die folgenden Steuerelemente.

* [Autocomplete](/powershell-universal/de/apps/components/inputs/automcomplete.md)
* [Checkbox](/powershell-universal/de/apps/components/inputs/checkbox.md)
* [Date Picker](/powershell-universal/de/apps/components/inputs/date-picker.md)
* [Radio](/powershell-universal/de/apps/components/inputs/radio.md)
* [Select](/powershell-universal/de/apps/components/inputs/select.md)
* [Slider](/powershell-universal/de/apps/components/inputs/slider.md)
* [Switch](/powershell-universal/de/apps/components/inputs/switch.md)
* [Textbox](/powershell-universal/de/apps/components/inputs/textbox.md)
* [Time Picker](/powershell-universal/de/apps/components/inputs/time-picker.md)
* [Upload](/powershell-universal/de/apps/components/inputs/upload.md)

## Stepper

![](/files/ukzHyUtlhhi5qMH2Fbsf)

```powershell
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}
}
```

Die Variable $Body enthält eine JSON-Zeichenfolge mit dem aktuellen Zustand des Steppers. Sie erhalten Informationen über die im Stepper definierten Felder sowie Informationen über den aktuellen abgeschlossenen Schritt. Die JSON-Zeichenfolge $Body hat das folgende Format.

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

## Validieren eines Schritts

Sie können einen Schritt in einem Stepper validieren, indem Sie den Parameter `OnValidateStep` angeben. Der Skriptblock erhält eine Variable $Body mit JSON, das Informationen über den aktuellen Zustand des Steppers bereitstellt. Sie müssen mit `New-UDValidationResult` ein Validierungsergebnis zurückgeben, um anzugeben, ob der aktuelle Schrittzustand gültig ist.

Die JSON-Nutzlast hat das folgende Format. Beachten Sie, dass Schritte bei 0 beginnen. Wenn Sie den ersten Schritt validieren möchten, prüfen Sie, ob der Schritt 0 ist.

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

Sie müssen die JSON-Zeichenfolge in ein Objekt konvertieren, um in PowerShell damit zu arbeiten, und anschließend das Validierungsergebnis zurückgeben.

```powershell
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 
    }
}
```

## Schritte überspringen

Sie können den Benutzer im Ereignishandler `OnValidateStep` zu einem bestimmten Schritt leiten. Verwenden Sie den Parameter `-ActiveStep` von `New-UDValidationResult`, um den Benutzer nach dem Klick auf Weiter zu einem beliebigen Schritt zu bewegen. Schrittindizes beginnen bei 0.

Dieses Beispiel bewegt den Benutzer nach Abschluss des ersten Schritts zum letzten Schritt.

```powershell
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
    }
}
```

## Zurück-Schaltfläche deaktivieren

Sie können die Zurück-Schaltfläche mit dem Parameter `-DisablePrevious` von `New-UDValidationResult` deaktivieren.

Dieses Beispiel deaktiviert den vorherigen Schritt, wann immer sich der Benutzer im Stepper vorwärts bewegt.

```powershell
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
}
```

## Vertikale Stepper

Sie können einen vertikalen Stepper erstellen, indem Sie den Parameter `-Orientation` auf vertical setzen.

```powershell
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'
```

![](/files/f71GrA6BSOGvxXcRxm5M)

## API

* [New-UDStepper](/powershell-universal/de/powershell-befehle/new-udstepper.md)
* [New-UDStep](/powershell-universal/de/powershell-befehle/new-udstep.md)
* [New-UDValidationResult](/powershell-universal/de/powershell-befehle/new-udvalidationresult.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/de/apps/components/navigation/stepper.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.