Adam DriscollEn esta entrada veremos cómo crear navegación personalizada en PowerShell Universal Dashboard.
Configurar un panel con páginas
El primer paso es crear un panel y añadirle algunas páginas. Para crear un panel, haga clic en User Interfaces > Dashboards y luego en el botón Create New Dashboard. Para ver el script que genera el panel, haga clic en el botón Edit Details.
Si es el primer panel que crea, se añadirá un script de plantilla al contenido. Puede eliminar la plantilla e insertar el script siguiente. Guarde el script del panel pulsando Ctrl+S o haciendo clic en el botón de guardar.
New-UDDashboard -Title 'Navigation' -Pages @(
New-UDPage -Name 'Home' -Content {
New-UDTypography -Text 'Home'
}
)A continuación, haga clic en el botón View para ver cómo queda el panel.
Debería tener una sola página con el texto Home. Si vuelve al editor, verá que los cambios se reflejan en el panel una vez guardados.
A continuación, actualice el script del panel para incluir otra página.
New-UDDashboard -Title 'Navigation' -Pages @(
New-UDPage -Name 'Home' -Content {
New-UDTypography -Text 'Home'
}
New-UDPage -Name 'Settings' -Content {
New-UDTypography -Text 'Settings'
}
)Al ver el panel, verá un menú hamburguesa que incluye la navegación a la segunda página. Ese es el comportamiento de navegación predeterminado.
Además, puede incluir iconos que se muestren en el cajón de navegación.
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)
)Configurar la navegación personalizada
Ahora que tenemos un panel con varias páginas, podemos configurar una navegación personalizada. Permite organizar el orden de las páginas, crear menús desplegables anidados y enlazar a páginas externas. Para crearla, use los cmdlets New-UDList y New-UDListItem. Con la lista, puede recrear la navegación existente y añadir un nuevo enlace externo a un sitio de documentación.
$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 $NavLa navegación resultante debería verse así.
Es posible que quiera agrupar elementos de navegación anidándolos en una lista desplegable. El parámetro -Children de New-UDListItem permite hacerlo.
$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 $NavAhora, la navegación resultante tiene un menú desplegable Help que incluye los enlaces About y Documentation.
Definir diseños de navegación
De forma predeterminada, el diseño de navegación está establecido en temporary. Debe hacer clic en el menú hamburguesa para mostrar la navegación. Si desea que la navegación permanezca fija en el lateral, use el diseño 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 $NavEl diseño permanente coloca la navegación debajo del encabezado y desplaza el contenido de la página hacia la derecha.
Ajustar la navegación por página
La navegación se hereda en cada página según lo definido en el comando New-UDDashboard. Si desea cambiar la navegación en una página concreta, use el parámetro -Navigation en esa página.
En este ejemplo, la página Settings tiene su propia navegación personalizada, que el resto de páginas no tendrán.
$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 $NavNavegación dinámica
En algunos escenarios, puede querer ajustar la navegación según condiciones en tiempo de ejecución. De forma predeterminada, la navegación se genera al iniciar el panel y permanece constante mientras se ejecuta. Para crear una navegación dinámica generada al cargar la página, use el parámetro -LoadNavigation. Seguirá devolviendo un New-UDList, pero podrá adaptar la navegación según roles de usuario o el estado del entorno.
Este ejemplo sencillo cambia la navegación según la hora del día.
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'
}
}
}Conclusión
En esta entrada hemos visto las distintas formas de configurar la navegación en PowerShell Universal Dashboard: navegación de páginas predeterminada, listas personalizadas, menús anidados, diseños permanentes, anulaciones por página y -LoadNavigation dinámico.
¿Listo para crear? Descargue PowerShell Universal.