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.

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
  • Tabellen
  • Timeline
• Datenvisualisierung

  • Diagramme
  • Karten
• Feedback

  • Modal
  • Fortschritt
• Eingaben

  • Schaltfläche
  • Formular
  • Textfeld
  • Schalter
• Navigation

  • Menü
  • Stepper
  • Registerkarten
• Layout

  • Grid
  • Stack
• Dienstprogramme

  • Dynamic
  • Element
  • HTML
• Oberflächen

  • Card
  • Erweiterungspanel

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.

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.

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.

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.

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.

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

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.

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