Pages

Informations sur les pages des applications universelles.

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.

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.

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.

$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.

$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.

$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.

$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.

$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 :

$Query.test
$Query['test']

Contrôle d'accès basé sur les rôles

Cette fonctionnalité nécessite une licence.

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é.

$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.

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.

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. 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.

$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 personnalisée

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.

$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.

$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.

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.

$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

Tiroir de navigation permanent

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.

$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

Tiroir de navigation temporaire

Navigation horizontale

Navigation horizontale

Vous pouvez utiliser New-UDAppBar avec une page vierge pour créer une navigation horizontale.

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é pour héberger votre logo.

Dossier d'éléments publiés

Lors de la création de votre page, vous pouvez spécifier le chemin d'accès au logo.

New-UDPage -Name 'Home' -Logo '/assets/favicon.png' -Content {
}

Le logo s'affichera dans le coin supérieur gauche.

Logo

Pour personnaliser le style de votre logo, vous pouvez utiliser une feuille de style en cascade 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.

$Page = New-UDPage -Name 'Home' -Content {

} -HeaderContent {
    New-UDButton -Icon (New-UDIcon -Icon Users) -Text 'User'
}

New-UDApp -Title "Dashboard" -Pages $Page

Bouton dans l'en-tête

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.

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.

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 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.

New-UDPage -Name 'Static Page' -Content {
   New-UDDynamic -Content {
       New-UDTypography (Get-Date)
   }
} -Static

API

New-UDPage