Seiten

Eine App kann aus einer oder mehreren Seiten bestehen. Eine Seite kann einen bestimmten Namen und eine bestimmte URL haben. Sie können eine URL definieren, die eine oder mehrere Variablen in der URL akzeptiert, um eine dynamische Seite zu definieren.

Eine neue Seite erstellen

Klicken Sie im App-Editor auf die Schaltfläche Create App Page.

Schaltfläche Create App Page

Sobald die Seite erstellt wurde, wird sie in der Registerkarte Seiten aufgeführt.

Registerkarte Seiten

Um den Inhalt einer Seite zu aktualisieren, klicken Sie auf die Schaltfläche Edit Code.

App-Seite bearbeiten

Als Beispiel könnten Sie Ihrer Seite eine Schaltfläche hinzufügen.

New-UDPage -Name 'Users' -Url '/users' -Content {
    New-UDButton -Text 'What page is this?' -OnClick {
        Show-UDToast $UDPage
    }
} -AutoInclude

Seiten werden Apps automatisch mit dem Parameter -AutoInclude hinzugefügt. Rufen Sie einfach New-UDApp im Stammverzeichnis der PS1-Datei Ihrer App auf.

New-UDApp 

Einfache Seite

Eine einfache Seite kann mit dem Cmdlet New-UDPage definiert werden. Sie könnten zu dieser Seite navigieren, indem Sie die URL /app Ihres Dashboards aufrufen.

$Pages = @()
$Pages += New-UDPage -Name 'App' -Content {
    New-UDTypography -Text 'App'
}

New-UDApp -Title 'Pages' -Pages $Pages

App mit mehreren Seiten

Apps können mehrere Seiten haben, und diese Seiten können durch Übergabe eines Arrays von UDPages an New-UDApp definiert werden

$Pages = @()
$Pages += New-UDPage -Name 'App One' -Content {
    New-UDTypography -Text 'App Two'
}

$Pages += New-UDPage -Name 'App Two' -Content {
    New-UDTypography -Text 'App Two'
}

New-UDApp -Title 'Pages' -Pages $Pages

Möglicherweise möchten Sie Ihre App in mehrere PS1-Dateien aufteilen. Dies können Sie mithilfe von Seiten tun.

$UDScriptRoot = $PSScriptRoot
$Pages = @()
$Pages += New-UDPage -Name 'App One' -Content {
    . "$UDScriptRoot\db1.ps1"
}

$Pages += New-UDPage -Name 'App Two' -Content {
    . "$UDScriptRoot\db2.ps1"
}

New-UDApp -Title 'Pages' -Pages $Pages

Seite mit einer benutzerdefinierten URL

Eine Seite kann durch Verwendung des Parameters -Url eine benutzerdefinierte URL haben. Sie könnten zu dieser Seite navigieren, indem Sie die URL /db Ihrer App aufrufen.

$Pages = @()
$Pages += New-UDPage -Name 'App' -Url '/db' -Content {
    New-UDTypography -Text 'App'
}

New-UDApp -Title 'Pages' -Pages $Pages

Seite mit Variablen in der URL

Sie können eine Seite mit Variablen in der URL definieren, um Seiten zu erstellen, die sich basierend auf dieser URL anpassen.

$Pages = @()
$Pages += New-UDPage -Name 'Dashboard' -Url '/db/:user' -Content {
    New-UDTypography -Text 'Dashboard for user: $User'
}

New-UDApp -Title 'Pages' -Pages $Pages

Query-String-Parameter

Query-String-Parameter werden an Seiten und andere Endpunkte als Hashtable-Variable namens $Query übergeben.

Wenn Sie zum Beispiel eine Seite mit dem folgenden Query-String-Parameter aufrufen: http://localhost:5000/dashboard/Page1?test=123

Sie hätten mit der folgenden Syntax Zugriff auf diesen Wert:

$Query.test
$Query['test']

Rollenbasierter Zugriff

Diese Funktion erfordert eine Lizenz.

Sie können Benutzer basierend auf ihrer Rolle daran hindern, auf Seiten zuzugreifen, indem Sie den Parameter -Role von Seiten verwenden. Rollen und Rollenrichtlinien können Sie auf der Sicherheitsseite konfigurieren.

$Pages = @()
$Pages += New-UDPage -Name 'Administrators' -Content {
    New-UDTypography -Text 'Dashboard for user: $User'
} -Role 'Administrator'

$Pages += New-UDPage -Name 'Operators' -Content {
    New-UDTypography -Text 'Dashboard for user: $User'
} -Role 'Operator'

New-UDApp -Title 'Pages' -Pages $Pages

Kopfzeile

Die folgenden Optionen sind zum Anpassen der Kopfzeile verfügbar.

