> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/de/apps/components/pages.md). # Seiten Erstellen und konfigurieren Sie Seiten in PowerShell Universal-Apps, einschließlich benutzerdefinierter URLs, rollenbasiertem Zugriff, Navigationslayouts und dynamischer Titel. 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. Sobald die Seite erstellt wurde, wird sie auf der Registerkarte „Pages“ aufgeführt. Um den Inhalt einer Seite zu aktualisieren, klicken Sie auf die Schaltfläche Edit Code. Als Beispiel könnten Sie Ihrer Seite eine Schaltfläche hinzufügen. ```powershell New-UDPage -Name 'Users' -Url '/users' -Content { New-UDButton -Text 'What page is this?' -OnClick { Show-UDToast $UDPage } } -AutoInclude ``` Seiten werden Apps mit dem Parameter `-AutoInclude` automatisch hinzugefügt. Rufen Sie einfach New-UDApp im Stammverzeichnis der PS1-Datei Ihrer App auf. ```powershell 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. ```powershell $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 definiert werden, indem ein Array von UDPages an `New-UDApp` übergeben wird ```powershell $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 organisieren. Das können Sie mithilfe von Seiten tun. ```powershell $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 mit dem Parameter `-Url` eine benutzerdefinierte URL erhalten. Sie könnten zu dieser Seite navigieren, indem Sie die URL `/db` Ihrer App aufrufen. ```powershell $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. ```powershell $Pages = @() $Pages += New-UDPage -Name 'Dashboard' -Url '/db/:user' -Content { New-UDTypography -Text 'Dashboard for user: $User' } New-UDApp -Title 'Pages' -Pages $Pages ``` ### Abfragezeichenfolgen-Parameter Abfragezeichenfolgen-Parameter werden an Seiten und andere Endpunkte als Hashtable-Variable namens `$Query` übergeben. Wenn Sie beispielsweise eine Seite mit dem folgenden Abfragezeichenfolgen-Parameter aufrufen: `http://localhost:5000/dashboard/Page1?test=123` Sie hätten mit der folgenden Syntax Zugriff auf diesen Wert: ```powershell $Query.test $Query['test'] ``` ## Rollenbasierter Zugriff {% hint style="info" %} Diese Funktion erfordert eine [Lizenz](/powershell-universal/de/licensing.md). {% endhint %} Sie können Benutzer anhand ihrer Rolle am Zugriff auf Seiten hindern, indem Sie den Parameter `-Role` von Seiten verwenden. Rollen und Rollenrichtlinien können Sie auf der [Sicherheitsseite](/powershell-universal/de/sicherheit/security.md#policy-assignment) konfigurieren. ```powershell $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 stehen zur Anpassung der Kopfzeile zur Verfügung. ### 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. ```powershell 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. ```powershell 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 [List](/powershell-universal/de/apps/components/data-display/list.md#list)-Komponente definiert. Navigationslayouts sind entweder permanent oder temporär. ### Benutzerdefinierte Navigation Benutzerdefinierte Navigation kann mit einer Liste definiert werden. Listenelemente können untergeordnete Elemente enthalten, um Dropdown-Bereiche in der Navigation zu erstellen. ```powershell $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 ``` ### Dynamische Navigation Dynamische Navigation kann verwendet werden, um während des Seitenladens Skripte auszuführen und anhand von Variablen wie Benutzer, IP-Adresse oder Rollen zu bestimmen, welche Navigationskomponenten angezeigt werden. Sie können dynamische Navigation mit dem Parameter `-LoadNavigation` erzeugen. Der Wert des Parameters sollte ein Skriptblock sein, der beim Laden der Navigation ausgeführt wird. ```powershell $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 auf bestimmte Menüelemente zugreifen kann. Stellen Sie sicher, dass Sie dieselbe Rolle auch auf der Seite angeben. ```powershell $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. ```powershell 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. ```powershell $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 ``` Das temporäre Layout erstellt eine Navigationsleiste, die über ein Hamburger-Menü in der oberen linken Ecke geöffnet werden kann. Dies ist die Standardeinstellung. ```powershell $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 ``` ### Horizontale Navigation Sie können `New-UDAppBar` mit einer leeren Seite verwenden, um eine horizontale Navigation zu erstellen. ```powershell 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](/powershell-universal/de/plattform/published-folders.md) ein, um Ihr Logo zu hosten. Nun können Sie beim Erstellen Ihrer Seite den Pfad zum Logo angeben. ```powershell New-UDPage -Name 'Home' -Logo '/assets/favicon.png' -Content { } ``` Das Logo wird in der oberen linken Ecke angezeigt. Um den Stil Ihres Logos anzupassen, können Sie ein [Cascading Style Sheet](/powershell-universal/de/apps/themes/cascading-style-sheets.md) verwenden und die Element-ID `ud-logo` ansprechen. ## Kopfzeileninhalt Sie können benutzerdefinierten Inhalt für die Kopfzeile definieren, indem Sie den Parameter `-HeaderContent` verwenden. ```powershell $Page = New-UDPage -Name 'Home' -Content { } -HeaderContent { New-UDButton -Icon (New-UDIcon -Icon Users) -Text 'User' } New-UDApp -Title "Dashboard" -Pages $Page ``` ## 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. ```powershell 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 Start 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 weiterhin dynamische Bereiche in Seiten einbinden. Diese dynamischen Bereiche haben Zugriff auf Benutzerdaten. Ein Neuladen des folgenden Beispiels aktualisiert das auf der Seite aufgeführte Datum und die Uhrzeit. ```powershell New-UDPage -Name 'Static Page' -Content { New-UDDynamic -Content { New-UDTypography (Get-Date) } } -Static ``` ## API [New-UDPage](/powershell-universal/de/powershell-befehle/new-udpage.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.devolutions.net/powershell-universal/de/apps/components/pages.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.