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

# Komponenten

Eine Universal-App besteht aus Komponenten. Beim Erstellen einer App können Sie einfach die PowerShell-Cmdlets innerhalb Ihres App-Skripts aufrufen, um eine neue Komponente zu erstellen.

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

## Komponententypen

Es gibt über 50 Komponenten, die Sie in Ihren Apps verwenden können. Zu den häufig verwendeten gehören:

* Datenanzeige
  * [Alerts](/powershell-universal/de/apps/components/data-display/alert.md)
  * [Tabellen](/powershell-universal/de/apps/components/data-display/table.md)
  * [Timeline](/powershell-universal/de/apps/components/data-display/timeline.md)
* Datenvisualisierung
  * [Diagramme](/powershell-universal/de/apps/components/data-visualization/charts.md)
  * [Karten](/powershell-universal/de/apps/components/data-visualization/map.md)
* Feedback
  * [Modal](/powershell-universal/de/apps/components/feedback/modal.md)
  * [Fortschritt](/powershell-universal/de/apps/components/feedback/progress.md)
* Eingaben
  * [Schaltfläche](/powershell-universal/de/apps/components/inputs/button.md)
  * [Formular](/powershell-universal/de/apps/components/inputs/form.md)
  * [Textfeld](/powershell-universal/de/apps/components/inputs/textbox.md)
  * [Schalter](/powershell-universal/de/apps/components/inputs/switch.md)
* Navigation
  * [Menü](/powershell-universal/de/apps/components/navigation/menu.md)
  * [Stepper](/powershell-universal/de/apps/components/navigation/stepper.md)
  * [Registerkarten](/powershell-universal/de/apps/components/navigation/tabs.md)
* Layout
  * [Grid](/powershell-universal/de/apps/components/layout/grid.md)
  * [Stack](/powershell-universal/de/apps/components/layout/stack.md)
* Dienstprogramme
  * [Dynamic](/powershell-universal/de/portal/portal-widgets/dynamic.md)
  * [Element](/powershell-universal/de/apps/components/utilities/element.md)
  * [HTML](/powershell-universal/de/apps/components/utilities/html.md)
* Oberflächen
  * [Card](/powershell-universal/de/apps/components/surfaces/card.md)
  * [Erweiterungspanel](/powershell-universal/de/apps/components/surfaces/expansion-panel.md)

## Event-Handler

Viele Komponenten stellen Event-Handler bereit, um interaktive Funktionalität zu ermöglichen. Dies können Ereignisse wie Klicks, Validierung, Rendering und mehr sein. Die Interaktivität eines Event-Handlers wird mithilfe von PowerShell-Skriptblöcken implementiert.

Das folgende Beispiel erstellt beispielsweise eine Schaltfläche, die angeklickt werden kann und daraufhin einen Toast anzeigt.

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

Innerhalb von Event-Handlern können Sie jedes gültige PowerShell-Skript ausführen. Das bedeutet, dass Sie mit Cmdlets außerhalb des PSU-Moduls interagieren können, wie zum Beispiel ActiveDirectory oder Microsoft.Graph.

### Ereignisdaten

Jeder Event-Handler kann seine eigenen Ereignisdaten bereitstellen. Komponenten wie Tabellen, Formulare und Textfelder geben entsprechende Daten über den Zustand der Komponente zurück. Dies können die aktuellen Daten einer Zeile in der Tabelle, die Werte eines Formulars oder der Text eines Textfeldes sein.

Sie können auf die Ereignisdaten über die Variable `$EventData` zugreifen. Diese Variable unterscheidet sich je nach Typ der verwendeten Komponente. Zum Beispiel gibt das `-OnChange`-Ereignis von `New-UDTextbox` eine Zeichenfolge in `$EventData` zurück.

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

Bei anderen Steuerelementen ist dies anders. Ein Formular gibt beispielsweise ein Objekt zurück, das Eigenschaften über den Zustand des Formulars enthält.

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

Sie können auch über die Variable `$Body` auf die rohe Zeichenfolge zugreifen, die dem Event-Handler bereitgestellt wird. Diese enthält eine JSON-Zeichenfolge, die `$EventData` definiert.

Zusätzlich zur Variable `$EventData` können Sie auch die Variable `$PSUItem` verwenden, um in bestimmten Steuerelementen, die mehrere Datentypen zulassen, weitere Informationen zu erhalten. Den PSUItem-Datentyp finden Sie unten.

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

### Scoping

Das Verständnis des Event-Handler-Scopings ist wichtig, um sicherzustellen, dass sich Ihre Apps wie erwartet verhalten. PowerShell Universal ist darauf ausgelegt, Event-Handlern alle im Scope befindlichen Variablen effektiv bereitzustellen.

Das Folgende wäre beispielsweise eine natürliche Verwendung einer Variable in einem herkömmlichen PowerShell-Skript und funktioniert auch in Event-Handlern.

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

Die Verwendung der Scopes `$Global:` und `$Script:` funktioniert nicht wie erwartet, da jeder Event-Handler in seinem eigenen Runspace ausgeführt wird. PSU verschiebt Variablen während der Verarbeitung manuell, ändert jedoch keine Variablen in anderen Scopes.

Sie sollten [benutzerdefinierte Scopes](/powershell-universal/de/apps/custom-variable-scopes.md) verwenden, um über Event-Handler hinweg auf Variablen zuzugreifen.

Außerdem sollten Sie es vermeiden, `$EventData` innerhalb verschachtelter Event-Handler zu vererben. Auch wenn einige Komponenten keine eigenen Ereignisdaten definieren, sollte davon ausgegangen werden, dass die Ereignisdaten in der verschachtelten Komponente überschrieben werden.

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

Um dieses Problem zu vermeiden, sollten Sie Daten in einer anderen Variable speichern, die an den Event-Handler-Scope der verschachtelten Komponente gesendet wird.

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

#### Siehe auch

* [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/de/apps/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.