Techniques de navigation personnalisée dans PowerShell Universal Dashboard

Parcours de la navigation par défaut et personnalisée dans PowerShell Universal Dashboard, des icônes New-UDPage à l’imbrication New-UDList, aux dispositions permanentes, à la navigation par page et au LoadNavigation à l’exécution.

14 avril 2022

Adam Driscoll

Dans cet article, nous verrons comment créer une navigation personnalisée dans PowerShell Universal Dashboard.

Configurer un tableau de bord avec des pages

La première étape consiste à créer un tableau de bord et à y ajouter des pages. Pour créer un tableau de bord, cliquez sur User Interfaces > Dashboards, puis sur le bouton Create New Dashboard. Pour afficher le script qui génère le tableau de bord, cliquez sur le bouton Edit Details.

PowerShell Universal dashboard toolbar with the Edit Details action highlighted. — Edit Details sur un tableau de bord PowerShell Universal

Si c’est le premier tableau de bord que vous créez, un script modèle sera ajouté au contenu. Vous pouvez supprimer le modèle et insérer le script ci-dessous. Enregistrez le script du tableau de bord avec Ctrl+S ou en cliquant sur le bouton d’enregistrement.

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    }
)

Ensuite, cliquez sur le bouton View pour voir à quoi ressemble le tableau de bord.

PowerShell Universal dashboard toolbar with the View globe icon selected. — Afficher un tableau de bord PowerShell Universal

Vous devriez avoir une seule page avec le texte Home. Si vous revenez à l’éditeur, vous remarquerez que les modifications sont reflétées sur le tableau de bord une fois enregistrées.

Ensuite, mettez à jour le script du tableau de bord pour y ajouter une autre page.

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    }
    New-UDPage -Name 'Settings' -Content {
        New-UDTypography -Text 'Settings'
    }
)

Lorsque vous affichez le tableau de bord, vous verrez un menu hamburger qui inclut la navigation vers la deuxième page. C’est le comportement de navigation par défaut.

PowerShell Universal dashboard Settings page with the default hamburger menu. — Navigation hamburger par défaut dans Universal Dashboard

Vous pouvez aussi inclure des icônes à afficher dans le tiroir de navigation.

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    } -Icon (New-UDIcon -Icon Home -Size 1x)
    New-UDPage -Name 'Settings' -Content {
        New-UDTypography -Text 'Settings'
    } -Icon (New-UDIcon -Icon Cog -Size 1x)
)

Maintenant que nous avons un tableau de bord avec plusieurs pages, nous pouvons configurer une navigation personnalisée. Elle permet d’organiser l’ordre des pages, de créer des menus déroulants imbriqués et de lier des pages externes. Pour la créer, utilisez les cmdlets New-UDList et New-UDListItem. Avec la liste, vous pouvez recréer la navigation existante et ajouter un nouveau lien externe vers un site de documentation.

$Nav = New-UDList -Content {
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect '/home' } -Icon (New-UDIcon -Icon Home -Size 1x)
    New-UDListItem -Label "Settings" -OnClick { Invoke-UDRedirect '/settings' } -Icon (New-UDIcon -Icon Cog -Size 1x)
    New-UDListItem -Label "Documentation" -OnClick { Invoke-UDRedirect 'https://docs.powershelluniversal.com' } -Icon (New-UDIcon -Icon Book -Size 1x)
}

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    }
    New-UDPage -Name 'Settings' -Content {
        New-UDTypography -Text 'Settings'
    }
) -Navigation $Nav

La navigation résultante devrait ressembler à ceci.

Custom Universal Dashboard nav listing Home, Settings, and Documentation. — Navigation personnalisée avec un lien Documentation externe

Vous pouvez regrouper des éléments de navigation en les imbriquant dans une liste déroulante. Le paramètre -Children de New-UDListItem permet de le faire.

$Nav = New-UDList -Content {
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect '/home' } -Icon (New-UDIcon -Icon Home -Size 1x)
    New-UDListItem -Label "Settings" -OnClick { Invoke-UDRedirect '/settings' } -Icon (New-UDIcon -Icon Cog -Size 1x)
    New-UDListItem -Label "Help" -Icon (New-UDIcon -Icon Question -Size 1x) -Children {
        New-UDListItem -Label "About" -OnClick { Invoke-UDRedirect 'https://devolutions.net/powershell-universal/' } -Icon (New-UDIcon -Icon Question -Size 1x) -Nested
        New-UDListItem -Label "Documentation" -OnClick { Invoke-UDRedirect 'https://docs.powershelluniversal.com' } -Icon (New-UDIcon -Icon Book -Size 1x) -Nested
    }
}

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    }
    New-UDPage -Name 'Settings' -Content {
        New-UDTypography -Text 'Settings'
    }
) -Navigation $Nav

