> 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/es/aplicaciones/components/navigation/stepper.md).

# Stepper

**Los steppers muestran el progreso a través de pasos numerados. Proporcionan un flujo de trabajo similar a un asistente.**

Los steppers muestran el progreso a través de una secuencia de pasos lógicos y numerados. También pueden utilizarse para la navegación. Los steppers pueden mostrar un mensaje de retroalimentación transitorio después de guardar un paso. El stepper permite almacenar los datos de entrada en el contexto del stepper. Admite los siguientes controles.

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

## Stepper

![](/files/mE23OPhQiTZba7nMSnVx)

```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 variable $Body contendrá una cadena JSON con el estado actual del stepper. Recibirá información sobre los campos que se han definido en el stepper e información sobre el paso actual que se ha completado. La cadena JSON de $Body tendrá el siguiente formato.

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

## Validar un paso

Puede validar un paso de un stepper especificando el parámetro `OnValidateStep`. El bloque de script recibirá una variable $Body con JSON que proporciona información sobre el estado actual del stepper. Deberá devolver un resultado de validación mediante `New-UDValidationResult` para especificar si el estado del paso actual es válido.

La carga JSON tendrá el siguiente formato. Tenga en cuenta que los pasos empiezan a indexarse en 0. Si desea validar el primer paso, compruebe que el paso sea 0.

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

Tendrá que convertir la cadena JSON en un objeto para trabajar con él en PowerShell y, a continuación, devolver el resultado de la validación.

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

## Omitir pasos

Puede dirigir al usuario a un paso concreto en el controlador de eventos `OnValidateStep`. Utilice el parámetro `-ActiveStep` de `New-UDValidationResult` para llevar al usuario a cualquier paso después de hacer clic en siguiente. Los índices de los pasos empiezan en 0.

Este ejemplo lleva al usuario al último paso después de completar el primer paso.

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

## Desactivar el botón anterior

Puede desactivar el botón anterior mediante el parámetro `-DisablePrevious` de `New-UDValidationResult` .

Este ejemplo desactiva el paso anterior cada vez que el usuario avanza en el 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
}
```

## Steppers verticales

Puede crear un stepper vertical estableciendo el parámetro `-Orientation` en 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/ZCLzchvYolfJ5SZS9SWr)

## API

* [New-UDStepper](/powershell-universal/es/comandos-de-powershell/new-udstepper.md)
* [New-UDStep](/powershell-universal/es/comandos-de-powershell/new-udstep.md)
* [New-UDValidationResult](/powershell-universal/es/comandos-de-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/es/aplicaciones/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.