> 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
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.
```powershell
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.
```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 durch Übergabe eines Arrays von UDPages an `New-UDApp` definiert werden
```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 aufteilen. Dies 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 durch Verwendung des Parameters `-Url` eine benutzerdefinierte URL haben. 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
```
### 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:
```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 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](/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 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.
```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 Komponente [List](/powershell-universal/de/apps/components/data-display/list.md#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.
```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 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.
```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 Zugriff auf bestimmte Menüelemente hat. 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 linken oberen 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
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 linken oberen 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 benutzerdefinierte Inhalte 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 Starten des Dashboards erstellt.
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.
```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.