Interaction
Interaction features of Universal Dashboard
Universal Dashboard enables the ability to create interactive websites with PowerShell. There are several cmdlets that have been implemented to provide feedback to the user, update components and read the state of components.
You can set string data into the user's clipboard with
Set-UDClipboard.New-UDButton -Text 'Clipboard' -OnClick {
Set-UDClipboard -Data 'Hello, there!'
}
PowerShell Universal 2.6 or later.
You can start a download within the user's browser by using
Start-UDDownload. Due to security of web browsers, the user will need to take an action (like click a button) to allow the download to take place. Start-UDDownload is not suited for large file downloads.New-UDButton -Text 'Download' -OnClick {
Start-UDDownload -StringData 'Hello, World!'
}
Many components support event handlers in the form of script blocks. You may also see these referred to as endpoints as that is what they were called in Universal Dashboard v2. These event handlers allow you to invoke PowerShell scripts when certain actions take place on the page.
For example, you may have a button click that calls an event handler. This button will show a toast when clicked. You can include any valid PowerShell cmdlet within the event handler code.
New-UDButton -Text 'Click Me' -OnClick {
Show-UDToast 'Hello!'
}
Variables are automatically scoped into event handlers. You will be able to access variables that you define outside of the variable within the event handler.
$MyVariable = "Hello!"
New-UDButton -Text 'Click Me' -OnClick {
Show-UDToast $MyVariable
}
Some event handlers handlers will provide data as a string or as a hashtable. This depends on the event handler you are using. For example, the
New-UDButton -OnClick event handler does not provide any data. On the other hand, the New-UDSelect -OnChange will provider event data. You can access the event data by using the
$Body variable to access the data as a string (sometimes formatted as JSON) or as a hashtable by using the $EventData variable. 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 }
PowerShell Universal 2.6 or later.
You can force a form to submit using the
Invoke-UDForm cmdlet. You can optionally chose to enforce validation by including the -Validate parameter.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'
}
You can force a form to validate by using
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'
}
You can invoke JavaScript from PowerShell by using the
Invoke-UDJavaScript cmdlet.New-UDButton -Text 'Alert Me' -OnClick {
Invoke-UDJavaScript -JavaScript 'alert("Hello!")'
}
You can use the
Show-UDToast cmdlet to create a toast message that will appear on the end user's webpage. It happens over a websocket and will show the toast immediately as it is called.Show-UDToast -Message 'Hello, World!'
Toasts support icons as strings. You can use all the FontAwesome v5 icons.
Show-UDToast -Icon "Ad" -Message "Test"
Hides a toast based on the specified ID.
Show-UDToast -Message 'Hello, World!' -Id 'Toast' -Duration 30000
New-UDButton -Text 'Click' -OnClick {
Hide-UDToast -Id 'Toast'
}
You can redirect users to different pages using the
Invoke-UDRedirect cmdlet. It happens over a websocket and will redirect as soon as the cmdlet is called.Invoke-UDRedirect http://www.ironmansoftware.com
You can open a modal using the
Show-UDModal cmdlet. It will open as soon as you call it. You can include whatever components you like within the modal.You can manage component state dynamically by using the UDElement commands.
You can receive the state of an element using
Get-UDElement . The state will be returned as a hashtable. This is primarily useful for input components.$Value = (Get-UDElement -Id 'txtExample').value
Alternatively, you can set component state using
Set-UDElement . You will need to specify an ID and a hashtable of properties to set on the component. All built in components support Set-UDElement.New-UDTextbox -Id 'textbox'
New-UDButton -Text 'Click' -OnClick {
Set-UDElement -Id 'textbox' -Properties @{
Value = 'My Value'
}
}
You can remove components from the page using
Remove-UDElement . The component will no longer appear on the page.Remove-UDComponent -Id 'txtExample'
Add a child component to an existing parent component.
New-UDElement -Id 'myDiv' -Tag div
New-UDButton -Text 'Click' -OnClick {
Add-UDElement -ParentId 'myDiv' -Content {
New-UDTypography -Text 'Hi'
}
}
You can remove all the children components from an component by using
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'
}
Some components support reloading. You can trigger a reload of a component using
Sync-UDElement.New-UDDynamic -Id 'reloadMe' -Content {
Get-Date
}
New-UDButton -Text 'Reload' -OnClick {
Sync-UDElement -Id 'reloadMe'
}
You can select a component with
Select-UDElement.New-UDElement -Id 'txt' -Tag input -Properties @{ type = text }
New-UDButton -Text 'Select' -OnClick {
Select-UDElement -Id 'txt' -ScrollToElement
}
Last modified 1yr ago