> 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/fr/apps/components.md).

# Composants

Une application Universal est composée de composants. Lors de la création d'une application, vous pouvez simplement appeler les cmdlets PowerShell dans le script de votre application pour créer un nouveau composant.

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

## Types de composants

Il existe plus de 50 composants que vous pouvez utiliser dans vos applications. Parmi les composants couramment utilisés, on trouve :

* Affichage de données
  * [Alertes](/powershell-universal/fr/apps/components/data-display/alert.md)
  * [Tableaux](/powershell-universal/fr/apps/components/data-display/table.md)
  * [Chronologie](/powershell-universal/fr/apps/components/data-display/timeline.md)
* Visualisation de données
  * [Graphiques](/powershell-universal/fr/apps/components/data-visualization/charts.md)
  * [Cartes](/powershell-universal/fr/apps/components/data-visualization/map.md)
* Retour d'information
  * [Modal](/powershell-universal/fr/apps/components/feedback/modal.md)
  * [Progression](/powershell-universal/fr/apps/components/feedback/progress.md)
* Entrées
  * [Bouton](/powershell-universal/fr/apps/components/inputs/button.md)
  * [Formulaire](/powershell-universal/fr/apps/components/inputs/form.md)
  * [Zone de texte](/powershell-universal/fr/apps/components/inputs/textbox.md)
  * [Interrupteur](/powershell-universal/fr/apps/components/inputs/switch.md)
* Navigation
  * [Menu](/powershell-universal/fr/apps/components/navigation/menu.md)
  * [Stepper](/powershell-universal/fr/apps/components/navigation/stepper.md)
  * [Onglets](/powershell-universal/fr/apps/components/navigation/tabs.md)
* Mise en page
  * [Grille](/powershell-universal/fr/apps/components/layout/grid.md)
  * [Pile](/powershell-universal/fr/apps/components/layout/stack.md)
* Utilitaires
  * [Dynamique](/powershell-universal/fr/portail/portal-widgets/dynamic.md)
  * [Élément](/powershell-universal/fr/apps/components/utilities/element.md)
  * [HTML](/powershell-universal/fr/apps/components/utilities/html.md)
* Surfaces
  * [Carte](/powershell-universal/fr/apps/components/surfaces/card.md)
  * [Panneau extensible](/powershell-universal/fr/apps/components/surfaces/expansion-panel.md)

## Gestionnaires d'événements

De nombreux composants fournissent des gestionnaires d'événements pour offrir des fonctionnalités interactives. Il peut s'agir d'événements tels que des clics, des validations, des rendus et bien plus encore. L'interactivité d'un gestionnaire d'événements est implémentée à l'aide de blocs de script PowerShell.

Par exemple, l'exemple ci-dessous crée un bouton sur lequel on peut cliquer pour afficher une notification toast.

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

Dans les gestionnaires d'événements, vous pouvez exécuter n'importe quel script PowerShell valide. Cela signifie que vous pouvez interagir avec des cmdlets extérieures au module PSU, comme ActiveDirectory ou Microsoft.Graph.

### Données d'événement

Chaque gestionnaire d'événements peut fournir ses propres données d'événement. Les composants tels que les tableaux, les formulaires et les zones de texte renvoient les données correspondantes sur l'état du composant. Il peut s'agir des données actuelles d'une ligne du tableau, des valeurs d'un formulaire ou du texte d'une zone de texte.

Vous pouvez accéder aux données d'événement à l'aide de la variable `$EventData`. Cette variable sera différente selon le type de composant que vous utilisez. Par exemple, l'événement `-OnChange` de `New-UDTextbox` renvoie une chaîne dans `$EventData`.

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

Ce sera différent pour d'autres contrôles. Par exemple, un formulaire renverra un objet contenant des propriétés sur l'état du formulaire.

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

Vous pouvez également accéder à la chaîne brute fournie au gestionnaire d'événements à l'aide de la variable `$Body`. Celle-ci contient une chaîne JSON qui définit `$EventData`.

En plus de la variable `$EventData`, vous pouvez également utiliser la variable `$PSUItem` pour obtenir plus d'informations dans certains contrôles qui acceptent plusieurs types de données. Vous trouverez le type de données PSUItem ci-dessous.

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

### Portée

Comprendre la portée des gestionnaires d'événements est essentiel pour s'assurer que vos applications se comportent comme prévu. PowerShell Universal s'efforce de fournir efficacement toutes les variables dans la portée aux gestionnaires d'événements.

Par exemple, l'exemple ci-dessous constitue une utilisation naturelle d'une variable dans un script PowerShell standard et fonctionne également dans les gestionnaires d'événements.

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

L'utilisation des portées `$Global:` et `$Script:` ne fonctionnera pas comme prévu, car chaque gestionnaire d'événements fonctionne dans son propre runspace. PSU déplace manuellement les variables lors du traitement, mais ne modifie pas les variables dans d'autres portées.

Vous devriez utiliser des [portées personnalisées](/powershell-universal/fr/apps/custom-variable-scopes.md) pour accéder aux variables entre les gestionnaires d'événements.

De plus, vous devriez éviter d'essayer d'hériter de `$EventData` dans des gestionnaires d'événements imbriqués. Bien que certains composants ne définissent pas leurs propres données d'événement, il faut supposer que les données d'événement seront écrasées dans le composant imbriqué.

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

Pour éviter ce problème, vous devriez stocker les données dans une autre variable à transmettre dans la portée du gestionnaire d'événements du composant imbriqué.

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


---

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

```
GET https://docs.devolutions.net/powershell-universal/fr/apps/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.