Position

Verwenden Sie den Parameter -HeaderPosition, um das Verhalten der Kopfzeile anzupassen.

• absolute\fixed - Bleibt am oberen Rand der Seite, auch beim Scrollen
• relative - Bleibt am oberen Rand der Seite. Beim Scrollen nicht sichtbar.

New-UDPage -HeaderPosition fixed -Content {
    New-UDElement -tag div -Attributes @{
        style = @{
            height = '150vh'
        }
    }
}

Farben

Sie können die Farben der Kopfzeile anpassen, indem Sie die Parameter -HeaderColor und -HeaderBackgroundColor angeben. Diese Farben überschreiben die Themenfarben.

New-UDPage -Name 'Home' -Content {
} -HeaderColor 'black' -HeaderBackgroundColor 'white'

Navigation

Sie können die Navigation einer Seite mit den Parametern -Navigation und -NavigationLayout anpassen. Die Navigation wird mit der Komponente List definiert. Navigationslayouts sind entweder permanent oder temporär.

Benutzerdefinierte Navigation

Eine benutzerdefinierte Navigation kann mit einer Liste definiert werden. Listenelemente können untergeordnete Elemente enthalten, um Dropdown-Bereiche in der Navigation zu erstellen.

$Navigation = @(
    New-UDListItem -Label "Home"
    New-UDListItem -Label "Getting Started" -Children {
        New-UDListItem -Label "Installation" -Href '/Installation' 
        New-UDListItem -Label "Usage" -Href '/Usage' 
        New-UDListItem -Label "FAQs" -Href '/faqs' 
        New-UDListItem -Label "System Requirements" -Href'/requirements' 
        New-UDListItem -Label "Purchasing" -Href '/purchasing' 
    }
)

$Pages = @()
$Pages += New-UDPage -Name 'Installation' -Content {
 New-UDTypography -Text "Installation"
}

$Pages += New-UDPage -Name 'Usage' -Content {
    New-UDTypography -Text "Usage"
} 

New-UDApp -Title "Hello, World!" -Pages $Pages -NavigationLayout permanent -Navigation $Navigation

Benutzerdefinierte Navigation

Dynamische Navigation

Dynamische Navigation kann verwendet werden, um Skripte während des Seitenladens auszuführen und so basierend auf Variablen wie Benutzer, IP-Adresse oder Rollen zu bestimmen, welche Navigationskomponenten angezeigt werden.

Sie können eine dynamische Navigation mit dem Parameter -LoadNavigation generieren. Der Wert des Parameters sollte ein Skriptblock sein, der beim Laden der Navigation ausgeführt wird.

$Navigation = {
    New-UDListItem -Label "Home - $(Get-Date)"
    New-UDListItem -Label "Getting Started" -Children {
        New-UDListItem -Label "Installation" -Href '/installation' 
        New-UDListItem -Label "Usage" -Href '/usage' 
        New-UDListItem -Label "FAQs" -Href '/faqs' 
        New-UDListItem -Label "System Requirements" -Href'/requirements' 
        New-UDListItem -Label "Purchasing" -Href '/purchasing' 
    }
}

$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
 New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation

