Tilpassede navigationsteknikker i PowerShell Universal Dashboard

I det her indlæg ser vi på, hvordan du opretter tilpasset navigation i PowerShell Universal Dashboard.

Opsæt et dashboard med sider

Første trin er at oprette et dashboard og tilføje nogle sider. For at oprette et dashboard skal du klikke på User Interfaces > Dashboards og derefter på knappen Create New Dashboard. For at se det script, der genererer dashboardet, skal du klikke på knappen Edit Details.

Hvis det er det første dashboard, du har oprettet, tilføjes et skabelonscript til dashboardets indhold. Du kan slette skabelonen og indsætte scriptet nedenfor. Gem dashboard-scriptet ved at trykke på Ctrl+S eller klikke på gem-knappen.

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

Klik derefter på knappen View for at se, hvordan dashboardet ser ud.

Du bør have en enkelt side med teksten Home. Hvis du går tilbage til editoren, kan du se, at de ændringer, du laver, afspejles på dashboardet, når det er gemt.

Opdatér derefter dashboard-scriptet, så det indeholder endnu en side.

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

Når du får dashboardet vist, kan du se, at du nu har en hamburgermenu med navigation til den anden side. Det er standardadfærden for navigation.

Du kan også medtage ikoner, der vises i navigationspanelet.

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

Konfigurér tilpasset navigation

Nu hvor vi har et dashboard med flere sider, kan vi konfigurere tilpasset navigation. Tilpasset navigation lader os bestemme sidernes rækkefølge, oprette indlejrede rullemenuer og linke til eksterne sider. Til tilpasset navigation bruger vi cmdlet’erne New-UDList og New-UDListItem. Med listen kan vi genskabe den eksisterende navigation og tilføje et nyt, eksternt link til et dokumentationssite.

$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

Den færdige navigation bør se sådan ud.

Du vil måske gruppere navigationselementer ved at indlejre dem i en rullemenu. Parameteren -Children på New-UDListItem kan bruges til det.

$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

Nu har den færdige navigation en Help-rullemenu med et link til About og et til Documentation.

Angiv navigationslayouts

Som standard er navigationslayoutet sat til midlertidigt. Du skal klikke på hamburgermenuen for at få navigationen frem. Hvis du vil have navigationen stående fast i siden, kan du bruge det permanente layout.

$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

Det permanente layout flytter navigationen ned under headeren og skubber sidens indhold til højre.

Tilpas navigationen pr. side

Navigationen nedarves på hver side ud fra det, der er sat på kommandoen New-UDDashboard. Hvis du vil ændre navigationen på en bestemt side, kan du bruge parameteren -Navigation på den side.

I eksemplet har siden Settings sin egen tilpassede navigation, som de andre sider ikke har.

$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

Dynamisk navigation

I nogle scenarier vil du justere navigationen ud fra betingelser under kørsel. Navigationen genereres som standard, når dashboardet startes, og forbliver uændret, mens det kører. Hvis du vil lave dynamisk navigation, der genereres, mens siden indlæses, skal du bruge parameteren -LoadNavigation. Du returnerer stadig en New-UDList fra den, men du kan tilpasse navigationen ud fra for eksempel brugerens roller eller miljøets tilstand.

Det enkle eksempel ændrer navigationen ud fra tidspunktet på dagen.

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

Konklusion

I indlægget har vi set på de forskellige måder at konfigurere navigation på i PowerShell Universal Dashboard.

Klar til at bygge? Hent PowerShell Universal.