> 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.md).

# Componentes

Una aplicación de Universal se compone de componentes. Al crear una aplicación, basta con llamar a los cmdlets de PowerShell dentro del script de la aplicación para crear un nuevo componente.

```powershell
New-UDApp -Title 'Dashboard' -Content {
    New-UDTypography -Text 'Hello, world!'
}
```

## Tipos de componentes

Hay más de 50 componentes que puede utilizar en sus aplicaciones. Algunos de los componentes más utilizados son:

* Visualización de datos
  * [Alertas](/powershell-universal/es/aplicaciones/components/data-display/alert.md)
  * [Tablas](/powershell-universal/es/aplicaciones/components/data-display/table.md)
  * [Cronología](/powershell-universal/es/aplicaciones/components/data-display/timeline.md)
* Representación gráfica de datos
  * [Gráficos](/powershell-universal/es/aplicaciones/components/data-visualization/charts.md)
  * [Mapas](/powershell-universal/es/aplicaciones/components/data-visualization/map.md)
* Comentarios
  * [Modal](/powershell-universal/es/aplicaciones/components/feedback/modal.md)
  * [Progreso](/powershell-universal/es/aplicaciones/components/feedback/progress.md)
* Entradas
  * [Botón](/powershell-universal/es/aplicaciones/components/inputs/button.md)
  * [Formulario](/powershell-universal/es/aplicaciones/components/inputs/form.md)
  * [Cuadro de texto](/powershell-universal/es/aplicaciones/components/inputs/textbox.md)
  * [Conmutador](/powershell-universal/es/aplicaciones/components/inputs/switch.md)
* Navegación
  * [Menú](/powershell-universal/es/aplicaciones/components/navigation/menu.md)
  * [Stepper](/powershell-universal/es/aplicaciones/components/navigation/stepper.md)
  * [Pestañas](/powershell-universal/es/aplicaciones/components/navigation/tabs.md)
* Diseño
  * [Cuadrícula](/powershell-universal/es/aplicaciones/components/layout/grid.md)
  * [Pila](/powershell-universal/es/aplicaciones/components/layout/stack.md)
* Utilidades
  * [Dinámico](/powershell-universal/es/portal/portal-widgets/dynamic.md)
  * [Elemento](/powershell-universal/es/aplicaciones/components/utilities/element.md)
  * [HTML](/powershell-universal/es/aplicaciones/components/utilities/html.md)
* Superficies
  * [Tarjeta](/powershell-universal/es/aplicaciones/components/surfaces/card.md)
  * [Panel de expansión](/powershell-universal/es/aplicaciones/components/surfaces/expansion-panel.md)

## Controladores de eventos

Muchos componentes ofrecen controladores de eventos para proporcionar funcionalidad interactiva. Puede tratarse de eventos como clics, validación, representación y más. La interactividad de un controlador de eventos se implementa mediante bloques de script de PowerShell.

Por ejemplo, el siguiente ejemplo crea un botón que se puede pulsar y que luego mostrará un toast.

```powershell
New-UDButton -Text "Click me!" -OnClick {
    Show-UDToast -Message "Clicked!"
}
```

Dentro de los controladores de eventos, puede ejecutar cualquier script de PowerShell válido. Esto significa que puede interactuar con cmdlets ajenos al módulo de PSU, como ActiveDirectory o Microsoft.Graph.

### Datos del evento

Cada controlador de eventos puede proporcionar sus propios datos de evento. Componentes como las tablas, los formularios y los cuadros de texto devuelven los datos correspondientes sobre el estado del componente. Esto podría ser los datos actuales de una fila de la tabla, los valores de un formulario o el texto de un cuadro de texto.

Puede acceder a los datos del evento mediante la variable `$EventData`. Esta variable será diferente según el tipo de componente que esté utilizando. Por ejemplo, el evento `-OnChange` de `New-UDTextbox` devuelve una cadena en `$EventData`.

```powershell
New-UDTextbox -OnChange {
    Show-UDToast -Message $EventData
}
```

Esto será diferente para otros controles. Por ejemplo, un formulario devolverá un objeto que contiene propiedades sobre el estado del formulario.

```powershell
New-UDForm -Content {
    New-UDTextbox -Id "UserName"
} -OnSubmit {
    Show-UDToast -Message $EventData.UserName
}
```

También puede acceder a la cadena sin procesar proporcionada al controlador de eventos mediante la variable `$Body`. Esta contiene una cadena JSON que define el `$EventData`.

Además de la variable `$EventData`, también puede utilizar la variable `$PSUItem` para obtener más información en determinados controles que admiten varios tipos de datos. A continuación encontrará el tipo de datos PSUItem.

```csharp
public class PsuItem
{
    public string Id { get; set; }
    public string Type { get; set; }
    public string EventId { get; set; }
    public string EventName { get; set; }
    public string EventData { get; set; }
    public string Location { get; set; }
}
```

### Ámbito

Comprender el ámbito de los controladores de eventos es importante para garantizar que sus aplicaciones se comporten como se espera. PowerShell Universal se esfuerza por proporcionar de forma eficaz todas las variables dentro del ámbito a los controladores de eventos.

Por ejemplo, lo siguiente sería un uso natural de una variable en un script de PowerShell estándar y también funciona en los controladores de eventos.

```powershell
$Variable = 123
New-UDButton -Text "Click Me" -OnClick {
    Show-UDToast -Message $Variable
}
```

El uso del ámbito `$Global:` y `$Script:` no funcionará como se espera, porque cada controlador de eventos funciona en su propio runspace. PSU mueve manualmente las variables durante el procesamiento, pero no cambia las variables de otros ámbitos.

Debe utilizar [ámbitos personalizados](/powershell-universal/es/aplicaciones/custom-variable-scopes.md) para acceder a las variables entre controladores de eventos.

Además, debe evitar intentar heredar `$EventData` dentro de controladores de eventos anidados. Aunque algunos componentes no definen sus propios datos de evento, se debe suponer que los datos del evento se sobrescribirán en el componente anidado.

```powershell
New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        New-UDButton -Text $EventData.Name -OnClick {
            # $EventData has been replaced by the button and no longer has a name property
            Show-UDToast -Message $EventData.Name
        }
    }
) -Data $Data
```

Para evitar este problema, debe almacenar los datos en otra variable que se envíe al ámbito del controlador de eventos del componente anidado.

```powershell
New-UDTable -Columns @(
    New-UDTableColumn -Property 'Name' -OnRender {
        $Name = $EventData.Name
        New-UDButton -Text $EventData.Name -OnClick {
            Show-UDToast -Message $Name
        }
    }
) -Data $Data
```

#### Véase también

* [Devolutions Academy – Adding data tables](https://academy.devolutions.net/student/page/3466031-adding-data-tables?curriculum_activity_id=5612258\&path_id=3465905\&sid=1b852f65-706e-452f-a2b6-96b76149ddb2\&sid_i=0)


---

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