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.

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.

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.

$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

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

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

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

$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:

$Query.test
$Query['test']

Accesso basato sui ruoli

Questa funzionalità richiede una licenza.

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.

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

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.

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

$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 personalizzata

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.

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

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

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.

$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

Pannello di navigazione permanente

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.

$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

Pannello di navigazione temporaneo

Navigazione orizzontale

Navigazione orizzontale

Può utilizzare New-UDAppBar con una pagina vuota per creare una navigazione orizzontale.

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 per ospitare il suo logo.

Cartella degli asset pubblicati

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

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

Il logo verrà visualizzato nell'angolo in alto a sinistra.

Logo

Per personalizzare lo stile del suo logo, può utilizzare un foglio di stile a cascata e puntare all'ID elemento ud-logo.

Contenuto dell'intestazione

Può definire contenuti personalizzati da includere nell'intestazione utilizzando il parametro -HeaderContent.

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

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

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

Pulsante nell'intestazione

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.

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.

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

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.

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

API

New-UDPage