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.
Create an Element
You need to specify the -Tag
and -Content
when creating an element. The below example creates a div tag.
You can nest components within each other to create HTML structures. For example, you could create an unordered list with the following example.
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.
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.
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.
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.
Adding Child Elements
You can add child elements using Add-UDElement
. The following example adds child list items to an unordered list.
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.
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.
Removing an Element
You can remove an element by using Remove-UDElement
.
API
Get-UDElement
Get component state.
Set-UDElement
Set component state.
Remove-UDElement
Remove a component.
Add-UDElement
Add a child component.
Clear-UDElement
Clear child components out of a component.
Sync-UDElement
Reload a component
Select-UDElement
Select a component.
Last updated