> 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 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/it/app/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.