> 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/da/apps/components/pages.md).

# Sider

Opret og konfigurer sider i PowerShell Universal-apps, herunder brugerdefinerede URL'er, rollebaseret adgang, navigationslayouts og dynamiske titler.

En app kan bestå af en eller flere sider. En side kan have et bestemt navn og en URL. De kan definere en URL, der accepterer en eller flere variabler i URL'en, for at definere en dynamisk side.

## Oprettelse af en ny side

Klik på knappen Create App Page i app-editoren.

Når siden er blevet oprettet, vises den på fanen med sider.

For at opdatere indholdet af en side skal De klikke på knappen Edit Code.

Som et eksempel kunne De tilføje en knap til Deres side.

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

Sider føjes automatisk til apps med parameteren `-AutoInclude`. Kald blot New-UDApp i roden af Deres apps PS1-fil.

```powershell
New-UDApp 
```

## Grundlæggende side

En grundlæggende side kan defineres med cmdletten `New-UDPage`. De kan navigere til denne side ved at besøge `/app`URL'en for Deres dashboard.

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

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

## App med flere sider

Apps kan have flere sider, og disse sider kan defineres ved at sende en matrix af UDPages til `New-UDApp`

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

De ønsker måske at organisere Deres app i flere PS1-filer. De kan gøre dette ved hjælp af sider.

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

## Side med en brugerdefineret URL

En side kan have en brugerdefineret URL ved hjælp af parameteren `-Url`. De kan gå til denne side ved at besøge URL'en `/db` for Deres app.

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

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

## Side med variabler i URL

De kan definere en side med variabler i URL'en for at oprette sider, der tilpasser sig ud fra den URL.

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

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

### Forespørgselsstrengparametre

Forespørgselsstrengparametre overføres til sider og andre slutpunkter som en hashtable-variabel kaldet `$Query`.

Hvis De f.eks. besøgte en side med følgende parameter for forespørgselsstrengen: `http://localhost:5000/dashboard/Page1?test=123`

De har adgang til denne værdi ved hjælp af følgende syntaks:

```powershell
$Query.test
$Query['test']
```

## Rollebaseret adgang

{% hint style="info" %}
Denne funktion kræver en [licens](/powershell-universal/da/licensing.md).
{% endhint %}

De kan forhindre brugere i at få adgang til sider ud fra deres rolle ved hjælp af parameteren `-Role` for sider. De kan konfigurere roller og rollepolitikker på [Sikkerhedssiden](/powershell-universal/da/sikkerhed/security.md#policy-assignment).

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

## Sidehoved

Følgende indstillinger er tilgængelige til tilpasning af headeren.

### Placering

Brug parameteren `-HeaderPosition` til at justere headerens funktionsmåde.

* absolute\fixed - Forbliver øverst på siden, selv når der rulles
* relative - Forbliver øverst på siden. Ikke synlig ved rulning.

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

### Farver

De kan justere headerens farver ved at angive parametrene `-HeaderColor` og `-HeaderBackgroundColor`. Disse farver tilsidesætter temafarverne.

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

## Navigation

De kan tilpasse navigationen på en side ved hjælp af parametrene `-Navigation` og `-NavigationLayout`. Navigation defineres ved hjælp af komponenten [List](/powershell-universal/da/apps/components/data-display/list.md#list). Navigationslayouts er enten permanente eller midlertidige.

### Brugerdefineret navigation

Brugerdefineret navigation kan defineres med en liste. Listeelementer kan indeholde underpunkter for at oprette rullemenuer i navigationen.

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

### Dynamisk navigation

Dynamisk navigation kan bruges til at køre scripts under indlæsning af siden for at afgøre, hvilke navigationskomponenter der skal vises, ud fra variabler som brugeren, IP-adressen eller roller.

De kan generere dynamisk navigation ved hjælp af parameteren `-LoadNavigation`. Værdien af parameteren skal være en scriptblok, der udføres, når navigationen indlæses.

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

### Rollebaseret adgang

De kan bruge dynamisk navigation til at oprette en navigationsmenu, der udnytter roller. Brug `Protect-UDSection` til at begrænse, hvem der har adgang til bestemte menupunkter. Sørg for, at De også medtager den samme rolle på siden.

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

Hvis De vil kontrollere roller i sider, kan De også bruge operatoren `-In` og variablen `$Roles`.

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

Det permanente layout opretter en statisk navigationsskuffe i venstre side af siden. Den kan ikke skjules af brugeren.

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

Det midlertidige layout opretter en navigationsskuffe, der kan åbnes ved hjælp af en hamburgermenu i øverste venstre hjørne. Dette er standardindstillingen.

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

### Vandret navigation

De kan bruge `New-UDAppBar` med en tom side til at oprette vandret navigation.

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

De kan vise et logo i navigationslinjen ved hjælp af parameteren `-Logo`.

Opsæt først en [publiceret mappe](/powershell-universal/da/platform/published-folders.md) for at hoste Deres logo.

Nu, når De opretter Deres side, kan De angive stien til logoet.

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

Logoet vises i øverste venstre hjørne.

For at tilpasse typografien for Deres logo kan De bruge et [kaskadetypografiark](/powershell-universal/da/apps/themes/cascading-style-sheets.md) og målrette element-id'et `ud-logo`.

## Overskriftsindhold

De kan definere brugerdefineret indhold, der skal medtages i headeren, ved hjælp af parameteren `-HeaderContent`.

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

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

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

## Dynamisk sidetitel

Sidetitler er statiske som standard, men De kan tilsidesætte denne funktionsmåde ved hjælp af `-LoadTitle`. Den kaldes, når siden indlæses. Det er nyttigt, når De definerer sider i flersprogede dashboards.

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

## Statiske sider

Statiske sider giver bedre ydeevne ved ikke at udføre PowerShell for at indlæse sidens indhold. Dette kan være nyttigt, når der vises data, der ikke kræver dynamisk PowerShell-udførelse. Sideindholdet opbygges, når dashboardet startes.

<pre class="language-powershell"><code class="lang-powershell"><strong>New-UDPage -Name 'Static Page' -Content {
</strong>    New-UDTypography (Get-Date)
} -Static
</code></pre>

Statiske sider har ikke adgang til brugerspecifikke data. Dette omfatter variabler som:

* $Headers
* $User
* $Roles

De kan stadig medtage dynamiske områder på sider. Disse dynamiske områder har adgang til brugerdata. Genindlæsning af eksemplet nedenfor opdaterer den dato og det klokkeslæt, der er angivet på siden.

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

## API

[New-UDPage](/powershell-universal/da/powershell-kommandoer/new-udpage.md)

#### Se også

* [Devolutions Academy – Oprettelse af Deres første program](https://academy.devolutions.net/student/page/3466027-creating-your-first-application?curriculum_activity_id=5771070\&path_id=3549598\&sid=ef268aed-28f2-437f-8576-03e7ab055007\&sid_i=0)


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.devolutions.net/powershell-universal/da/apps/components/pages.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