La navigation résultante a maintenant un menu déroulant Help qui inclut les liens About et Documentation.

Universal Dashboard Help menu expanded with About and Documentation items. — Navigation Help imbriquée dans Universal Dashboard

Par défaut, la disposition de navigation est définie sur temporary. Vous devez cliquer sur le menu hamburger pour afficher la navigation. Si vous souhaitez que la navigation reste en permanence sur le côté, utilisez la disposition permanent.

$Nav = New-UDList -Content {
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect '/home' } -Icon (New-UDIcon -Icon Home -Size 1x)
    New-UDListItem -Label "Settings" -OnClick { Invoke-UDRedirect '/settings' } -Icon (New-UDIcon -Icon Cog -Size 1x)
    New-UDListItem -Label "Help" -Icon (New-UDIcon -Icon Question -Size 1x) -Children {
        New-UDListItem -Label "About" -OnClick { Invoke-UDRedirect 'https://devolutions.net/powershell-universal/' } -Icon (New-UDIcon -Icon Question -Size 1x) -Nested
        New-UDListItem -Label "Documentation" -OnClick { Invoke-UDRedirect 'https://docs.powershelluniversal.com' } -Icon (New-UDIcon -Icon Book -Size 1x) -Nested
    }
}

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    } -NavigationLayout 'permanent'
    New-UDPage -Name 'Settings' -Content {
        New-UDTypography -Text 'Settings'
    } -NavigationLayout 'permanent'
) -Navigation $Nav

La disposition permanente place la navigation sous l’en-tête et décale le contenu de la page vers la droite.

Universal Dashboard Settings page with permanent side navigation visible. — Disposition de navigation permanente dans Universal Dashboard

La navigation est héritée sur chaque page selon ce qui est défini sur la commande New-UDDashboard. Si vous souhaitez modifier la navigation sur une page en particulier, utilisez le paramètre -Navigation sur cette page.

Dans cet exemple, la page Settings a sa propre navigation personnalisée, que les autres pages n’auront pas.

$Nav = New-UDList -Content {
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect '/home' } -Icon (New-UDIcon -Icon Home -Size 1x)
    New-UDListItem -Label "Settings" -OnClick { Invoke-UDRedirect '/settings' } -Icon (New-UDIcon -Icon Cog -Size 1x)
    New-UDListItem -Label "Help" -Icon (New-UDIcon -Icon Question -Size 1x) -Children {
        New-UDListItem -Label "About" -OnClick { Invoke-UDRedirect 'https://devolutions.net/powershell-universal/' } -Icon (New-UDIcon -Icon Question -Size 1x) -Nested
        New-UDListItem -Label "Documentation" -OnClick { Invoke-UDRedirect 'https://docs.powershelluniversal.com' } -Icon (New-UDIcon -Icon Book -Size 1x) -Nested
    }
}

$SettingsNav = New-UDList -Content {
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect '/home' } -Icon (New-UDIcon -Icon Home -Size 1x)
}

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    } -NavigationLayout 'permanent'
    New-UDPage -Name 'Settings' -Content {
        New-UDTypography -Text 'Settings'
    } -NavigationLayout 'permanent' -Navigation $SettingsNav
) -Navigation $Nav

Dans certains scénarios, vous souhaitez ajuster la navigation selon des conditions à l’exécution. Par défaut, la navigation est générée au démarrage du tableau de bord et reste constante pendant son exécution. Pour créer une navigation dynamique générée au chargement de la page, utilisez le paramètre -LoadNavigation. Vous retournez toujours un New-UDList, mais vous pouvez adapter la navigation selon le rôle de l’utilisateur ou l’état de l’environnement.

Cet exemple trivial modifie la navigation selon l’heure de la journée.

New-UDDashboard -Title 'Navigation' -Pages @(
    New-UDPage -Name 'Home' -Content {
        New-UDTypography -Text 'Home'
    }
    New-UDPage -Name 'Settings' -Content {
        New-UDTypography -Text 'Settings'
    }
) -LoadNavigation {
    New-UDList -Children {
        if ((Get-Date).Hour -ge 12)
        {
            New-UDListItem -Label 'Afternoon'
        }
        else
        {
            New-UDListItem -Label 'Morning'
        }
    }
}

Conclusion

Dans cet article, nous avons passé en revue les différentes façons de configurer la navigation dans PowerShell Universal Dashboard : navigation par pages par défaut, listes personnalisées, menus imbriqués, dispositions permanentes, remplacements par page et -LoadNavigation dynamique.

Prêt à construire? Téléchargez PowerShell Universal.

Techniques de navigation personnalisée dans PowerShell Universal Dashboard

Configurer un tableau de bord avec des pages

Configurer une navigation personnalisée

Définir les dispositions de navigation

Ajuster la navigation par page

Navigation dynamique

Conclusion