Interaktion

Universal Apps ermöglicht die Erstellung interaktiver Websites mit PowerShell. Es wurden mehrere Cmdlets implementiert, um dem Benutzer Rückmeldungen zu geben, Komponenten zu aktualisieren und den Zustand von Komponenten auszulesen.

Zwischenablage

Sie können Zeichenfolgendaten mit Set-UDClipboard in die Zwischenablage des Benutzers einfügen.

New-UDButton -Text 'Clipboard' -OnClick {
    Set-UDClipboard -Data 'Hello, there!'
}

API

• Set-UDClipboard

Downloads

Sie können einen Download im Browser des Benutzers mit Start-UDDownload starten. Aufgrund der Sicherheit von Webbrowsern muss der Benutzer eine Aktion ausführen (z. B. auf eine Schaltfläche klicken), damit der Download stattfinden kann. Start-UDDownload ist nicht für große Dateidownloads geeignet.

New-UDButton -Text 'Download' -OnClick {
    Start-UDDownload -StringData 'Hello, World!'
}

Event Handler

Viele Komponenten unterstützen Event Handler in Form von Skriptblöcken. Möglicherweise werden diese auch als Endpunkte bezeichnet, da sie in Universal Dashboard v2 so genannt wurden. Diese Event Handler ermöglichen es Ihnen, PowerShell-Skripte aufzurufen, wenn bestimmte Aktionen auf der Seite stattfinden.

Beispielsweise können Sie einen Klick auf eine Schaltfläche haben, der einen Event Handler aufruft. Diese Schaltfläche zeigt beim Klicken einen Toast an. Sie können jedes gültige PowerShell-Cmdlet innerhalb des Event-Handler-Codes einfügen.

New-UDButton -Text 'Click Me' -OnClick {
   Show-UDToast 'Hello!'
}

Variablenbereich

Variablen werden automatisch in Event Handler übernommen. Sie können auf Variablen zugreifen, die Sie außerhalb der Variable innerhalb des Event Handlers definieren.

$MyVariable = "Hello!"
New-UDButton -Text 'Click Me' -OnClick {
   Show-UDToast $MyVariable
}

Event-Daten

Einige Event Handler stellen Daten als Zeichenfolge oder als Hashtable bereit. Dies hängt vom verwendeten Event Handler ab. Beispielsweise stellt der New-UDButton-Event-Handler -OnClick keine Daten bereit. Andererseits liefert New-UDSelect -OnChange Event-Daten.

Sie können auf die Event-Daten zugreifen, indem Sie die Variable $Body verwenden, um die Daten als Zeichenfolge (manchmal als JSON formatiert) abzurufen, oder als Hashtable, indem Sie die Variable $EventData verwenden.

New-UDSelect -Option {
    New-UDSelectOption -Name 'One' -Value 1
    New-UDSelectOption -Name 'Two' -Value 2
    New-UDSelectOption -Name 'Three' -Value 3
} -OnChange { Show-UDToast -Message $EventData }

Formulare

Ein Formular absenden

Sie können ein Formular mit dem Cmdlet Invoke-UDForm zum Absenden zwingen. Optional können Sie eine Validierung erzwingen, indem Sie den Parameter -Validate einfügen.

New-UDForm -Id 'form' -Content {
   New-UDTextbox -Id 'Text' -Label 'Submit Me'
} -OnSubmit {
   Show-UDToast "Hello!"
}

New-UDButton -Text "Submit Form" -OnClick {
   Invoke-UDForm -Id 'form'
}

Ein Formular validieren

Sie können eine Validierung eines Formulars mit Test-UDForm erzwingen.

New-UDForm -Id 'form' -Content {
   New-UDTextbox -Id 'Text' -Label 'Submit Me'
} -OnSubmit {
   Show-UDToast "Hello!"
} -OnValidate {
   New-UDValidationResult
}

New-UDButton -Text "Submit Form" -OnClick {
   Test-UDForm -Id 'form'
}

JavaScript

Sie können JavaScript aus PowerShell heraus mit dem Cmdlet Invoke-UDJavaScript aufrufen.

New-UDButton -Text 'Alert Me' -OnClick {
    Invoke-UDJavaScript -JavaScript 'alert("Hello!")'
}

API

• Invoke-UDJavaScript

Toast

Einen Toast anzeigen

Sie können das Cmdlet Show-UDToast verwenden, um eine Toast-Nachricht zu erstellen, die auf der Webseite des Endbenutzers erscheint. Dies geschieht über einen Websocket und zeigt den Toast sofort beim Aufruf an.

Show-UDToast -Message 'Hello, World!'

Als Toast mit einem Symbol anzeigen

Toasts unterstützen Symbole als Zeichenfolgen. Sie können alle FontAwesome-v5-Symbole verwenden.

Show-UDToast -Icon "Ad" -Message "Test"

Einen Toast ausblenden

Blendet einen Toast basierend auf der angegebenen ID aus.

Show-UDToast -Message 'Hello, World!' -Id 'Toast' -Duration 30000

New-UDButton -Text 'Click' -OnClick {
    Hide-UDToast -Id 'Toast'
}

API

• Show-UDToast
• Hide-UDToast

Weiterleitung

Sie können Benutzer mit dem Cmdlet Invoke-UDRedirect auf andere Seiten weiterleiten. Dies geschieht über einen Websocket und leitet weiter, sobald das Cmdlet aufgerufen wird.

Invoke-UDRedirect https://devolutions.net/powershell-universal/

Invoke-UDRedirect leitet automatisch auf Seiten im Dashboard weiter, wenn ein relativer Pfad verwendet wird.

