Interacción

Universal Apps permite crear sitios web interactivos con PowerShell. Se han implementado varios cmdlets para proporcionar información al usuario, actualizar componentes y leer el estado de los componentes.

Portapapeles

Puede establecer datos de cadena en el portapapeles del usuario con Set-UDClipboard.

New-UDButton -Text 'Clipboard' -OnClick {
    Set-UDClipboard -Data 'Hello, there!'
}

API

• Set-UDClipboard

Descargas

Puede iniciar una descarga en el navegador del usuario utilizando Start-UDDownload. Debido a la seguridad de los navegadores web, el usuario deberá realizar una acción (como hacer clic en un botón) para permitir que se produzca la descarga. Start-UDDownload no es adecuado para descargas de ficheros grandes.

New-UDButton -Text 'Download' -OnClick {
    Start-UDDownload -StringData 'Hello, World!'
}

Controladores de eventos

Muchos componentes admiten controladores de eventos en forma de bloques de script. También puede que los vea denominados endpoints, ya que así se llamaban en Universal Dashboard v2. Estos controladores de eventos permiten invocar scripts de PowerShell cuando se producen determinadas acciones en la página.

Por ejemplo, puede tener un clic de botón que llame a un controlador de eventos. Este botón mostrará un toast al hacer clic. Puede incluir cualquier cmdlet de PowerShell válido dentro del código del controlador de eventos.

New-UDButton -Text 'Click Me' -OnClick {
   Show-UDToast 'Hello!'
}

Ámbito de las variables

Las variables se incluyen automáticamente en el ámbito de los controladores de eventos. Podrá acceder a las variables que defina fuera de la variable dentro del controlador de eventos.

$MyVariable = "Hello!"
New-UDButton -Text 'Click Me' -OnClick {
   Show-UDToast $MyVariable
}

Datos del evento

Algunos controladores de eventos proporcionarán datos como cadena o como tabla hash. Esto depende del controlador de eventos que esté utilizando. Por ejemplo, el controlador de eventos -OnClick de New-UDButton no proporciona ningún dato. Por otro lado, -OnChange de New-UDSelect sí proporcionará datos del evento.

Puede acceder a los datos del evento utilizando la variable $Body para acceder a los datos como cadena (a veces con formato JSON) o como tabla hash mediante la variable $EventData.

New-UDSelect -Option {
    New-UDSelectOption -Name 'One' -Value 1
    New-UDSelectOption -Name 'Two' -Value 2
    New-UDSelectOption -Name 'Three' -Value 3
} -OnChange { Show-UDToast -Message $EventData }

Formularios

Enviar un formulario

Puede forzar el envío de un formulario mediante el cmdlet Invoke-UDForm. Opcionalmente, puede optar por aplicar la validación incluyendo el parámetro -Validate.

New-UDForm -Id 'form' -Content {
   New-UDTextbox -Id 'Text' -Label 'Submit Me'
} -OnSubmit {
   Show-UDToast "Hello!"
}

New-UDButton -Text "Submit Form" -OnClick {
   Invoke-UDForm -Id 'form'
}

Validar un formulario

Puede forzar la validación de un formulario utilizando Test-UDForm.

New-UDForm -Id 'form' -Content {
   New-UDTextbox -Id 'Text' -Label 'Submit Me'
} -OnSubmit {
   Show-UDToast "Hello!"
} -OnValidate {
   New-UDValidationResult
}

New-UDButton -Text "Submit Form" -OnClick {
   Test-UDForm -Id 'form'
}

JavaScript

Puede invocar JavaScript desde PowerShell mediante el cmdlet Invoke-UDJavaScript.

New-UDButton -Text 'Alert Me' -OnClick {
    Invoke-UDJavaScript -JavaScript 'alert("Hello!")'
}

API

• Invoke-UDJavaScript

Toast

Mostrar un toast

Puede utilizar el cmdlet Show-UDToast para crear un mensaje toast que aparecerá en la página web del usuario final. Se produce a través de un websocket y mostrará el toast inmediatamente al ser llamado.

Show-UDToast -Message 'Hello, World!'

Mostrar un toast con un icono

Los toasts admiten iconos como cadenas. Puede utilizar todos los iconos de FontAwesome v5.

Show-UDToast -Icon "Ad" -Message "Test"

Ocultar un toast

Oculta un toast según el ID especificado.

Show-UDToast -Message 'Hello, World!' -Id 'Toast' -Duration 30000

New-UDButton -Text 'Click' -OnClick {
    Hide-UDToast -Id 'Toast'
}

API

• Show-UDToast
• Hide-UDToast

Redirigir

Puede redirigir a los usuarios a diferentes páginas mediante el cmdlet Invoke-UDRedirect. Se produce a través de un websocket y redirigirá en cuanto se llame al cmdlet.

Invoke-UDRedirect https://devolutions.net/powershell-universal/

Invoke-UDRedirect redirigirá automáticamente a las páginas del dashboard cuando se utilice una ruta relativa.

Invoke-UDRedirect '/page1' 

