# 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.

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

## 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.

```
New-UDElement -Tag 'div' -Content { 'Hello' } -Attributes @{
    style = @{
        color = 'red'
    }
}
```

## 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.

```
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -AutoRefresh -RefreshInterval 1
```

## 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.

```
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" } } }
    }
```

## Adding Child Elements

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

## 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.

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

## 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.

```
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -Id 'myDiv'

New-UDButton -Text 'Click Me' -OnClick {
    Sync-UDElement -Id 'myDiv'
}
```

## Removing an Element

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

## 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    |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.powershelluniversal.com/v1/dashboard/components/element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.