> 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
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, clicchi sul pulsante Create App Page.
Pulsante Create App Page
Una volta creata, la pagina verrà elencata nella scheda delle pagine.
Scheda Pages
Per aggiornare il contenuto di una pagina, clicchi sul pulsante Edit Code.
Modifica della pagina dell'app
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`. Può navigare a 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. Può 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`. Può navigare a 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
Può 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 ad 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 seguente sintassi:
```powershell
$Query.test
$Query['test']
```
## Accesso basato sui ruoli
{% hint style="info" %}
Questa funzionalità richiede una [licenza](/powershell-universal/it/licensing.md).
{% endhint %}
Può impedire agli utenti di accedere alle pagine in base al loro ruolo utilizzando il parametro `-Role` delle pagine. Può configurare i ruoli e i 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
Sono disponibili le seguenti opzioni per personalizzare l'intestazione.
### Posizione
Utilizzi il parametro `-HeaderPosition` per regolare il comportamento dell'intestazione.
* absolute\fixed - Rimane nella parte superiore della pagina, anche durante lo scorrimento
* relative - Rimane nella parte superiore della pagina. Non è visibile durante lo scorrimento.
```powershell
New-UDPage -HeaderPosition fixed -Content {
New-UDElement -tag div -Attributes @{
style = @{
height = '150vh'
}
}
}
```
### Colori
Può regolare i colori dell'intestazione specificando i parametri `-HeaderColor` e `-HeaderBackgroundColor`. Questi colori sovrascriveranno i colori del tema.
```powershell
New-UDPage -Name 'Home' -Content {
} -HeaderColor 'black' -HeaderBackgroundColor 'white'
```
## Navigazione
Può 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 per determinare quali componenti di navigazione mostrare in base a variabili come l'utente, l'indirizzo IP o i ruoli.
Può 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
Può 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ò anche utilizzare 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 pannello 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 pannello di navigazione che può essere aperto utilizzando un menu hamburger situato nell'angolo in alto a sinistra. 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
Navigazione orizzontale
Può 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
Può visualizzare un logo nella barra di navigazione utilizzando il parametro `-Logo`.
Innanzitutto, 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 in alto a sinistra.
Per personalizzare lo stile del suo logo, può utilizzare un [foglio di stile a cascata](/powershell-universal/it/app/themes/cascading-style-sheets.md) e puntare all'ID elemento `ud-logo`.
## Contenuto dell'intestazione
Può 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 dinamico della pagina
I titoli delle pagine sono statici per impostazione predefinita, ma può sovrascrivere questo comportamento utilizzando `-LoadTitle`. Verrà chiamato al caricamento della pagina. Questo è 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 evitando l'esecuzione di PowerShell per caricare il contenuto della pagina. Questo 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.
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 elencate 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=&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.