Element
Information about UDElements.
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.You need to specify the
-Tag
and -Content
when creating an element. The below example creates a div tag.New-UDElement -Tag 'div' -Content { 'Hello' }
You can nest components within each other to create HTML structures. For example, you could create an unordered list with the following example.
New-UDElement -Tag 'ul' -Content {
New-UDElement -Tag 'li' -Content { 'First' }
New-UDElement -Tag 'li' -Content { 'Second' }
New-UDElement -Tag 'li' -Content { 'Third' }
}
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.New-UDElement -Tag 'div' -Content { 'Hello' } -Attributes @{
style = @{
color = 'red'
}
}
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.New-UDElement -Tag 'div' -Endpoint {
Get-Date
} -AutoRefresh -RefreshInterval 1
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.New-UDElement -Tag 'div' -Id 'myElement' -Content { }
New-UDButton -Text 'Click Me' -OnClick {
Set-UDElement -Id 'myElement' -Content { Get-Date }
}
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. New-UDElement -Tag 'div' -Id 'myElement' -Content { }
New-UDButton -Text 'Click Me' -OnClick {
Set-UDElement -Id 'myElement' -Content { Get-Date } -Properties @{ Attributes = @{ style = @{ color = "red" } } }
}
You can add child elements using
Add-UDElement
. The following example adds child list items to an unordered list.New-UDElement -Tag 'ul' -Content {
} -Id 'myList'
New-UDButton -Text 'Click Me' -OnClick {
Add-UDElement -ParentId 'myList' -Content {
New-UDElement -Tag 'li' -Content { Get-Date }
}
}
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.New-UDElement -Tag 'ul' -Content {
New-UDElement -Tag 'li' -Content { 'First' }
New-UDElement -Tag 'li' -Content { 'Second' }
New-UDElement -Tag 'li' -Content { 'Third' }
} -Id 'myList'
New-UDButton -Text 'Click Me' -OnClick {
Clear-UDElement -Id 'myList'
}
You can force an element to reload using
Sync-UDElement
. The following example causes the div to reload with the current date.New-UDElement -Tag 'div' -Endpoint {
Get-Date
} -Id 'myDiv'
New-UDButton -Text 'Click Me' -OnClick {
Sync-UDElement -Id 'myDiv'
}
You can remove an element by using
Remove-UDElement
.New-UDElement -Tag 'div' -Endpoint {
Get-Date
} -Id 'myDiv'
New-UDButton -Text 'Click Me' -OnClick {
Remove-UDElement -Id 'myDiv'
}
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 |
Last modified 2yr ago