Pages

Une appli peut être composé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'appli, cliquez sur le bouton Create App Page.

Bouton Create App Page

Une fois la page créée, elle sera répertoriée dans l'onglet des pages.

Onglet Pages

Pour mettre à jour le contenu d'une page, cliquez sur le bouton Edit Code.

Modifier la page de l'appli

Par exemple, vous pourriez 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 applis avec le paramètre -AutoInclude. Il suffit d'appeler New-UDApp à la racine du fichier PS1 de votre appli.

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.

$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 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 voudrez peut-être organiser votre appli en plusieurs fichiers PS1. Vous pouvez le faire à l'aide des 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 en utilisant le paramètre -Url. Vous pourriez accéder à cette page en visitant l'URL /db de votre appli.

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

$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 terminaux sous la forme d'une 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 en utilisant la syntaxe suivante :

$Query.test
$Query['test']

Accès basé sur les rôles

Cette fonctionnalité nécessite une licence.

Vous pouvez empêcher les utilisateurs d'accéder à des 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. N'est pas 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 afin de 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 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 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

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.

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

Tout d'abord, configurez un dossier publié pour héberger votre logo.

Dossier des actifs publiés

Maintenant, 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 remplacer ce comportement en utilisant -LoadTitle. Il sera appelé lors du chargement de la page. Ceci 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 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 toujours 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.

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

API

New-UDPage