> 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/it/app/components/pages.md).

# Pagine

Creare e configurare pagine nelle app PowerShell Universal, inclusi URL personalizzati, accesso basato sui ruoli, layout di navigazione e titoli dinamici.

Un'app può essere composta da una o più pagine. Una pagina può avere un nome e un URL specifici. È possibile definire un URL che accetta una o più variabili nell'URL per definire una pagina dinamica.

## Creazione di una nuova pagina

Nell'editor dell'app, faccia clic sul pulsante Create App Page.

Una volta creata, la pagina verrà elencata nella scheda delle pagine.

Per aggiornare il contenuto di una pagina, faccia clic sul pulsante Edit Code.

Ad esempio, potrebbe aggiungere un pulsante alla sua pagina.

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

Le pagine vengono aggiunte automaticamente alle app con il parametro `-AutoInclude`. È sufficiente chiamare New-UDApp nella radice del file PS1 della sua app.

```powershell
New-UDApp 
```

## Pagina di base

Una pagina di base può essere definita utilizzando il cmdlet `New-UDPage`. Potrebbe raggiungere questa pagina visitando l'URL `/app` della sua dashboard.

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

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

## App con più pagine

Le app possono avere più pagine e tali pagine possono essere definite passando un array di UDPages a `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
```

Potrebbe voler organizzare la sua app in più file PS1. È possibile farlo utilizzando le pagine.

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

## Pagina con un URL personalizzato

Una pagina può avere un URL personalizzato utilizzando il parametro `-Url`. Potrebbe raggiungere questa pagina visitando l'URL `/db` della sua app.

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

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

## Pagina con variabili nell'URL

È possibile definire una pagina con variabili nell'URL per creare pagine che si adattano in base a tale 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
```

### Parametri della stringa di query

I parametri della stringa di query vengono passati alle pagine e agli altri endpoint come variabile hashtable denominata `$Query`.

Ad esempio, se visitasse una pagina con il seguente parametro della stringa di query: `http://localhost:5000/dashboard/Page1?test=123`

Potrebbe accedere a questo valore utilizzando la sintassi seguente:

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

## Accesso basato sui ruoli

{% hint style="info" %}
Questa funzionalità richiede una [licenza](/powershell-universal/it/licensing.md).
{% endhint %}

È possibile impedire agli utenti di accedere alle pagine in base al loro ruolo utilizzando il parametro `-Role` delle pagine. È possibile configurare ruoli e criteri dei ruoli nella [pagina Security](/powershell-universal/it/sicurezza/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
```

## Intestazione

Per personalizzare l'intestazione sono disponibili le opzioni seguenti.

### Posizione

Utilizzi il parametro `-HeaderPosition` per modificare il comportamento dell'intestazione.

* absolute\fixed - Rimane in cima alla pagina, anche durante lo scorrimento
* relative - Rimane in cima alla pagina. Non è visibile durante lo scorrimento.

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

### Colori

È possibile modificare i colori dell'intestazione specificando i parametri `-HeaderColor` e `-HeaderBackgroundColor`. Questi colori sovrascrivono i colori del tema.

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

## Navigazione

È possibile personalizzare la navigazione di una pagina utilizzando i parametri `-Navigation` e `-NavigationLayout`. La navigazione viene definita utilizzando il componente [List](/powershell-universal/it/app/components/data-display/list.md#list). I layout di navigazione sono permanenti o temporanei.

### Navigazione personalizzata

La navigazione personalizzata può essere definita con un elenco. Gli elementi dell'elenco possono includere elementi figlio per creare sezioni a discesa nella navigazione.

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

### Navigazione dinamica

La navigazione dinamica può essere utilizzata per eseguire script durante il caricamento della pagina, in modo da determinare quali componenti di navigazione mostrare in base a variabili come l'utente, l'indirizzo IP o i ruoli.

È possibile generare una navigazione dinamica utilizzando il parametro `-LoadNavigation`. Il valore del parametro deve essere un blocco di script da eseguire durante il caricamento della navigazione.

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

### Accesso basato sui ruoli

È possibile utilizzare la navigazione dinamica per creare un menu di navigazione che sfrutta i ruoli. Utilizzi `Protect-UDSection` per limitare chi ha accesso a determinate voci di menu. Si assicuri di includere lo stesso ruolo anche nella pagina.

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

Se desidera verificare i ruoli all'interno delle pagine, può utilizzare anche l'operatore `-In` e la variabile `$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"
    }
} 
```

### Layout

Il layout permanente crea un cassetto di navigazione statico sul lato sinistro della pagina. Non può essere nascosto dall'utente.

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

Il layout temporaneo crea un cassetto di navigazione che può essere aperto utilizzando un menu hamburger situato nell'angolo superiore sinistro. Questa è l'impostazione predefinita.

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

### Navigazione orizzontale

È possibile utilizzare `New-UDAppBar` con una pagina vuota per creare una navigazione orizzontale.

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

È possibile visualizzare un logo nella barra di navigazione utilizzando il parametro `-Logo`.

Per prima cosa, configuri una [cartella pubblicata](/powershell-universal/it/piattaforma/published-folders.md) per ospitare il suo logo.

Ora, durante la creazione della pagina, può specificare il percorso del logo.

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

Il logo verrà visualizzato nell'angolo superiore sinistro.

Per personalizzare lo stile del suo logo, può utilizzare un [foglio di stile CSS](/powershell-universal/it/app/themes/cascading-style-sheets.md) e fare riferimento all'ID elemento `ud-logo`.

## Contenuto dell'intestazione

È possibile definire contenuti personalizzati da includere nell'intestazione utilizzando il parametro `-HeaderContent`.

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

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

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

## Titolo di pagina dinamico

I titoli delle pagine sono statici per impostazione predefinita, ma è possibile sovrascrivere questo comportamento utilizzando `-LoadTitle`. Verrà richiamato al caricamento della pagina. Ciò è utile quando si definiscono pagine in dashboard multilingue.

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

## Pagine statiche

Le pagine statiche consentono prestazioni migliori perché non eseguono PowerShell per caricare il contenuto della pagina. Ciò può essere utile quando si visualizzano dati che non richiedono l'esecuzione dinamica di PowerShell. Il contenuto della pagina viene costruito all'avvio della dashboard.

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

Le pagine statiche non hanno accesso ai dati specifici dell'utente. Questo include variabili come:

* $Headers
* $User
* $Roles

È comunque possibile includere aree dinamiche all'interno delle pagine. Queste aree dinamiche avranno accesso ai dati dell'utente. Ricaricando l'esempio seguente si aggiorneranno la data e l'ora indicate nella pagina.

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

## API

[New-UDPage](/powershell-universal/it/comandi-powershell/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/it/app/components/pages.md?ask=<question>&goal=<endgoal>
```

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