> 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/applis/interaction.md). # Interaction Créez des applis PowerShell Universal interactives à l'aide du stockage local du navigateur, du presse-papiers, des téléchargements, des toasts, des modaux, des applets de commande JavaScript et des f ```powershell Invoke-UDRedirect https://devolutions.net/powershell-universal/ ``` Universal Apps permet de créer des sites Web interactifs avec PowerShell. Plusieurs applets de commande fournissent de la rétroaction à l'utilisateur, mettent à jour des composants, lisent l'état des composants et conservent les préférences locales du navigateur. ## Presse-papiers Vous pouvez placer des données de type chaîne dans le presse-papiers de l'utilisateur avec `Set-UDClipboard`. ```powershell New-UDButton -Text 'Clipboard' -OnClick { Set-UDClipboard -Data 'Hello, there!' } ``` #### API * Set-UDClipboard ## Téléchargements Vous pouvez lancer un téléchargement dans le navigateur de l'utilisateur en utilisant `Start-UDDownload`. En raison de la sécurité du navigateur, l'utilisateur doit effectuer une action, comme cliquer sur un bouton, pour autoriser le téléchargement. `Start-UDDownload` n'est pas adapté aux téléchargements de fichiers volumineux. ```powershell New-UDButton -Text 'Download' -OnClick { Start-UDDownload -StringData 'Hello, World!' } ``` ## Stockage local Utilisez `Set-UDLocalStorage` et `Get-UDLocalStorage` pour conserver les préférences d'appli d'un utilisateur dans le stockage local du navigateur. Les valeurs demeurent disponibles après le rechargement d'une page et lorsque l'utilisateur ouvre la même appli plus tard dans le même profil de navigateur. PowerShell Universal limite la portée des valeurs stockées au tableau de bord et au navigateur. Elles ne sont pas partagées avec d'autres utilisateurs, navigateurs ou tableaux de bord. Utilisez ces applets de commande à partir d'un gestionnaire d'événements interactif afin que PowerShell Universal puisse communiquer avec le navigateur connecté. Les valeurs sont sérialisées avec le sérialiseur PowerShell avant d'être stockées, ce qui vous permet d'enregistrer et de récupérer des objets et des tables de hachage PowerShell. `Get-UDLocalStorage` retourne `$null` lorsque l'élément n'existe pas. ```powershell New-UDForm -Content { New-UDTextbox -Id 'theme' -Label 'Theme' -Value 'Dark' New-UDTextbox -Id 'pageSize' -Label 'Page Size' -Value '25' } -OnSubmit { Set-UDLocalStorage -Name 'preferences' -Value @{ Theme = $EventData.theme PageSize = [int]$EventData.pageSize } Show-UDToast -Message 'Preferences saved.' } New-UDButton -Text 'Show preferences' -OnClick { $preferences = Get-UDLocalStorage -Name 'preferences' if ($null -eq $preferences) { Show-UDToast -Message 'No preferences have been saved.' return } Show-UDToast -Message "Theme: $($preferences.Theme); page size: $($preferences.PageSize)" } ``` Le stockage local du navigateur peut être lu et modifié par du code exécuté dans la page. N'y stockez pas de mots de passe, d'identifiants, de clés d'API, de jetons ou d'autres données sensibles. Traitez les valeurs stockées comme des entrées contrôlées par l'utilisateur. #### API * Set-UDLocalStorage * Get-UDLocalStorage ## Gestionnaires d'événements De nombreux composants prennent en charge les gestionnaires d'événements sous la forme de blocs de script. Vous pouvez aussi les voir désignés comme des terminaux, puisque c'est ainsi qu'ils étaient appelés dans Universal Dashboard v2. Ces gestionnaires d'événements vous permettent d'invoquer des scripts PowerShell lorsque certaines actions se produisent dans la page. Par exemple, vous pourriez avoir un clic de bouton qui appelle un gestionnaire d'événements. Ce bouton affiche un toast lorsqu'on clique dessus. Vous pouvez inclure n'importe quelle applet de commande PowerShell valide dans le code du gestionnaire d'événements. ```powershell New-UDButton -Text 'Click Me' -OnClick { Show-UDToast 'Hello!' } ``` ### Portée des variables Les variables sont automatiquement placées dans la portée des gestionnaires d'événements. Vous pouvez accéder aux variables que vous définissez à l'extérieur du gestionnaire d'événements. ```powershell $MyVariable = "Hello!" New-UDButton -Text 'Click Me' -OnClick { Show-UDToast $MyVariable } ``` ### Données d'événement Certains gestionnaires d'événements fournissent 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 pas de données. En revanche, `-OnChange` de `New-UDSelect` fournit des données d'événement. Vous pouvez accéder aux données d'événement en utilisant la variable `$Body` sous forme de chaîne, parfois formatée en JSON, ou en utilisant la variable `$EventData` sous forme de table de hachage. ```powershell 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 facultativement imposer la validation en incluant le paramètre `-Validate`. ```powershell 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`. ```powershell 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`. ```powershell 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ît sur la page Web de l'utilisateur final. Cela se produit par WebSocket et affiche le toast immédiatement. ```powershell Show-UDToast -Message 'Hello, World!' ``` ### Afficher un 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. ```powershell Show-UDToast -Icon "Ad" -Message "Test" ``` ### Masquer un toast Masquez un toast selon l'ID spécifié. ```powershell 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 WebSocket et la redirection s'effectue dès que l'applet de commande est appelée. ```powershell Invoke-UDRedirect http://www.ironmansoftware.com ``` `Invoke-UDRedirect` redirige automatiquement vers les pages du tableau de bord lorsqu'un chemin relatif est utilisé. ```powershell Invoke-UDRedirect '/page1' ``` Si vous souhaitez rediriger vers un chemin local à l'extérieur du tableau de bord, utilisez le paramètre `-Native`. ```powershell Invoke-UDRedirect '/publishedFolder/test.txt' -Native ``` #### API * Invoke-UDRedirect ## Modal Vous pouvez ouvrir un modal à l'aide de l'applet de commande `Show-UDModal`. Il s'ouvre dès que vous l'appelez. Vous pouvez inclure les composants que vous voulez dans le modal. Apprenez-en plus sur les modaux ici. ## Gestion de 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 est retourné sous forme de table de hachage. Cela est surtout utile pour les composants d'entrée. ```powershell $Value = (Get-UDElement -Id 'txtExample').value ``` ### Définir l'état d'un composant Sinon, vous pouvez définir l'état d'un composant en utilisant `Set-UDElement`. Vous devez spécifier un ID et une table de hachage de propriétés à définir sur le composant. Tous les composants intégrés prennent en charge `Set-UDElement`. ```powershell 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ît plus dans la page. ```powershell Remove-UDComponent -Id 'txtExample' ``` ### Ajouter un composant Ajoutez un composant enfant à un composant parent existant. ```powershell New-UDElement -Id 'myDiv' -Tag div New-UDButton -Text 'Click' -OnClick { Add-UDElement -ParentId 'myDiv' -Content { New-UDTypography -Text 'Hi' } } ``` ### Vider un composant Vous pouvez supprimer tous les composants enfants d'un composant existant en utilisant `Clear-UDElement`. ```powershell 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`. ```powershell New-UDDynamic -Id 'reloadMe' -Content { Get-Date } New-UDButton -Text 'Click' -OnClick { Sync-UDElement -Id 'reloadMe' } ``` ### Sélectionner un composant Vous pouvez sélectionner un composant avec `Select-UDElement`. ```powershell New-UDElement -Id 'txt' -Tag input -Properties @{ type = text } New-UDButton -Text 'Select' -OnClick { Select-UDElement -Id 'txt' -ScrollToElement } ``` ## Intégration à l'hôte PowerShell Les tableaux de bord s'intègrent directement à l'hôte PowerShell afin d'offrir des fonctionnalités basées sur des applets de commande standard. ### Read-Host L'utilisation de l'applet de commande `Read-Host` fait apparaître un dialogue sur le tableau de bord de l'utilisateur. Le texte saisi est retourné par l'applet de commande. ```powershell $Text = Read-Host 'Enter Some Text' Show-UDToast $Text ```
### Get-Credential L'utilisation de `Get-Credential` fait apparaître un dialogue qui accepte un nom d'utilisateur et un mot de passe. Un objet `PSCredential` est retourné par l'applet de commande. ```powershell Get-Credential -UserName "adam" ```
### Write-Progress Les applets de commande qui utilisent le flux de progression ou `Write-Progress` produisent un dialogue de progression. La fenêtre contextuelle affiche l'activité, le pourcentage réalisé et l'opération en cours. ```powershell 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 définissant `$ProgressPreference` à `SilentlyContinue`. ```powershell $ProgressPreference = 'SilentlyContinue' ``` ### Demander un choix Vous pouvez utiliser la fonction `$Host.UI.PromptForChoice` pour afficher un dialogue à sélection multiple. ```powershell $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 écrit dans l'onglet **Log** de la console d'administration pour l'appli. Pour recevoir ces messages de journal dans la console des outils de développement de votre navigateur, activez la journalisation dans la console dans `appsettings.json`. ```json { "UniversalDashboard": { "ConsoleLog": true } } ``` ## API * Get-UDElement * Set-UDElement * Clear-UDElement * Remove-UDElement * Sync-UDElement * Select-UDElement --- # 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/fr/applis/interaction.md?ask=&goal= ``` `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.