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

# Componenti

Un'app Universal è composta da componenti. Quando crea un'app, può semplicemente richiamare i cmdlet PowerShell all'interno dello script dell'app per creare un nuovo componente.

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

## Tipi di componenti

Sono disponibili oltre 50 componenti che può utilizzare nelle sue app. Alcuni dei componenti più comunemente usati includono:

* Visualizzazione dei dati
  * [Avvisi](/powershell-universal/it/app/components/data-display/alert.md)
  * [Tabelle](/powershell-universal/it/app/components/data-display/table.md)
  * [Timeline](/powershell-universal/it/app/components/data-display/timeline.md)
* Visualizzazione grafica dei dati
  * [Grafici](/powershell-universal/it/app/components/data-visualization/charts.md)
  * [Mappe](/powershell-universal/it/app/components/data-visualization/map.md)
* Feedback
  * [Modale](/powershell-universal/it/app/components/feedback/modal.md)
  * [Avanzamento](/powershell-universal/it/app/components/feedback/progress.md)
* Input
  * [Pulsante](/powershell-universal/it/app/components/inputs/button.md)
  * [Modulo](/powershell-universal/it/app/components/inputs/form.md)
  * [Casella di testo](/powershell-universal/it/app/components/inputs/textbox.md)
  * [Interruttore](/powershell-universal/it/app/components/inputs/switch.md)
* Navigazione
  * [Menu](/powershell-universal/it/app/components/navigation/menu.md)
  * [Stepper](/powershell-universal/it/app/components/navigation/stepper.md)
  * [Schede](/powershell-universal/it/app/components/navigation/tabs.md)
* Layout
  * [Griglia](/powershell-universal/it/app/components/layout/grid.md)
  * [Stack](/powershell-universal/it/app/components/layout/stack.md)
* Utilità
  * [Dinamico](/powershell-universal/it/portale/portal-widgets/dynamic.md)
  * [Elemento](/powershell-universal/it/app/components/utilities/element.md)
  * [HTML](/powershell-universal/it/app/components/utilities/html.md)
* Superfici
  * [Scheda](/powershell-universal/it/app/components/surfaces/card.md)
  * [Pannello di espansione](/powershell-universal/it/app/components/surfaces/expansion-panel.md)

## Gestori di eventi

Molti componenti offrono gestori di eventi per fornire funzionalità interattive. Può trattarsi di eventi come clic, validazione, rendering e altro ancora. L'interattività di un gestore di eventi viene implementata utilizzando blocchi di script PowerShell.

Ad esempio, l'esempio seguente crea un pulsante che, una volta cliccato, mostrerà un toast.

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

All'interno dei gestori di eventi può eseguire qualsiasi script PowerShell valido. Ciò significa che può interagire con cmdlet esterni al modulo PSU, come ActiveDirectory o Microsoft.Graph.

### Dati dell'evento

Ogni gestore di eventi può fornire i propri dati dell'evento. Componenti come tabelle, moduli e caselle di testo restituiscono i dati corrispondenti sullo stato del componente. Possono essere i dati correnti di una riga della tabella, i valori di un modulo o il testo di una casella di testo.

Può accedere ai dati dell'evento utilizzando la variabile `$EventData`. Questa variabile sarà diversa in base al tipo di componente che sta utilizzando. Ad esempio, l'evento `-OnChange` di `New-UDTextbox` restituisce una stringa in `$EventData`.

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

Questo sarà diverso per altri controlli. Ad esempio, un modulo restituirà un oggetto che contiene proprietà relative allo stato del modulo.

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

Può anche accedere alla stringa non elaborata fornita al gestore di eventi utilizzando la variabile `$Body`. Questa contiene una stringa JSON che definisce `$EventData`.

Oltre alla variabile `$EventData`, può anche utilizzare la variabile `$PSUItem` per ottenere maggiori informazioni in determinati controlli che consentono più tipi di dati. Trova il tipo di dati PSUItem qui sotto.

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

### Ambito

Comprendere l'ambito dei gestori di eventi è importante per garantire che le sue app si comportino come previsto. PowerShell Universal si impegna a fornire in modo efficace tutte le variabili in ambito ai gestori di eventi.

Ad esempio, quanto segue sarebbe un uso naturale di una variabile in uno script PowerShell standard e funziona anche nei gestori di eventi.

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

L'uso degli ambiti `$Global:` e `$Script:` non funzionerà come previsto perché ogni gestore di eventi opera nel proprio runspace. PSU sposta manualmente le variabili durante l'elaborazione, ma non modifica le variabili in altri ambiti.

Dovrebbe utilizzare gli [ambiti personalizzati](/powershell-universal/it/app/custom-variable-scopes.md) per accedere alle variabili tra i gestori di eventi.

Inoltre, dovrebbe evitare di tentare di ereditare `$EventData` all'interno di gestori di eventi annidati. Sebbene alcuni componenti non definiscano i propri dati dell'evento, si deve presumere che i dati dell'evento vengano sovrascritti nel componente annidato.

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

Per evitare questo problema, dovrebbe memorizzare i dati in un'altra variabile da inviare all'ambito del gestore di eventi del componente annidato.

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

#### Vedere anche

* [Devolutions Academy – Aggiunta di tabelle di dati](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/it/app/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.