🥳
PowerShell Universal
Ironman SoftwareForums
v3
v3
  • About
  • What's New in v3?
  • Get Started
  • Additional Resources
  • Installation
    • Docker
    • Upgrading
    • Uninstall
  • Licensing
  • System Requirements
  • Supported Browsers
  • Cmdlet Help
  • Modules
  • API
    • About
    • Endpoints
    • Security
    • Error Handling
    • Rate Limiting
  • Automation
    • About Automation
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • System Events
    • Terminals
    • Triggers
    • Queues
  • User Interfaces
    • About
    • Dashboards
      • Dashboards
      • Examples
      • Components
        • Pages
        • Dynamic Regions
        • Element
        • Error Boundary
        • HTML
        • Custom Components
          • Building Custom JavaScript Components
        • Data Display
          • Alert
          • Badge
          • Chip
          • Data Grid
          • Date and Time
          • Icon
          • List
          • Markdown
          • Table
          • Timeline
          • Tooltip
          • Tree View
          • Typography
        • Data Visualization
          • Charts
          • Image
          • Map
        • Feedback
          • Backdrop
          • Modal
          • Progress
          • Skeleton
        • Inputs
          • Autocomplete
          • Button
          • Checkbox
          • Code Editor
          • Date Picker
          • Editor
          • Floating Action Button
          • Form
          • Radio
          • Rating
          • Select
          • Slider
          • Switch
          • Textbox
          • Time Picker
          • Transfer List
          • Upload
        • Navigation
          • Drawer
          • Link
          • Menu
          • Stepper
          • Tabs
        • Layout
          • Grid Layout
          • Grid
          • Hidden
          • Stack
        • Utilities
          • Protect Section
          • Transitions
        • Surfaces
          • AppBar
          • Card
          • Paper
          • Expansion Panel
      • Interaction
      • Marketplace
      • Role Based Access
      • Scheduled Endpoints
      • Sessions
      • Themes
        • Cascading Style Sheets
        • Styles
      • Custom Variable Scopes
      • Migrating From Universal Dashboard 2.9
    • Pages
      • Alerts
      • Bar Chart
      • Button
      • Card
      • Form
      • iFrame
      • Image
      • Line Chart
      • Liquid Chart
      • Paragraph
      • Statistic
      • Table
      • Variables
  • Desktop
    • About Desktop Mode
    • File Associations
    • Hotkeys
    • Pages
    • Protocol Handlers
  • Platform
    • Cache
    • Modules
    • Monitoring
    • Notifications
    • Published Folders
    • Templates
    • Translations
    • User Sessions
    • Variables
  • Configuration
    • About
    • API
    • Command Line Options
    • Environments
    • Feature Flags
    • Git
    • Hosting
      • Azure
      • High Availability
      • IIS
    • Login Page
    • Management API
    • Persistence
    • App Settings
    • Security
      • Best Practices
      • Access Controls
      • App Tokens
      • Client Certificate
      • OpenID Connect
      • PowerShell Protect
      • SAML2
      • WS-Federation
    • Repository
    • Running as a Service Account
    • Best Practices
  • Development
    • Debugging Scripts
    • Editor
    • Hangfire
    • Logging
    • Profiling
    • Visual Studio Code Extension
  • Changelog
  • Extension Changelog
  • Legacy Universal Dashboard Docs
Powered by GitBook

Copyright 2025 Ironman Software

On this page
  • 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
Edit on GitHub
Export as PDF
  1. User Interfaces
  2. Dashboards
  3. Components

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.

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

You can wrap any component with New-UDElement and add an event handler.

New-UDElement -Tag div -Content {
    New-UDIcon -Icon "user"
} -Attributes @{
    onClick = {
        Show-UDToast "Nice!"
    }
}

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


PreviousDynamic RegionsNextError Boundary

Last updated 2 years ago

****

****

Get-UDElement
Set-UDElement
Remove-UDElement
Add-UDElement
Clear-UDElement
Sync-UDElement
Select-UDElement