Element

The New-UDElement cmdlet allows you to create custom React elements within your dashboard. Similar to New-UDHtml, you can define HTML elements using New-UDElement. Unlike, New-UDHtml, you can update elements, set auto refresh and take advantage of the React component system.
Create an Element
You need to specify the -Tag and -Content when creating an element. The below example creates a div tag.
1
New-UDElement -Tag 'div' -Content { 'Hello' }
Copied!
You can nest components within each other to create HTML structures. For example, you could create an unordered list with the following example.
1
New-UDElement -Tag 'ul' -Content {
2
    New-UDElement -Tag 'li' -Content { 'First' }
3
    New-UDElement -Tag 'li' -Content { 'Second' }
4
    New-UDElement -Tag 'li' -Content { 'Third' }
5
}
Copied!
Setting Attributes
You can select attributes of an element (like HTML attributes) by using the -Attributes parameter. This parameter accepts a hashtable of attribute name and values. The below example creates red text.
1
New-UDElement -Tag 'div' -Content { 'Hello' } -Attributes @{
2
    style = @{
3
        color = 'red'
4
    }
5
}
Copied!
Auto Refreshing Elements
You can define the -AutoRefresh, -RefreshInterval and -Endpoint parameters to create an element the refreshes on a certain interval. The below example creates an element that refreshes every second and displays the current time.
1
New-UDElement -Tag 'div' -Endpoint {
2
    Get-Date
3
} -AutoRefresh -RefreshInterval 1
Copied!
Setting Element Properties Dynamically
You can use the Set-UDElement cmdlet to set element properties and content dynamically. The following example sets the content of the element to the current time.
1
New-UDElement -Tag 'div' -Id 'myElement' -Content { }
2
​
3
New-UDButton -Text 'Click Me' -OnClick {
4
    Set-UDElement -Id 'myElement' -Content { Get-Date }
5
}
Copied!
You can also set attributes by using the -Properties parameter of Set-UDElement. The following example sets the current time and changes the color to red.
1
    New-UDElement -Tag 'div' -Id 'myElement' -Content { }
2
​
3
    New-UDButton -Text 'Click Me' -OnClick {
4
        Set-UDElement -Id 'myElement' -Content { Get-Date } -Properties @{ Attributes = @{ style = @{ color = "red" } } }
5
    }
Copied!
Adding Child Elements
You can add child elements using Add-UDElement. The following example adds child list items to an unordered list.
1
New-UDElement -Tag 'ul' -Content {
2
​
3
} -Id 'myList'
4
​
5
New-UDButton -Text 'Click Me' -OnClick {
6
    Add-UDElement -ParentId 'myList' -Content {
7
        New-UDElement -Tag 'li' -Content { Get-Date }
8
    }
9
}
Copied!
Clearing Child Elements
You can clear the child elements of an element by using Clear-UDElement. The following example clears all the list items from an unordered list.
1
New-UDElement -Tag 'ul' -Content {
2
    New-UDElement -Tag 'li' -Content { 'First' }
3
    New-UDElement -Tag 'li' -Content { 'Second' }
4
    New-UDElement -Tag 'li' -Content { 'Third' }
5
}  -Id 'myList'
6
​
7
New-UDButton -Text 'Click Me' -OnClick {
8
    Clear-UDElement -Id 'myList'
9
}
Copied!
Forcing an Element to Reload
You can force an element to reload using Sync-UDElement. The following example causes the div to reload with the current date.
1
New-UDElement -Tag 'div' -Endpoint {
2
    Get-Date
3
} -Id 'myDiv'
4
​
5
New-UDButton -Text 'Click Me' -OnClick {
6
    Sync-UDElement -Id 'myDiv'
7
}
Copied!
Removing an Element
You can remove an element by using Remove-UDElement.
1
New-UDElement -Tag 'div' -Endpoint {
2
    Get-Date
3
} -Id 'myDiv'
4
​
5
New-UDButton -Text 'Click Me' -OnClick {
6
    Remove-UDElement -Id 'myDiv'
7
}
Copied!
API
Get-UDElement
Get component state.
Name
Type
Description
Required
Id
string
The ID of the component to receive. 
true
Set-UDElement
Set component state.
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
Remove-UDElement
Remove a component.
Name
Type
Description
Required
Id
string
The ID of the component to remove.
true
Add-UDElement
Add a child component.
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-UDElement
Clear child components out of a component.
Name
Type
Description
Required
Id
string
The ID of the component to clear.
true
Sync-UDElement
Reload a component
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-UDElement
Select a component.
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

Dynamic Regions

Error Boundary

Last modified 4mo ago

Copy link

Contents

Create an Element

Setting Attributes

Auto Refreshing Elements

Setting Element Properties Dynamically

Adding Child Elements

Clearing Child Elements

Forcing an Element to Reload

Removing an Element

API