Interaction

Universal Apps permet de créer des sites Web interactifs avec PowerShell. Plusieurs applets de commande ont été implémentées pour fournir de la rétroaction à l'utilisateur, mettre à jour des composants et lire l'état des composants.

Presse-papiers

Vous pouvez placer des données de type chaîne dans le presse-papiers de l'utilisateur avec Set-UDClipboard.

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

API

• Set-UDClipboard

Téléchargements

Vous pouvez démarrer un téléchargement dans le navigateur de l'utilisateur en utilisant Start-UDDownload. En raison de la sécurité des navigateurs Web, l'utilisateur devra poser une action (comme cliquer sur un bouton) pour permettre au téléchargement de se produire. Start-UDDownload n'est pas adapté au téléchargement de gros fichiers.

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

Gestionnaires d'événements

De nombreux composants prennent en charge les gestionnaires d'événements sous forme de blocs de script. Vous pourriez aussi les voir désignés comme des terminaux, car c'est ainsi qu'ils étaient nommés dans Universal Dashboard v2. Ces gestionnaires d'événements vous permettent d'invoquer des scripts PowerShell lorsque certaines actions se produisent sur la page.

Par exemple, vous pourriez avoir un clic de bouton qui appelle un gestionnaire d'événements. Ce bouton affichera un toast lorsqu'on cliquera dessus. Vous pouvez inclure n'importe quelle applet de commande PowerShell valide dans le code du gestionnaire d'événements.

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

Portée des variables

Les variables sont automatiquement portées dans les gestionnaires d'événements. Vous pourrez accéder aux variables que vous définissez à l'extérieur de la variable dans le gestionnaire d'événements.

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

Données d'événement

Certains gestionnaires d'événements fourniront des données sous forme de chaîne ou de table de hachage. Cela dépend du gestionnaire d'événements que vous utilisez. Par exemple, le gestionnaire d'événements -OnClick de New-UDButton ne fournit aucune donnée. En revanche, -OnChange de New-UDSelect fournira des données d'événement.

Vous pouvez accéder aux données d'événement en utilisant la variable $Body pour accéder aux données sous forme de chaîne (parfois formatée en JSON) ou sous forme de table de hachage en utilisant la variable $EventData.

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 }

Formulaires

Soumettre un formulaire

Vous pouvez forcer la soumission d'un formulaire à l'aide de l'applet de commande Invoke-UDForm. Vous pouvez éventuellement choisir d'appliquer la validation en incluant le paramètre -Validate.

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'
}

Valider un formulaire

Vous pouvez forcer la validation d'un formulaire en utilisant Test-UDForm.

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

Vous pouvez invoquer du JavaScript à partir de PowerShell en utilisant l'applet de commande Invoke-UDJavaScript.

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

API

• Invoke-UDJavaScript

Toast

Afficher un toast

Vous pouvez utiliser l'applet de commande Show-UDToast pour créer un message toast qui apparaîtra sur la page Web de l'utilisateur final. Cela se produit par l'entremise d'un websocket et le toast s'affichera immédiatement lorsqu'il est appelé.

Show-UDToast -Message 'Hello, World!'

Afficher comme toast avec une icône

Les toasts prennent en charge les icônes sous forme de chaînes. Vous pouvez utiliser toutes les icônes FontAwesome v5.

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

Masquer un toast

Masque un toast selon l'ID spécifié.

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

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

API

• Show-UDToast
• Hide-UDToast

Redirection

Vous pouvez rediriger les utilisateurs vers différentes pages à l'aide de l'applet de commande Invoke-UDRedirect. Cela se produit par l'entremise d'un websocket et la redirection a lieu dès que l'applet de commande est appelée.

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

Invoke-UDRedirect redirigera automatiquement vers les pages du tableau de bord lorsqu'un chemin relatif est utilisé.

Invoke-UDRedirect '/page1' 

Si vous souhaitez rediriger vers un chemin local à l'extérieur du tableau de bord, vous pouvez utiliser le paramètre -Native.

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

API

• Invoke-UDRedirect

Fenêtre modale

Vous pouvez ouvrir une fenêtre modale à l'aide de l'applet de commande Show-UDModal. Elle s'ouvrira dès que vous l'appellerez. Vous pouvez inclure les composants que vous voulez dans la fenêtre modale.

Apprenez-en plus sur les fenêtres modales ici.

Gérer l'état des composants

Vous pouvez gérer l'état des composants de façon dynamique en utilisant les commandes UDElement.

Obtenir l'état d'un composant

Vous pouvez obtenir l'état d'un élément en utilisant Get-UDElement. L'état sera retourné sous forme de table de hachage. C'est surtout utile pour les composants de saisie.

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

Définir l'état d'un composant

Vous pouvez également définir l'état d'un composant en utilisant Set-UDElement. Vous devrez spécifier un ID et une table de hachage des propriétés à définir sur le composant. Tous les composants intégrés prennent en charge Set-UDElement.

New-UDTextbox -Id 'textbox'

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

Supprimer un composant

Vous pouvez supprimer des composants de la page en utilisant Remove-UDElement. Le composant n'apparaîtra plus sur la page.

Remove-UDComponent -Id 'txtExample'

Ajouter un composant

Ajoutez un composant enfant à un composant parent existant.

New-UDElement -Id 'myDiv' -Tag div

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

Effacer un composant

Vous pouvez supprimer tous les composants enfants d'un composant en utilisant Clear-UDElement.

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'
}

Recharger un composant

Certains composants prennent en charge le rechargement. Vous pouvez déclencher le rechargement d'un composant en utilisant Sync-UDElement.

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

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

Sélectionner un composant

Vous pouvez sélectionner un composant avec Select-UDElement.

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

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

Intégration de l'hôte PowerShell

Les tableaux de bord s'intègrent directement à l'hôte PowerShell pour fournir des fonctionnalités basées sur des applets de commande standards.

Read-Host

L'utilisation de l'applet de commande Read-Host fera afficher un dialogue sur le tableau de bord de l'utilisateur. Le texte saisi sera retourné par l'applet de commande.

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

Get-Credential

L'utilisation de Get-Credential fera afficher un dialogue qui accepte un nom d'utilisateur et un mot de passe. Un objet PSCredential sera retourné par l'applet de commande.

Get-Credential -UserName "adam"

Write-Progress

Les applets de commande qui utilisent le flux de progression ou l'utilisation de l'applet de commande Write-Progress feront afficher un dialogue de progression. La fenêtre contextuelle affichera l'activité, le pourcentage complété et l'opération en cours.

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

Vous pouvez désactiver l'intégration de Write-Progress en réglant $ProgressPreference à SilentlyContinue.

$ProgressPreference = 'SilentlyContinue'

Demander un choix

Vous pouvez utiliser la fonction $Host.UI.PromptForChoice pour afficher un dialogue à sélection multiple.

$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 dans les applis écrira dans l'onglet Journal de la console d'administration pour l'appli. Si vous souhaitez recevoir ces messages de journal dans la console de votre navigateur dans les outils de développement, vous pouvez activer la journalisation de la console dans appsettings.json.

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

API

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

Voir aussi

• Devolutions Academy – Adding the search users function