> 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

**Gli stepper indicano 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 mostrare 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 controlli seguenti.

* [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

![](/files/XcXBq35TFprBCSVioAGU)

```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 JSON che fornisce informazioni sullo stato corrente dello stepper. Sarà necessario restituire un risultato di convalida usando `New-UDValidationResult` per specificare se lo stato del passaggio corrente è valido.

Il payload JSON avrà il formato seguente. Si noti che i passaggi sono indicizzati a partire 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 quindi 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 dell'evento `OnValidateStep`. Usi il parametro `-ActiveStep` di `New-UDValidationResult` per spostare l'utente su 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 Precedente

È possibile disabilitare il pulsante Precedente usando 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'
```

![](/files/uXuMpTF1tqTKjaiNobff)

## 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.