> 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/it/app/components/navigation/stepper.md).

# Stepper

Crei procedure guidate a più passaggi nelle app PowerShell Universal con il componente Stepper, inclusi la convalida dei passaggi, il salto dei passaggi e l'orientamento verticale.

**Gli stepper mostrano l'avanzamento attraverso passaggi numerati. Forniscono un flusso di lavoro simile a una procedura guidata.**

Gli stepper mostrano l'avanzamento attraverso una sequenza di passaggi logici e numerati. Possono essere utilizzati anche per la navigazione. Gli stepper possono visualizzare un messaggio di feedback temporaneo dopo il salvataggio di un passaggio. Lo stepper supporta la memorizzazione dei dati di input nel contesto dello stepper. Supporta i seguenti controlli.

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

## Stepper

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

La variabile $Body conterrà una stringa JSON che contiene lo stato corrente dello stepper. Riceverà informazioni sui campi che sono stati definiti all'interno dello stepper e informazioni sul passaggio corrente che è stato completato. La stringa JSON $Body avrà il formato seguente.

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

## Convalida di un passaggio

È possibile convalidare un passaggio in uno stepper specificando il parametro `OnValidateStep`. Il blocco di script riceverà una variabile $Body con un JSON che fornisce informazioni sullo stato corrente dello stepper. Sarà necessario restituire un risultato di convalida utilizzando `New-UDValidationResult` per specificare se lo stato del passaggio corrente è valido.

Il payload JSON avrà il formato seguente. Si noti che l'indice dei passaggi parte da 0. Se desidera convalidare il primo passaggio, verifichi che il passaggio sia 0.

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

Dovrà convertire la stringa JSON in un oggetto con cui lavorare in PowerShell e poi restituire il risultato della convalida.

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

## Salto dei passaggi

È possibile indirizzare l'utente a un passaggio specifico nel gestore di eventi `OnValidateStep`. Utilizzi il parametro `-ActiveStep` di `New-UDValidationResult` per spostare l'utente a un qualsiasi passaggio dopo aver fatto clic su Avanti. Gli indici dei passaggi partono da 0.

Questo esempio sposta l'utente all'ultimo passaggio dopo il completamento del primo passaggio.

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

## Disabilitare il pulsante Indietro

È possibile disabilitare il pulsante precedente utilizzando il parametro `-DisablePrevious` di `New-UDValidationResult` .

Questo esempio disabilita il passaggio precedente ogni volta che l'utente avanza nello stepper.

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

## Stepper verticali

È possibile creare uno stepper verticale impostando il parametro `-Orientation` su vertical.

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

## API

* [New-UDStepper](/powershell-universal/it/comandi-powershell/new-udstepper.md)
* [New-UDStep](/powershell-universal/it/comandi-powershell/new-udstep.md)
* [New-UDValidationResult](/powershell-universal/it/comandi-powershell/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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.