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.

Clipboard

You can set string data into the user's clipboard with Set-UDClipboard.

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

API

Set-UDClipboard

Name

Type

Description

Required

Data

string

The content to set to the clipboard

true

ToastOnSuccess

Switch

Shows a toast if the data was successfully set in the clipboard

false

ToastOnError

Switch

Shows as toast if the data was unsuccessfully set in the clipboard

false

JavaScript

You can invoke JavaScript from PowerShell by using the Invoke-UDJavaScript cmdlet.

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

API

Invoke-UDJavaScript

Name

Type

Description

Required

JavaScript

string

The JavaScript to invoke.

true

Toast

Show a toast

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!'

Hide a toast

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'
}

API

Show-UDToast

Name

Type

Description

Required

Message

string

The message to display

true

MessageColor

DashboardColor

The color of the message to display

false

MessageSize

string

The size of the message to display

false

Duration

int

The number of milliseconds to display the message. Defaults to 1000

false

Title

string

A title to display above the message.

false

TitleColor

DashboardColor

The color of the title.

false

TitleSize

string

The size of the title.

false

Id

string

The ID of this toast.

false

BackgroundColor

DashboardColor

The background color of the toast.

false

Theme

string

Light or dark theme.

false

Position

string

The position of the toast.

false

HideCloseButton

Switch

Hide the close button to prevent the user from hiding the toast.

false

CloseOnClick

Switch

Close the toast when it is clicked.

false

CloseOnEscape

Switch

Close the toast when escape is pressed.

false

ReplaceToast

Switch

Replace an existing toast if one is already shown. Otherwise, show both.

false

Balloon

Switch

Balloon style toast.

false

Overlay

Switch

Display an overlay behind the toast

false

OverlayClose

Switch

Allow the user to close the overlay

false

OverlayColor

DashboardColor

The color of the overlay.

false

TransitionIn

string

The transition to use when the toast is appearing.

false

TransitionOut

string

The transition to use when the toast is disappearing.

false

Broadcast

Switch

Show the toast to all users.

false

Hide-UDToast

Name

Type

Description

Required

Id

string

The ID of the toast to hide.

true

Redirect

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

API

Invoke-UDRedirect

Name

Type

Description

Required

Url

string

The URL to redirect the user to.

true

OpenInNewWindow

Switch

Open the URL in a new window or tab.

false

Modal

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.

Read more about Modals here.

Managing Component State

You can manage component state dynamically by using the UDElement commands.

Getting Component State

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

API

Get-UDElement

Name

Type

Description

Required

Id

string

The ID of the component to receive.

true

Setting Component State

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'
}
}

API

Set-UDElement

Name

Type

Description

Required

Id

string

The ID of the component to set.

true

Properties

Hashtable

Properties to set on the component

false

Broadcast

Switch

Set the properties of a component for all users.

false

Content

ScriptBlock

The content of the component to set.

false

Removing a Component

You can remove components from the page using Remove-UDElement . The component will no longer appear on the page.

Remove-UDComponent -Id 'txtExample'

API

Remove-UDElement

Name

Type

Description

Required

Id

string

The ID of the component to remove.

true

Adding a component

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'
}
}

API

Add-UDElement

Name

Type

Description

Required

ParentId

string

The ID of the component to add a child to.

true

Content

ScriptBlock

The child content to add.

true

Broadcast

Switch

Whether to add the child component to all users.

false

Clear a component

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'
}

API

Clear-UDElement

Name

Type

Description

Required

Id

string

The ID of the component to clear.

true

Reloading a Component

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'
}

API

Sync-UDElement

Name

Type

Description

Required

Id

string

The ID of the component to reload.

true

Broadcast

Switch

Whether to reload the component for all users.

false

Select a component

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
}

API

Select-UDElement

Name

Type

Description

Required

Id

string

The ID of the element to select

true

ScrollToElement

Switch

Whether to scroll the user's window to the element

false