Si desea redirigir a una ruta local fuera del dashboard, puede utilizar el parámetro -Native.

Invoke-UDRedirect '/publishedFolder/test.txt' -Native

API

• Invoke-UDRedirect

Modal

Puede abrir un modal mediante el cmdlet Show-UDModal. Se abrirá en cuanto lo llame. Puede incluir los componentes que desee dentro del modal.

Más información sobre los modales aquí.

Gestión del estado de los componentes

Puede gestionar el estado de los componentes de forma dinámica mediante los comandos UDElement.

Obtener el estado de un componente

Puede obtener el estado de un elemento utilizando Get-UDElement. El estado se devolverá como una tabla hash. Esto resulta útil principalmente para los componentes de entrada.

$Value = (Get-UDElement -Id 'txtExample').value

Establecer el estado de un componente

Como alternativa, puede establecer el estado de un componente mediante Set-UDElement. Deberá especificar un ID y una tabla hash de propiedades que establecer en el componente. Todos los componentes integrados admiten Set-UDElement.

New-UDTextbox -Id 'textbox'

New-UDButton -Text 'Click' -OnClick {
    Set-UDElement -Id 'textbox' -Properties @{
        Value = 'My Value'
    }
}

Eliminar un componente

Puede eliminar componentes de la página mediante Remove-UDElement. El componente dejará de aparecer en la página.

Remove-UDComponent -Id 'txtExample'

Añadir un componente

Añada un componente secundario a un componente principal existente.

New-UDElement -Id 'myDiv' -Tag div

New-UDButton -Text 'Click' -OnClick {
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
}

Borrar un componente

Puede eliminar todos los componentes secundarios de un componente utilizando Clear-UDElement.

New-UDElement -Id 'myDiv' -Tag div

New-UDButton -Text 'Click' -OnClick {
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
    Add-UDElement -ParentId 'myDiv' -Content {
        New-UDTypography -Text 'Hi'
    }
}

New-UDButton -Text 'Clear' -OnClick {
    Clear-UDElement -Id 'myDiv'
}

Recargar un componente

Algunos componentes admiten la recarga. Puede activar la recarga de un componente mediante Sync-UDElement.

New-UDDynamic -Id 'reloadMe' -Content {
    Get-Date
}

New-UDButton -Text 'Reload' -OnClick {
    Sync-UDElement -Id 'reloadMe'
}

Seleccionar un componente

Puede seleccionar un componente con Select-UDElement.

New-UDElement -Id 'txt' -Tag input -Properties @{ type = text }

New-UDButton -Text 'Select' -OnClick {
    Select-UDElement -Id 'txt' -ScrollToElement
}

Integración con el host de PowerShell

Los dashboards se integran directamente con el host de PowerShell para ofrecer funciones basadas en cmdlets estándar.

Read-Host

Al utilizar el cmdlet Read-Host se mostrará un diálogo en el dashboard del usuario. El texto introducido será devuelto por el cmdlet.

$Text = Read-Host 'Enter Some Text'
Show-UDToast $Text

Get-Credential

Al utilizar Get-Credential se mostrará un diálogo que acepta un nombre de usuario y una contraseña. El cmdlet devolverá un objeto PSCredential.

Get-Credential -UserName "adam"

Write-Progress

Los cmdlets que utilizan el flujo de progreso o el uso del cmdlet Write-Progress harán que se muestre un diálogo de progreso. La ventana emergente mostrará la actividad, el porcentaje completado y la operación actual.

1..100 | ForEach-Object {
    Write-Progress -PercentComplete $_ -Activity 'Processing...' -CurrentOperation "User $_"
    Start-Sleep -Milliseconds 500
}

Puede desactivar la integración con Write-Progress estableciendo $ProgressPreference en SilentlyContinue.

$ProgressPreference = 'SilentlyContinue'

Prompt For Choice

Puede utilizar la función $Host.UI.PromptForChoice para mostrar un diálogo de selección múltiple.

$Title = "Welcome"
$Info = "Just to Demo Prompt for Choice"

$options = [System.Management.Automation.Host.ChoiceDescription[]] @("Power", "Shell", "Quit")
[int]$defaultchoice = 2
$opt = $host.UI.PromptForChoice($Title , $Info , $Options, $defaultchoice)
switch ($opt) {
    0 { Show-UDToast "Power" }
    1 { Show-UDToast "Shell" }
    2 { Show-UDToast "Good Bye!!!" }
}

Write-Host

Write-Host dentro de las aplicaciones escribirá en la pestaña Log de la Admin Console correspondiente a la aplicación. Si desea recibir estos mensajes de registro en la consola de su navegador en las Developer Tools, puede activar el registro en consola en appsettings.json.

{
    "UniversalDashboard": {
        "ConsoleLog": true
    }
}

API

• Get-UDElement
• Set-UDElement
• Clear-UDElement
• Remove-UDElement
• Sync-UDElement
• Select-UDElement

Véase también

• Devolutions Academy – Añadir la función de búsqueda de usuarios