> 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/apps/components/pages.md).
# Pages
Une application peut être composée d'une ou plusieurs pages. Une page peut avoir un nom et une URL particuliers. Vous pouvez définir une URL qui accepte une ou plusieurs variables afin de créer une page dynamique.
## Création d'une nouvelle page
Dans l'éditeur d'application, cliquez sur le bouton Create App Page.
Bouton Create App Page
Une fois la page créée, elle apparaîtra dans l'onglet pages.
Onglet Pages
Pour mettre à jour le contenu d'une page, cliquez sur le bouton Edit Code.
Modifier une page d'application
À titre d'exemple, vous pouvez 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 applications grâce au paramètre `-AutoInclude`. Il suffit d'appeler New-UDApp à la racine du fichier PS1 de votre application.
```powershell
New-UDApp
```
## Page de base
Une page de base peut être définie à l'aide de la cmdlet `New-UDPage`. Vous pouvez 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
```
## Application avec plusieurs pages
Les applications peuvent comporter plusieurs pages, définies en passant un tableau de 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 pouvez organiser votre application en plusieurs fichiers PS1 en utilisant les 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 pouvez accéder à cette page en visitant l'URL `/db` de votre application.
```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 pour 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 transmis aux pages et aux autres points de terminaison sous la forme d'une variable hashtable appelée `$Query`.
Par exemple, si vous accédez à une page avec le paramètre de chaîne de requête suivant : `http://localhost:5000/dashboard/Page1?test=123`
Vous pourrez accéder à cette valeur en utilisant la syntaxe suivante :
```powershell
$Query.test
$Query['test']
```
## Contrôle d'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 à certaines pages en fonction de leur rôle en utilisant le 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/apps/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 avec une liste. Les éléments de liste peuvent inclure des enfants pour 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 permet d'exécuter des scripts lors du chargement de la page afin de déterminer quels composants de navigation afficher en fonction de variables telles que l'utilisateur, l'adresse IP ou les rôles.
Vous pouvez générer une navigation dynamique en utilisant le 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
```
### Contrôle d'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 l'accès à certains éléments de menu. 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 à l'intérieur des pages, vous pouvez également 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 sur le 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. Il s'agit du 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
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 en utilisant le paramètre `-Logo`.
Commencez par configurer un [dossier publié](/powershell-universal/fr/plateforme/published-folders.md) pour héberger votre logo.
Lors de la création de votre page, vous pouvez spécifier le chemin d'accès au 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/apps/themes/cascading-style-sheets.md) et cibler l'ID d'élément `ud-logo`.
## Contenu de l'en-tête
Vous pouvez définir un contenu personnalisé à inclure dans l'en-tête en utilisant le 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 modifier ce comportement en utilisant `-LoadTitle`. Il sera appelé lors du chargement de la page. Cela 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 d'améliorer les performances 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.
Les pages statiques n'ont pas accès aux données spécifiques à l'utilisateur. Cela inclut les variables telles que :
* $Headers
* $User
* $Roles
Vous pouvez toujours inclure des régions dynamiques dans les pages. Ces régions dynamiques auront accès aux données utilisateur. Le rechargement de l'exemple ci-dessous mettra à jour la date et l'heure affichées sur la page.
```powershell
New-UDPage -Name 'Static Page' -Content {
New-UDDynamic -Content {
New-UDTypography (Get-Date)
}
} -Static
```
## API
[New-UDPage](https://github.com/Devolutions/doc-gitbook/blob/master/translations/fr/powershell-universal/cmdlets/New-UDPage.txt)
---
# 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:
```
GET https://docs.devolutions.net/powershell-universal/fr/apps/components/pages.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.