Interazione

Le Universal Apps consentono di creare siti web interattivi con PowerShell. Sono stati implementati diversi cmdlet per fornire feedback all'utente, aggiornare i componenti e leggere lo stato dei componenti.

Appunti

È possibile inserire dati stringa negli appunti dell'utente con Set-UDClipboard.

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

API

• Set-UDClipboard

Download

È possibile avviare un download nel browser dell'utente utilizzando Start-UDDownload. A causa della sicurezza dei browser web, l'utente dovrà eseguire un'azione (come fare clic su un pulsante) per consentire l'esecuzione del download. Start-UDDownload non è adatto al download di file di grandi dimensioni.

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

Gestori di eventi

Molti componenti supportano gestori di eventi sotto forma di blocchi di script. Potrebbe vederli indicati anche come endpoint, poiché era così che venivano chiamati in Universal Dashboard v2. Questi gestori di eventi consentono di richiamare script PowerShell quando si verificano determinate azioni nella pagina.

Ad esempio, potrebbe avere un clic su un pulsante che richiama un gestore di eventi. Questo pulsante mostrerà un toast quando viene cliccato. È possibile includere qualsiasi cmdlet PowerShell valido nel codice del gestore di eventi.

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

Ambito delle variabili

Le variabili vengono automaticamente incluse nell'ambito dei gestori di eventi. Sarà in grado di accedere alle variabili definite all'esterno della variabile all'interno del gestore di eventi.

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

Dati dell'evento

Alcuni gestori di eventi forniscono dati come stringa o come hashtable. Ciò dipende dal gestore di eventi utilizzato. Ad esempio, il gestore di eventi -OnClick di New-UDButton non fornisce alcun dato. Al contrario, -OnChange di New-UDSelect fornirà dati dell'evento.

È possibile accedere ai dati dell'evento utilizzando la variabile $Body per ottenere i dati come stringa (a volte formattata come JSON) oppure come hashtable utilizzando la variabile $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 }

Moduli

Inviare un modulo

È possibile forzare l'invio di un modulo utilizzando il cmdlet Invoke-UDForm. Facoltativamente, può scegliere di applicare la convalida includendo il parametro -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'
}

Convalidare un modulo

È possibile forzare la convalida di un modulo utilizzando 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

È possibile richiamare JavaScript da PowerShell utilizzando il cmdlet Invoke-UDJavaScript.

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

API

• Invoke-UDJavaScript

Toast

Mostrare un toast

È possibile utilizzare il cmdlet Show-UDToast per creare un messaggio toast che apparirà nella pagina web dell'utente finale. Avviene tramite un websocket e mostrerà il toast immediatamente non appena viene richiamato.

Show-UDToast -Message 'Hello, World!'

Mostrare un toast con un'icona

I toast supportano le icone come stringhe. È possibile utilizzare tutte le icone FontAwesome v5.

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

Nascondere un toast

Nasconde un toast in base all'ID specificato.

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

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

API

• Show-UDToast
• Hide-UDToast

Reindirizzamento

È possibile reindirizzare gli utenti a pagine diverse utilizzando il cmdlet Invoke-UDRedirect. Avviene tramite un websocket e reindirizzerà non appena il cmdlet viene richiamato.

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

Invoke-UDRedirect reindirizzerà automaticamente alle pagine della dashboard quando si utilizza un percorso relativo.

Invoke-UDRedirect '/page1' 

Se desidera reindirizzare a un percorso locale esterno alla dashboard, può utilizzare il parametro -Native.

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

API

• Invoke-UDRedirect

Modale

È possibile aprire una finestra modale utilizzando il cmdlet Show-UDModal. Si aprirà non appena lo richiama. È possibile includere qualsiasi componente desideri all'interno della finestra modale.

Maggiori informazioni sulle finestre modali qui.

Gestione dello stato dei componenti

È possibile gestire dinamicamente lo stato dei componenti utilizzando i comandi UDElement.

Ottenere lo stato di un componente

È possibile ottenere lo stato di un elemento utilizzando Get-UDElement. Lo stato verrà restituito come hashtable. Questo è utile principalmente per i componenti di input.

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

Impostare lo stato di un componente

In alternativa, è possibile impostare lo stato di un componente utilizzando Set-UDElement. Dovrà specificare un ID e una hashtable di proprietà da impostare sul componente. Tutti i componenti integrati supportano Set-UDElement.

New-UDTextbox -Id 'textbox'

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

Rimuovere un componente

È possibile rimuovere componenti dalla pagina utilizzando Remove-UDElement. Il componente non apparirà più nella pagina.

Remove-UDComponent -Id 'txtExample'

Aggiungere un componente

Aggiunge un componente figlio a un componente padre esistente.

New-UDElement -Id 'myDiv' -Tag div

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

Svuotare un componente

È possibile rimuovere tutti i componenti figlio da un componente utilizzando 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'
}

Ricaricare un componente

Alcuni componenti supportano il ricaricamento. È possibile attivare il ricaricamento di un componente utilizzando Sync-UDElement.

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

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

Selezionare un componente

È possibile selezionare un componente con Select-UDElement.

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

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

Integrazione con l'host PowerShell

Le dashboard si integrano direttamente con l'host PowerShell per fornire funzionalità basate su cmdlet standard.

Read-Host

L'utilizzo del cmdlet Read-Host farà apparire una finestra di dialogo nella dashboard dell'utente. Il testo inserito verrà restituito dal cmdlet.

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

Get-Credential

L'utilizzo di Get-Credential farà apparire una finestra di dialogo che accetta un nome utente e una password. Il cmdlet restituirà un oggetto PSCredential.

Get-Credential -UserName "adam"

Write-Progress

I cmdlet che utilizzano il flusso di avanzamento o l'uso del cmdlet Write-Progress faranno apparire una finestra di dialogo di avanzamento. Il popup mostrerà l'attività, la percentuale completata e l'operazione corrente.

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

È possibile disabilitare l'integrazione con Write-Progress impostando $ProgressPreference su SilentlyContinue.

$ProgressPreference = 'SilentlyContinue'

Prompt For Choice

È possibile utilizzare la funzione $Host.UI.PromptForChoice per visualizzare una finestra di dialogo a selezione multipla.

$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 all'interno delle app scriverà nella scheda Log della Admin Console per l'app. Se desidera ricevere questi messaggi di log nella console del browser negli Strumenti per sviluppatori, può abilitare la registrazione della console in appsettings.json.

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

API

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

Vedere anche

• Devolutions Academy – Adding the search users function