Invoke-UDRedirect '/page1' 

Wenn Sie auf einen lokalen Pfad außerhalb des Dashboards weiterleiten möchten, können Sie den Parameter -Native verwenden.

Invoke-UDRedirect '/publishedFolder/test.txt' -Native

API

• Invoke-UDRedirect

Modal

Sie können ein Modal mit dem Cmdlet Show-UDModal öffnen. Es wird geöffnet, sobald Sie es aufrufen. Sie können beliebige Komponenten innerhalb des Modals einfügen.

Lesen Sie mehr über Modals hier.

Komponentenzustand verwalten

Sie können den Komponentenzustand dynamisch mit den UDElement-Befehlen verwalten.

Komponentenzustand abrufen

Sie können den Zustand eines Elements mit Get-UDElement abrufen. Der Zustand wird als Hashtable zurückgegeben. Dies ist vor allem für Eingabekomponenten nützlich.

$Value = (Get-UDElement -Id 'txtExample').value

Komponentenzustand festlegen

Alternativ können Sie den Komponentenzustand mit Set-UDElement festlegen. Sie müssen eine ID und eine Hashtable mit Eigenschaften angeben, die für die Komponente festgelegt werden sollen. Alle integrierten Komponenten unterstützen Set-UDElement.

New-UDTextbox -Id 'textbox'

New-UDButton -Text 'Click' -OnClick {
    Set-UDElement -Id 'textbox' -Properties @{
        Value = 'My Value'
    }
}

Eine Komponente entfernen

Sie können Komponenten mit Remove-UDElement von der Seite entfernen. Die Komponente wird dann nicht mehr auf der Seite angezeigt.

Remove-UDComponent -Id 'txtExample'

Eine Komponente hinzufügen

Fügen Sie einer vorhandenen übergeordneten Komponente eine untergeordnete Komponente hinzu.

New-UDElement -Id 'myDiv' -Tag div

New-UDButton -Text 'Click' -OnClick {
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
}

Eine Komponente leeren

Sie können alle untergeordneten Komponenten einer Komponente mit Clear-UDElement entfernen.

New-UDElement -Id 'myDiv' -Tag div

New-UDButton -Text 'Click' -OnClick {
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
}

New-UDButton -Text 'Clear' -OnClick {
    Clear-UDElement -Id 'myDiv'
}

Eine Komponente neu laden

Einige Komponenten unterstützen das Neuladen. Sie können das Neuladen einer Komponente mit Sync-UDElement auslösen.

New-UDDynamic -Id 'reloadMe' -Content {
    Get-Date
}

New-UDButton -Text 'Reload' -OnClick {
    Sync-UDElement -Id 'reloadMe'
}

Eine Komponente auswählen

Sie können eine Komponente mit Select-UDElement auswählen.

New-UDElement -Id 'txt' -Tag input -Properties @{ type = text }

New-UDButton -Text 'Select' -OnClick {
    Select-UDElement -Id 'txt' -ScrollToElement
}

PowerShell-Host-Integration

Dashboards integrieren sich direkt in den PowerShell-Host, um Funktionen auf Basis von Standard-Cmdlets bereitzustellen.

Read-Host

Die Verwendung des Cmdlets Read-Host bewirkt, dass ein Dialog im Dashboard des Benutzers angezeigt wird. Der eingegebene Text wird vom Cmdlet zurückgegeben.

$Text = Read-Host 'Enter Some Text'
Show-UDToast $Text

Get-Credential

Die Verwendung von Get-Credential bewirkt, dass ein Dialog angezeigt wird, der einen Benutzernamen und ein Passwort akzeptiert. Ein PSCredential-Objekt wird vom Cmdlet zurückgegeben.

Get-Credential -UserName "adam"

Write-Progress

Cmdlets, die den Fortschrittsstream oder das Cmdlet Write-Progress verwenden, führen dazu, dass ein Fortschrittsdialog angezeigt wird. Das Popup zeigt die Aktivität, den Prozentsatz der Fertigstellung und den aktuellen Vorgang an.

1..100 | ForEach-Object {
    Write-Progress -PercentComplete $_ -Activity 'Processing...' -CurrentOperation "User $_"
    Start-Sleep -Milliseconds 500
}

Sie können die Write-Progress-Integration deaktivieren, indem Sie $ProgressPreference auf SilentlyContinue setzen.

$ProgressPreference = 'SilentlyContinue'

Prompt For Choice

Sie können die Funktion $Host.UI.PromptForChoice verwenden, um einen Mehrfachauswahl-Dialog anzuzeigen.

$Title = "Welcome"
$Info = "Just to Demo Prompt for Choice"

$options = [System.Management.Automation.Host.ChoiceDescription[]] @("Power", "Shell", "Quit")
[int]$defaultchoice = 2
$opt = $host.UI.PromptForChoice($Title , $Info , $Options, $defaultchoice)
switch ($opt) {
    0 { Show-UDToast "Power" }
    1 { Show-UDToast "Shell" }
    2 { Show-UDToast "Good Bye!!!" }
}

Write-Host

Write-Host schreibt innerhalb von Apps in die Registerkarte „Log“ in der Admin-Konsole für die App. Wenn Sie diese Protokollmeldungen in der Konsole Ihres Browsers in den Entwicklertools erhalten möchten, können Sie die Konsolenprotokollierung in appsettings.json aktivieren.

{
    "UniversalDashboard": {
        "ConsoleLog": true
    }
}

API

• Get-UDElement
• Set-UDElement
• Clear-UDElement
• Remove-UDElement
• Sync-UDElement
• Select-UDElement

Siehe auch

• Devolutions Academy – Adding the search users function