> 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/components/pages.md). # Pages Créez et configurez des pages dans les applis PowerShell Universal, y compris des URL personnalisées, un accès basé sur les rôles, des dispositions de navigation et des titres dynamiques. Une appli peut être constituée d'une ou de plusieurs pages. Une page peut avoir un nom et une URL particuliers. Vous pouvez définir une URL qui accepte une ou plusieurs variables dans l'URL afin de définir une page dynamique. ## Création d'une nouvelle page Dans l'éditeur d'applis, cliquez sur le bouton Create App Page. Une fois la page créée, elle sera répertoriée dans l'onglet des pages. Pour mettre à jour le contenu d'une page, cliquez sur le bouton Edit Code. Par exemple, vous pourriez ajouter un bouton à votre page. ```powershell New-UDPage -Name 'Users' -Url '/users' -Content { New-UDButton -Text 'What page is this?' -OnClick { Show-UDToast $UDPage } } -AutoInclude ``` Les pages sont automatiquement ajoutées aux applis avec le paramètre `-AutoInclude`. Il suffit d'appeler New-UDApp à la racine du fichier PS1 de votre appli. ```powershell New-UDApp ``` ## Page de base Une page de base peut être définie à l'aide de l'applet de commande `New-UDPage`. Vous pourriez accéder à cette page en visitant l'URL `/app` de votre tableau de bord. ```powershell $Pages = @() $Pages += New-UDPage -Name 'App' -Content { New-UDTypography -Text 'App' } New-UDApp -Title 'Pages' -Pages $Pages ``` ## Appli avec plusieurs pages Les applis peuvent avoir plusieurs pages, et ces pages peuvent être définies en passant un tableau d'UDPages à `New-UDApp` ```powershell $Pages = @() $Pages += New-UDPage -Name 'App One' -Content { New-UDTypography -Text 'App Two' } $Pages += New-UDPage -Name 'App Two' -Content { New-UDTypography -Text 'App Two' } New-UDApp -Title 'Pages' -Pages $Pages ``` Vous pourriez vouloir organiser votre appli en plusieurs fichiers PS1. Vous pouvez le faire à l'aide des pages. ```powershell $UDScriptRoot = $PSScriptRoot $Pages = @() $Pages += New-UDPage -Name 'App One' -Content { . "$UDScriptRoot\db1.ps1" } $Pages += New-UDPage -Name 'App Two' -Content { . "$UDScriptRoot\db2.ps1" } New-UDApp -Title 'Pages' -Pages $Pages ``` ## Page avec une URL personnalisée Une page peut avoir une URL personnalisée grâce au paramètre `-Url`. Vous pourriez accéder à cette page en visitant l'URL `/db` de votre appli. ```powershell $Pages = @() $Pages += New-UDPage -Name 'App' -Url '/db' -Content { New-UDTypography -Text 'App' } New-UDApp -Title 'Pages' -Pages $Pages ``` ## Page avec des variables dans l'URL Vous pouvez définir une page avec des variables dans l'URL afin de créer des pages qui s'adaptent en fonction de cette URL. ```powershell $Pages = @() $Pages += New-UDPage -Name 'Dashboard' -Url '/db/:user' -Content { New-UDTypography -Text 'Dashboard for user: $User' } New-UDApp -Title 'Pages' -Pages $Pages ``` ### Paramètres de chaîne de requête Les paramètres de chaîne de requête sont passés aux pages et aux autres terminaux sous forme de variable de table de hachage appelée `$Query`. Par exemple, si vous visitiez une page avec le paramètre de chaîne de requête suivant : `http://localhost:5000/dashboard/Page1?test=123` Vous auriez accès à cette valeur à l'aide de la syntaxe suivante : ```powershell $Query.test $Query['test'] ``` ## Accès basé sur les rôles {% hint style="info" %} Cette fonctionnalité nécessite une [licence](/powershell-universal/fr/licensing.md). {% endhint %} Vous pouvez empêcher les utilisateurs d'accéder à des pages en fonction de leur rôle à l'aide du paramètre `-Role` des pages. Vous pouvez configurer les rôles et les politiques de rôles sur la [page Sécurité](/powershell-universal/fr/securite/security.md#policy-assignment). ```powershell $Pages = @() $Pages += New-UDPage -Name 'Administrators' -Content { New-UDTypography -Text 'Dashboard for user: $User' } -Role 'Administrator' $Pages += New-UDPage -Name 'Operators' -Content { New-UDTypography -Text 'Dashboard for user: $User' } -Role 'Operator' New-UDApp -Title 'Pages' -Pages $Pages ``` ## En-tête Les options suivantes sont disponibles pour personnaliser l'en-tête. ### Position Utilisez le paramètre `-HeaderPosition` pour ajuster le comportement de l'en-tête. * absolute\fixed - Reste en haut de la page, même lors du défilement * relative - Reste en haut de la page. Non visible lors du défilement. ```powershell New-UDPage -HeaderPosition fixed -Content { New-UDElement -tag div -Attributes @{ style = @{ height = '150vh' } } } ``` ### Couleurs Vous pouvez ajuster les couleurs de l'en-tête en spécifiant les paramètres `-HeaderColor` et `-HeaderBackgroundColor`. Ces couleurs remplaceront les couleurs du thème. ```powershell New-UDPage -Name 'Home' -Content { } -HeaderColor 'black' -HeaderBackgroundColor 'white' ``` ## Navigation Vous pouvez personnaliser la navigation d'une page à l'aide des paramètres `-Navigation` et `-NavigationLayout`. La navigation est définie à l'aide du composant [List](/powershell-universal/fr/applis/components/data-display/list.md#list). Les dispositions de navigation sont soit permanentes, soit temporaires. ### Navigation personnalisée La navigation personnalisée peut être définie à l'aide d'une liste. Les éléments de la liste peuvent inclure des enfants afin de créer des sections déroulantes dans la navigation. ```powershell $Navigation = @( New-UDListItem -Label "Home" New-UDListItem -Label "Getting Started" -Children { New-UDListItem -Label "Installation" -Href '/Installation' New-UDListItem -Label "Usage" -Href '/Usage' New-UDListItem -Label "FAQs" -Href '/faqs' New-UDListItem -Label "System Requirements" -Href'/requirements' New-UDListItem -Label "Purchasing" -Href '/purchasing' } ) $Pages = @() $Pages += New-UDPage -Name 'Installation' -Content { New-UDTypography -Text "Installation" } $Pages += New-UDPage -Name 'Usage' -Content { New-UDTypography -Text "Usage" } New-UDApp -Title "Hello, World!" -Pages $Pages -NavigationLayout permanent -Navigation $Navigation ``` ### Navigation dynamique La navigation dynamique peut être utilisée pour exécuter des scripts pendant le chargement de la page afin de déterminer quels composants de navigation afficher en fonction de variables comme l'utilisateur, l'adresse IP ou les rôles. Vous pouvez générer une navigation dynamique à l'aide du paramètre `-LoadNavigation`. La valeur du paramètre doit être un bloc de script à exécuter lors du chargement de la navigation. ```powershell $Navigation = { New-UDListItem -Label "Home - $(Get-Date)" New-UDListItem -Label "Getting Started" -Children { New-UDListItem -Label "Installation" -Href '/installation' New-UDListItem -Label "Usage" -Href '/usage' New-UDListItem -Label "FAQs" -Href '/faqs' New-UDListItem -Label "System Requirements" -Href'/requirements' New-UDListItem -Label "Purchasing" -Href '/purchasing' } } $Pages = @() $Pages += New-UDPage -Name 'Test' -Content { New-UDTypography -Text "Hello" } -NavigationLayout permanent -LoadNavigation $Navigation $Pages += New-UDPage -Name 'Test2' -Content { New-UDTypography -Text "Hello" } -NavigationLayout permanent -LoadNavigation $Navigation New-UDApp -Title "Hello, World!" -Pages $Pages ``` ### Accès basé sur les rôles Vous pouvez utiliser la navigation dynamique pour créer un menu de navigation qui tire parti des rôles. Utilisez `Protect-UDSection` pour limiter qui a accès à des éléments de menu particuliers. Assurez-vous d'inclure également le même rôle sur la page. ```powershell $Navigation = { New-UDListItem -Label "Home" -Href '/Home' Protect-UDSection -Role "Administrator" -Content { New-UDListItem -Label "Admins" -Href '/Admins' } } $Pages = @() $Pages += New-UDPage -Name 'Home' -Content { New-UDTypography -Text "Hello" } -NavigationLayout permanent -LoadNavigation $Navigation $Pages += New-UDPage -Name 'Admins' -Content { New-UDTypography -Text "Hello" } -NavigationLayout permanent -LoadNavigation $Navigation -Roles "Administrator" New-UDApp -Title "Hello, World!" -Pages $Pages ``` Si vous souhaitez vérifier les rôles dans les pages, vous pouvez aussi utiliser l'opérateur `-In` et la variable `$Roles`. ```powershell New-UDPage -Name 'Home' -Content { if ("Administrator" -in $Roles) { New-UDTypography -Text "I am an administrator" } else { New-UDTypography -Text "I am NOT an administrator" } } ``` ### Dispositions La disposition permanente crée un tiroir de navigation statique du côté gauche de la page. Il ne peut pas être masqué par l'utilisateur. ```powershell $Pages = @() $Pages += New-UDPage -Name 'Test' -Content { New-UDTypography -Text "Hello" } -NavigationLayout permanent $Pages += New-UDPage -Name 'Test2' -Content { New-UDTypography -Text "Hello" } -NavigationLayout permanent New-UDApp -Title "Hello, World!" -Pages $Pages ``` La disposition temporaire crée un tiroir de navigation qui peut être ouvert à l'aide d'un menu hamburger situé dans le coin supérieur gauche. C'est le paramètre par défaut. ```powershell $Pages = @() $Pages += New-UDPage -Name 'Test' -Content { New-UDTypography -Text "Hello" } -NavigationLayout temporary $Pages += New-UDPage -Name 'Test2' -Content { New-UDTypography -Text "Hello" } -NavigationLayout temporary New-UDApp -Title "Hello, World!" -Pages $Pages ``` ### Navigation horizontale Vous pouvez utiliser `New-UDAppBar` avec une page vierge pour créer une navigation horizontale. ```powershell New-UDApp -Title 'PowerShell Universal' -Pages @( New-UDPage -Name 'Page' -Content { New-UDAppBar -Children { New-UDTypography -Text "Title" -Variant h4 -Style @{ marginRight = "50px" } New-UDMenu -Variant text -Text "Settings" -Children { New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" } New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" } New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" } } New-UDMenu -Variant text -Text "Options" -Children { New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" } New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" } New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" } } New-UDMenu -Variant text -Text "Tools" -Children { New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" } New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" } New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" } } } -DisableThemeToggle } -Blank ) ``` ## Logo Vous pouvez afficher un logo dans la barre de navigation à l'aide du paramètre `-Logo`. Tout d'abord, configurez un [dossier publié](/powershell-universal/fr/plateforme/published-folders.md) pour héberger votre logo. Maintenant, lors de la création de votre page, vous pouvez spécifier le chemin vers le logo. ```powershell New-UDPage -Name 'Home' -Logo '/assets/favicon.png' -Content { } ``` Le logo s'affichera dans le coin supérieur gauche. Pour personnaliser le style de votre logo, vous pouvez utiliser une [feuille de style en cascade](/powershell-universal/fr/applis/themes/cascading-style-sheets.md) et cibler l'ID d'élément `ud-logo`. ## Contenu de l'en-tête Vous pouvez définir du contenu personnalisé à inclure dans l'en-tête à l'aide du paramètre `-HeaderContent`. ```powershell $Page = New-UDPage -Name 'Home' -Content { } -HeaderContent { New-UDButton -Icon (New-UDIcon -Icon Users) -Text 'User' } New-UDApp -Title "Dashboard" -Pages $Page ``` ## Titre de page dynamique Les titres de page sont statiques par défaut, mais vous pouvez remplacer ce comportement à l'aide de `-LoadTitle`. Il sera appelé lors du chargement de la page. C'est utile lors de la définition de pages dans des tableaux de bord multilingues. ```powershell New-UDPage -Name "Home" -LoadTitle { "Current Time" + (Get-Date) } -Content { } ``` ## Pages statiques Les pages statiques permettent une meilleure performance en n'exécutant pas PowerShell pour charger le contenu de la page. Cela peut être utile lors de l'affichage de données qui ne nécessitent pas d'exécution dynamique de PowerShell. Le contenu de la page est construit au démarrage du tableau de bord. 
New-UDPage -Name 'Static Page' -Content {
    New-UDTypography (Get-Date)
} -Static
Les pages statiques n'ont pas accès aux données spécifiques à l'utilisateur. Cela inclut des variables telles que : * $Headers * $User * $Roles Vous pouvez tout de même inclure des régions dynamiques dans les pages. Ces régions dynamiques auront accès aux données de l'utilisateur. Le rechargement de l'exemple ci-dessous mettra à jour la date et l'heure indiquées dans la page. ```powershell New-UDPage -Name 'Static Page' -Content { New-UDDynamic -Content { New-UDTypography (Get-Date) } } -Static ``` ## API [New-UDPage](/powershell-universal/fr/commandes-powershell/new-udpage.md) --- # 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/components/pages.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.