Benutzerdefinierte Navigationstechniken in PowerShell Universal Dashboard

Überblick über Standard- und benutzerdefinierte Navigation in PowerShell Universal Dashboard: von New-UDPage-Icons über New-UDList-Verschachtelung und permanente Layouts bis zu seitenspezifischer Navigation und LoadNavigation zur Laufzeit.

14. April 2022

Adam Driscoll

In diesem Beitrag zeigen wir, wie Sie in PowerShell Universal Dashboard eine benutzerdefinierte Navigation erstellen.

Ein Dashboard mit Seiten einrichten

Der erste Schritt ist, ein Dashboard zu erstellen und Seiten hinzuzufügen. Klicken Sie dazu auf User Interfaces > Dashboards und anschließend auf die Schaltfläche Create New Dashboard. Um das Skript zu sehen, das das Dashboard erzeugt, klicken Sie auf die Schaltfläche Edit Details.

PowerShell Universal dashboard toolbar with the Edit Details action highlighted. — Edit Details in einem PowerShell Universal-Dashboard

Wenn dies Ihr erstes Dashboard ist, wird dem Inhalt ein Vorlagenskript hinzugefügt. Sie können die Vorlage löschen und das folgende Skript einfügen. Speichern Sie das Dashboard-Skript mit Ctrl+S oder über die Speichern-Schaltfläche.

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

Klicken Sie anschließend auf die Schaltfläche View, um das Dashboard anzusehen.

PowerShell Universal dashboard toolbar with the View globe icon selected. — Ein PowerShell Universal-Dashboard anzeigen

Sie sollten eine einzelne Seite mit dem Text Home sehen. Wenn Sie zum Editor zurückkehren, merken Sie, dass Änderungen nach dem Speichern im Dashboard übernommen werden.

Aktualisieren Sie als Nächstes Ihr Dashboard-Skript um eine weitere Seite.

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

Wenn Sie das Dashboard anzeigen, sehen Sie ein Hamburger-Menü mit Navigation zur zweiten Seite. Das ist das Standardverhalten der Navigation.

PowerShell Universal dashboard Settings page with the default hamburger menu. — Standard-Hamburger-Navigation in Universal Dashboard

Zusätzlich können Sie Icons einbinden, die in der Navigationsleiste angezeigt werden.

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

Nachdem wir ein Dashboard mit mehreren Seiten haben, können wir eine benutzerdefinierte Navigation einrichten. Damit lassen sich die Reihenfolge der Seiten organisieren, verschachtelte Dropdowns erstellen und externe Seiten verlinken. Nutzen Sie dazu die Cmdlets New-UDList und New-UDListItem. Mit der Liste können Sie die vorhandene Navigation nachbilden und einen neuen externen Link zu einer Dokumentationsseite hinzufügen.

$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

Die resultierende Navigation sollte so aussehen.

Custom Universal Dashboard nav listing Home, Settings, and Documentation. — Benutzerdefinierte Navigation mit externem Documentation-Link

Möglicherweise möchten Sie Navigationselemente in einer Dropdown-Liste gruppieren. Der Parameter -Children von New-UDListItem macht das möglich.

$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

Die resultierende Navigation hat jetzt ein Help-Dropdown mit den Links About und Documentation.

Universal Dashboard Help menu expanded with About and Documentation items. — Verschachtelte Help-Navigation in Universal Dashboard

Navigationslayouts festlegen

Standardmäßig ist das Navigationslayout auf temporary gesetzt. Sie müssen auf das Hamburger-Menü klicken, um die Navigation anzuzeigen. Wenn die Navigation dauerhaft seitlich sichtbar sein soll, verwenden Sie das 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

Das permanente Layout verschiebt die Navigation unter den Header und rückt den Seiteninhalt nach rechts.

Universal Dashboard Settings page with permanent side navigation visible. — Permanentes Navigationslayout in Universal Dashboard

Die Navigation wird auf jeder Seite von dem geerbt, was auf dem Befehl New-UDDashboard gesetzt ist. Wenn Sie die Navigation auf einer bestimmten Seite ändern möchten, verwenden Sie den Parameter -Navigation auf dieser Seite.

In diesem Beispiel hat die Settings-Seite eine eigene benutzerdefinierte Navigation, die andere Seiten nicht haben.

$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

In manchen Szenarien möchten Sie die Navigation zur Laufzeit an Bedingungen anpassen. Standardmäßig wird die Navigation beim Start des Dashboards erzeugt und bleibt während der Laufzeit konstant. Für eine dynamische Navigation, die beim Laden der Seite erzeugt wird, verwenden Sie den Parameter -LoadNavigation. Sie geben weiterhin ein New-UDList zurück, können die Navigation aber anhand von Benutzerrollen oder dem Zustand der Umgebung anpassen.

Dieses einfache Beispiel ändert die Navigation je nach Tageszeit.

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

Fazit

In diesem Beitrag haben wir die verschiedenen Wege zur Konfiguration der Navigation in PowerShell Universal Dashboard betrachtet: Standard-Seitennavigation, benutzerdefinierte Listen, verschachtelte Menüs, permanente Layouts, Seitenüberschreibungen und dynamisches -LoadNavigation.

Bereit zum Bauen? PowerShell Universal herunterladen.

Benutzerdefinierte Navigationstechniken in PowerShell Universal Dashboard

Ein Dashboard mit Seiten einrichten

Benutzerdefinierte Navigation konfigurieren

Navigationslayouts festlegen

Navigation pro Seite anpassen

Dynamische Navigation

Fazit