$Pages += New-UDPage -Name 'Test2' -Content {
    New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation


New-UDApp -Title "Hello, World!" -Pages $Pages

Rollenbasierter Zugriff

Sie können dynamische Navigation verwenden, um ein Navigationsmenü zu erstellen, das Rollen nutzt. Verwenden Sie Protect-UDSection, um einzuschränken, wer Zugriff auf bestimmte Menüelemente hat. Stellen Sie sicher, dass Sie dieselbe Rolle auch auf der Seite angeben.

$Navigation = {
    New-UDListItem -Label "Home" -Href '/Home' 
    Protect-UDSection -Role "Administrator" -Content {
        New-UDListItem -Label "Admins" -Href '/Admins' 
    }
}

$Pages = @()
$Pages += New-UDPage -Name 'Home' -Content {
 New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation

$Pages += New-UDPage -Name 'Admins' -Content {
    New-UDTypography -Text "Hello"
} -NavigationLayout permanent -LoadNavigation $Navigation -Roles "Administrator"

New-UDApp -Title "Hello, World!" -Pages $Pages

Wenn Sie Rollen innerhalb von Seiten prüfen möchten, können Sie auch den Operator -In und die Variable $Roles verwenden.

New-UDPage -Name 'Home' -Content { 
    if ("Administrator" -in $Roles)
    {
        New-UDTypography -Text "I am an administrator"
    } else {
        New-UDTypography -Text "I am NOT an administrator"
    }
} 

Layouts

Das permanente Layout erstellt eine statische Navigationsleiste auf der linken Seite der Seite. Sie kann vom Benutzer nicht ausgeblendet werden.

$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
 New-UDTypography -Text "Hello"
} -NavigationLayout permanent

$Pages += New-UDPage -Name 'Test2' -Content {
    New-UDTypography -Text "Hello"
} -NavigationLayout permanent


New-UDApp -Title "Hello, World!" -Pages $Pages

Permanente Navigationsleiste

Das temporäre Layout erstellt eine Navigationsleiste, die über ein Hamburger-Menü in der linken oberen Ecke geöffnet werden kann. Dies ist die Standardeinstellung.

$Pages = @()
$Pages += New-UDPage -Name 'Test' -Content {
 New-UDTypography -Text "Hello"
} -NavigationLayout temporary

$Pages += New-UDPage -Name 'Test2' -Content {
    New-UDTypography -Text "Hello"
} -NavigationLayout temporary


New-UDApp -Title "Hello, World!" -Pages $Pages

Temporäre Navigationsleiste

Horizontale Navigation

Horizontale Navigation

Sie können New-UDAppBar mit einer leeren Seite verwenden, um eine horizontale Navigation zu erstellen.

New-UDApp -Title 'PowerShell Universal' -Pages @(
    New-UDPage -Name 'Page' -Content {
        New-UDAppBar -Children {
            New-UDTypography -Text "Title" -Variant h4 -Style @{
                marginRight = "50px"
            }
            New-UDMenu -Variant text -Text "Settings" -Children {
                New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
                New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
                New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
            }
            New-UDMenu -Variant text -Text "Options" -Children {
                New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
                New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
                New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
            }
            New-UDMenu -Variant text -Text "Tools" -Children {
                New-UDMenuItem -Text 'Item 1' -OnClick { Invoke-UDRedirect "/item1" }
                New-UDMenuItem -Text 'Item 2' -OnClick { Invoke-UDRedirect "/item1" }
                New-UDMenuItem -Text 'Item 3' -OnClick { Invoke-UDRedirect "/item1" }
            }
        } -DisableThemeToggle
    } -Blank
) 

Logo

Sie können ein Logo in der Navigationsleiste anzeigen, indem Sie den Parameter -Logo verwenden.

Richten Sie zunächst einen veröffentlichten Ordner ein, um Ihr Logo zu hosten.

Ordner für veröffentlichte Assets

Nun können Sie beim Erstellen Ihrer Seite den Pfad zum Logo angeben.

New-UDPage -Name 'Home' -Logo '/assets/favicon.png' -Content {
}

Das Logo wird in der linken oberen Ecke angezeigt.

Logo

Um den Stil Ihres Logos anzupassen, können Sie ein Cascading Style Sheet verwenden und die Element-ID ud-logo ansprechen.

Kopfzeileninhalt

Sie können benutzerdefinierte Inhalte für die Kopfzeile definieren, indem Sie den Parameter -HeaderContent verwenden.

$Page = New-UDPage -Name 'Home' -Content {

} -HeaderContent {
    New-UDButton -Icon (New-UDIcon -Icon Users) -Text 'User'
}

New-UDApp -Title "Dashboard" -Pages $Page

Schaltfläche in der Kopfzeile

Dynamischer Seitentitel

Seitentitel sind standardmäßig statisch, aber Sie können dieses Verhalten mit -LoadTitle überschreiben. Es wird aufgerufen, wenn die Seite geladen wird. Dies ist nützlich beim Definieren von Seiten in mehrsprachigen Dashboards.

New-UDPage -Name "Home" -LoadTitle { "Current Time" + (Get-Date) } -Content { } 

Statische Seiten

Statische Seiten ermöglichen eine bessere Leistung, da kein PowerShell ausgeführt wird, um den Inhalt der Seite zu laden. Dies kann nützlich sein, wenn Daten angezeigt werden, die keine dynamische PowerShell-Ausführung erfordern. Der Seiteninhalt wird beim Starten des Dashboards erstellt.

New-UDPage -Name 'Static Page' -Content {
    New-UDTypography (Get-Date)
} -Static

Statische Seiten haben keinen Zugriff auf benutzerspezifische Daten. Dazu gehören Variablen wie:

• $Headers
• $User
• $Roles

Sie können dennoch dynamische Bereiche innerhalb von Seiten einbinden. Diese dynamischen Bereiche haben Zugriff auf Benutzerdaten. Beim Neuladen des folgenden Beispiels werden das auf der Seite aufgeführte Datum und die Uhrzeit aktualisiert.

New-UDPage -Name 'Static Page' -Content {
   New-UDDynamic -Content {
       New-UDTypography (Get-Date)
   }
} -Static

API

New-UDPage