Páginas

Una aplicación puede constar de una o varias páginas. Una página puede tener un nombre y una URL concretos. Puede definir una URL que acepte una o varias variables en la URL para definir una página dinámica.

Creación de una nueva página

En el editor de aplicaciones, haga clic en el botón Create App Page.

Botón Create App Page

Una vez creada la página, aparecerá en la pestaña de páginas.

Pestaña Páginas

Para actualizar el contenido de una página, haga clic en el botón Edit Code.

Editar página de aplicación

Por ejemplo, podría añadir un botón a su página.

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

Las páginas se añaden automáticamente a las aplicaciones con el parámetro -AutoInclude. Simplemente llame a New-UDApp en la raíz del fichero PS1 de su aplicación.

New-UDApp 

Página básica

Una página básica se puede definir mediante el cmdlet New-UDPage. Podría navegar a esta página visitando la URL /app de su dashboard.

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

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

Aplicación con varias páginas

Las aplicaciones pueden tener varias páginas, y esas páginas se pueden definir pasando una matriz de 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

Puede que desee organizar su aplicación en varios ficheros PS1. Puede hacerlo mediante páginas.

$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

Página con una URL personalizada

Una página puede tener una URL personalizada mediante el parámetro -Url. Podría navegar a esta página visitando la URL /db de su aplicación.

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

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

Página con variables en la URL

Puede definir una página con variables en la URL para crear páginas que se adapten en función de esa URL.

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

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

Parámetros de cadena de consulta

Los parámetros de cadena de consulta se pasan a las páginas y otros extremos como una variable de tabla hash llamada $Query.

Por ejemplo, si visitara una página con el siguiente parámetro de cadena de consulta: http://localhost:5000/dashboard/Page1?test=123

Tendría acceso a este valor mediante la siguiente sintaxis:

$Query.test
$Query['test']

Acceso basado en roles

Esta función requiere una licencia.

Puede impedir que los usuarios accedan a las páginas en función de su rol mediante el parámetro -Role de las páginas. Puede configurar los roles y las políticas de roles en la página Seguridad.

$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

Encabezado

Las siguientes opciones están disponibles para personalizar el encabezado.

Posición

Utilice el parámetro -HeaderPosition para ajustar el comportamiento del encabezado.

• absolute\fixed: permanece en la parte superior de la página, incluso al desplazarse
• relative: permanece en la parte superior de la página. No es visible al desplazarse.

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

Colores

Puede ajustar los colores del encabezado especificando los parámetros -HeaderColor y -HeaderBackgroundColor. Estos colores anularán los colores del tema.

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

Navegación

Puede personalizar la navegación de una página mediante los parámetros -Navigation y -NavigationLayout. La navegación se define mediante el componente Lista. Los diseños de navegación son permanentes o temporales.

Navegación personalizada

La navegación personalizada se puede definir con una lista. Los elementos de la lista pueden incluir elementos secundarios para crear secciones desplegables en la navegación.

$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

Navegación personalizada

Navegación dinámica

La navegación dinámica se puede utilizar para ejecutar scripts durante la carga de la página con el fin de determinar qué componentes de navegación mostrar en función de variables como el usuario, la dirección IP o los roles.

Puede generar navegación dinámica mediante el parámetro -LoadNavigation. El valor del parámetro debe ser un bloque de script que se ejecute al cargar la navegación.

$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

Acceso basado en roles

Puede utilizar la navegación dinámica para crear un menú de navegación que aproveche los roles. Utilice Protect-UDSection para limitar quién tiene acceso a determinados elementos de menú. Asegúrese de incluir también el mismo rol en la página.

$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

Si desea comprobar los roles dentro de las páginas, también puede utilizar el operador -In y la variable $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"
    }
} 

Diseños

El diseño permanente crea un cajón de navegación estático en el lado izquierdo de la página. El usuario no puede ocultarlo.

$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

Cajón de navegación permanente

El diseño temporal crea un cajón de navegación que se puede abrir mediante un menú de hamburguesa situado en la esquina superior izquierda. Esta es la configuración predeterminada.

$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

Cajón de navegación temporal

Navegación horizontal

Navegación horizontal

Puede utilizar New-UDAppBar con una página en blanco para crear navegación horizontal.

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
) 

Logotipo

Puede mostrar un logotipo en la barra de navegación mediante el parámetro -Logo.

En primer lugar, configure una carpeta publicada para alojar su logotipo.

Carpeta de activos publicados

Ahora, al crear su página, puede especificar la ruta al logotipo.

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

El logotipo se mostrará en la esquina superior izquierda.

Logo

Para personalizar el estilo de su logotipo, puede utilizar una hoja de estilos en cascada y apuntar al ID de elemento ud-logo.

Contenido del encabezado

Puede definir contenido personalizado para incluirlo en el encabezado mediante el parámetro -HeaderContent.

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

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

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

Botón en el encabezado

Título de página dinámico

Los títulos de página son estáticos de forma predeterminada, pero puede anular este comportamiento mediante -LoadTitle. Se llamará cuando se cargue la página. Esto resulta útil al definir páginas en dashboards multilingües.

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

Páginas estáticas

Las páginas estáticas permiten un mejor rendimiento al no ejecutar PowerShell para cargar el contenido de la página. Esto puede resultar útil al mostrar datos que no requieren la ejecución dinámica de PowerShell. El contenido de la página se construye cuando se inicia el dashboard.

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

Las páginas estáticas no tienen acceso a los datos específicos del usuario. Esto incluye variables como:

• $Headers
• $User
• $Roles

Aún puede incluir regiones dinámicas dentro de las páginas. Estas regiones dinámicas tendrán acceso a los datos del usuario. Al recargar el ejemplo siguiente se actualizarán la fecha y la hora indicadas en la página.

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

API

New-UDPage