Tecniche di navigazione personalizzata in PowerShell Universal Dashboard

Panoramica della navigazione predefinita e personalizzata in PowerShell Universal Dashboard: dalle icone New-UDPage all’annidamento New-UDList, ai layout permanenti, alla navigazione per pagina e a LoadNavigation a runtime.

14 aprile 2022

Adam Driscoll

In questo articolo vedremo come creare una navigazione personalizzata in PowerShell Universal Dashboard.

Configurare una dashboard con le pagine

Il primo passo è creare una dashboard e aggiungervi alcune pagine. Per creare una dashboard, faccia clic su User Interfaces > Dashboards e poi sul pulsante Create New Dashboard. Per visualizzare lo script che genera la dashboard, faccia clic sul pulsante Edit Details.

PowerShell Universal dashboard toolbar with the Edit Details action highlighted. — Edit Details su una dashboard PowerShell Universal

Se è la prima dashboard che crea, verrà aggiunto uno script modello al contenuto. Può eliminare il modello e inserire lo script seguente. Salvi lo script della dashboard premendo Ctrl+S o facendo clic sul pulsante di salvataggio.

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

Quindi, faccia clic sul pulsante View per vedere come appare la dashboard.

PowerShell Universal dashboard toolbar with the View globe icon selected. — Visualizzare una dashboard PowerShell Universal

Dovrebbe avere una sola pagina con il testo Home. Se torna all’editor, noterà che le modifiche vengono riflesse sulla dashboard dopo il salvataggio.

Aggiorni quindi lo script della dashboard per includere un’altra pagina.

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

Quando visualizza la dashboard, vedrà un menu hamburger che include la navigazione verso la seconda pagina. Questo è il comportamento di navigazione predefinito.

PowerShell Universal dashboard Settings page with the default hamburger menu. — Navigazione hamburger predefinita in Universal Dashboard

Inoltre, può includere icone da mostrare nel riquadro di navigazione.

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

Configurare la navigazione personalizzata

Ora che abbiamo una dashboard con più pagine, possiamo configurare una navigazione personalizzata. Consente di organizzare l’ordine delle pagine, creare menu a discesa annidati e collegare pagine esterne. Per crearla, usi i cmdlet New-UDList e New-UDListItem. Con l’elenco può ricreare la navigazione esistente e aggiungere un nuovo collegamento esterno a un sito di documentazione.

$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 navigazione risultante dovrebbe apparire così.

Custom Universal Dashboard nav listing Home, Settings, and Documentation. — Navigazione personalizzata con un collegamento Documentation esterno

Può raggruppare gli elementi di navigazione annidandoli in un elenco a discesa. Il parametro -Children di New-UDListItem consente di farlo.

$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

Ora la navigazione risultante ha un menu a discesa Help che include i collegamenti About e Documentation.

Universal Dashboard Help menu expanded with About and Documentation items. — Navigazione Help annidata in Universal Dashboard

Impostare i layout di navigazione

Per impostazione predefinita, il layout di navigazione è impostato su temporary. Deve fare clic sul menu hamburger per mostrare la navigazione. Se desidera che la navigazione resti permanentemente sul lato, usi il layout 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

Il layout permanente sposta la navigazione sotto l’intestazione e sposta il contenuto della pagina verso destra.

Universal Dashboard Settings page with permanent side navigation visible. — Layout di navigazione permanente in Universal Dashboard

Regolare la navigazione per pagina

La navigazione viene ereditata su ogni pagina in base a quanto impostato sul comando New-UDDashboard. Se desidera modificare la navigazione su una pagina specifica, usi il parametro -Navigation su quella pagina.

In questo esempio, la pagina Settings ha una navigazione personalizzata propria, che le altre pagine non avranno.

$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

Navigazione dinamica

In alcuni scenari può voler regolare la navigazione in base a condizioni a runtime. Per impostazione predefinita, la navigazione viene generata all’avvio della dashboard e resta costante durante l’esecuzione. Per creare una navigazione dinamica generata al caricamento della pagina, usi il parametro -LoadNavigation. Continuerà a restituire un New-UDList, ma potrà adattare la navigazione in base ai ruoli dell’utente o allo stato dell’ambiente.

Questo esempio banale modifica la navigazione in base all’ora del giorno.

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'
        }
    }
}

Conclusione

In questo articolo abbiamo visto i vari modi per configurare la navigazione in PowerShell Universal Dashboard: navigazione delle pagine predefinita, elenchi personalizzati, menu annidati, layout permanenti, override per pagina e -LoadNavigation dinamico.

Pronto a costruire? Scarichi PowerShell Universal.