1 of 9

Data Display

Chip

Chip component for Universal Dashboard.

Chips are compact elements that represent an input, attribute, or action.

Chips allow users to enter information, make selections, filter content, or trigger actions.

While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context.

Basic Chips

Chips with Icons

OnClick

Shows a toast when the chip is clicked.

OnDelete

New-UDChip

Date and Time

Date and time component for Universal Dashboard.

The New-UDDateTime component is used for formatting dates and times within the client's browser. By using the client's browser, you can format the time based on the local time zone and locale settings for the user.

The date and time component uses DayJS. For a full list of custom formatting options, visit the .

Basic Formatting

By default, the date and time will be formatted using the LLL localized formatting template.

Resulting output: August 16, 2018 8:02 PM

Custom Formatting

You can specify custom formatting strings using the .

Resulting output: 25/01/2019

API

New-UDDateTime

Icon

Icon component for Universal Dashboard

FontAwesome icons to include in your dashboard.

Icon

Create icons by specifying their names. You can use the icon reference below to find icons.

New-UDIcon -Icon 'address_book'

Size

Set the size of the icon. Valid values are: xs, sm, lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x

    New-UDIcon -Icon 'address_book' -Size 'sm'
    New-UDIcon -Icon 'address_book' -Size 'lg'
    New-UDIcon -Icon 'address_book' -Size '5x'
    New-UDIcon -Icon 'address_book' -Size '10x'

Rotation

Rotate icons. The value represents the degrees of rotation.

New-UDIcon -Icon 'address_book' -Size '5x' -Rotation 90

Border

Add a border to your icon.

New-UDIcon -Icon 'address_book' -Size '5x' -Border

Style

Apply CSS styles to your icon.

New-UDIcon -Icon 'address_book' -Size '5x' -Style @{
    backgroundColor = "red"
}

Visually Search for Icons

New-UDTextbox -Id 'txtIconSearch' -Label 'Search' 
New-UDButton -Text 'Search' -OnClick {
    Sync-UDElement -Id 'icons'
}

New-UDElement -tag 'p' -Content {}

New-UDDynamic -Id 'icons' -Content {
        $Icons = [Enum]::GetNames([UniversalDashboard.Models.FontAwesomeIcons])
        $IconSearch = (Get-UDElement -Id 'txtIconSearch').value
        if ($null -ne $IconSearch -and $IconSearch -ne '')
        {
        $Icons = $Icons.where({ $_ -match $IconSearch})
    }

    foreach($icon in $icons) {
        New-UDIcon -Icon $icon -Size lg
    }
}

Parameters

New-UDIcon

Name

Type

Description

Required

string

Id of the icon

false

Icon

FontAwesomeIcons

Icon to select

false

FixedWidth

switch

false

Inverse

switch

Whether to inverse the icon

false

Rotation

int

Rotates an icon clockwise based on the degrees specified

false

ClassName

string

false

Transform

string

false

Flip

string

false

Pull

string

false

ListItem

switch

false

Spin

switch

Caues the icon to spin.

false

Border

switch

Adds a border to the icon.

false

Pulse

switch

false

Size

string

The size of the icon

false

Style

hashtable

A CSS style to apply to the icon.

false

Title

string

false

Regular

switch

false

Color

List

List component for Universal Dashboard.

Lists are continuous, vertical indexes of text or images.

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

List

OnClick Event Handler

You can define an action to take when an item is clicked by using the -OnClick parameter of New-UDListItem.

API

New-UDList

New-UDListItem

Table

Table component for Universal Dashboard

Tables display sets of data. They can be fully customized.

Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.

Simple Table

A simple example with no frills. Table columns are defined from the data.

Table with Custom Columns

Define custom columns for your table.

Table with Custom Column Rendering

Define column rendering. Sorting and exporting still work for the table.

Table Column Width

Column width can be defined using the -Width parameter. You can also decide to truncate columns that extend past that width.

Filters

You can configure custom filters per column. The table supports text, select, fuzzy , slider, range, date , number, and autocomplete filters.

Table with server-side processing

Process data on the server so you can perform paging, filtering, sorting and searching in systems like SQL.

Paging

By default, paging is disable and tables will grow based on how many rows of data you provide. You can enable paging by using the -ShowPagination cmdlet (alias -Paging). You can configure the page size using the -PageSize cmdlet.

Disable Page Size All

By default, the page size selector provides an option to show all rows. If you want to prevent users from doing this, use the -DisablePageSizeAll cmdlet.

Sorting

To enable sorting for a table, use the -ShowSort parameter. When you enable sorting, you will be able to click the table headers to sort the table by clicking the headers. By default, multi-sort is enabled. To multi-hold shift and click a column header.

You can control which columns can be sorted by using New-UDTableColumn and -ShowSort parameter.

Disable Sort Remove

This documentation is for a feature that will be available in a future version of PowerShell Universal.

By default, the sorting of a table has 3 states. Unsorted, ascending and descending. If you would like to disable the unsorted state, use the -DisableSortRemove parameter of New-UDTable.

Selection

Tables support selection of rows. You can create an event handler for the OnRowSelected parameter to receive when a new row is selected or unselected or you can use Get-UDElement to retrieve the current set of selected rows.

The following example creates a table with row selection enabled. A toast is show when clicking the row or when clicking the GET Rows button.

The $EventData variable for the -OnRowSelected event will include all the columns as properties and a selected property as to whether the row was selected or unselected.

For example, the service table data would look like this.

Exporting

Tables support exporting the data within the table. You can export as CSV, XLSX, JSON or PDF. You can define which columns to include in an export and choose to export just the current page or all the data within the table.

Server-Side Exporting

You can control the export functionality with a PowerShell script block. This is useful when exporting from server-side sources like SQL server tables.

In this example, I have a SQL table that contains podcasts. When exporting, you will receive information about the current state of the table to allow you to customize what data is exported.

Customizing Export Options

You can decide which export options to present to your users using the -ExportOption cmdlet. The following example would only show the CSV export option.

Customizing Labels

You can use the -TextOption parameter along with the New-UDTableTextOption cmdlet to set text fields within the table.

Refresh with a button

You can externally refresh a table by putting the table within a dynamic region and using Sync-UDElement.

This example creates a button to refresh the table.

API

New-UDTable

Creates a new table.

New-UDTableColumn

Defines column properties for a table.

Out-UDTableData

Returns data from the -LoadData parameter of New-UDTable.

New-UDTableTextOption

Allows for custom text in the table controls.

Tree View

Tree view component for Universal Dashboard.

New-UDTreeView allows you to create a tree of items and, optionally, dynamically expand the list when clicked.

Basic Tree View

Create a basic tree view by using the New-UDTreeNode cmdlet.

New-UDTreeView -Node {
    New-UDTreeNode -Name 'Level 1' -Children {
        New-UDTreeNode -Name 'Level 2 - Item 1' 
        New-UDTreeNode -Name 'Level 2 - Item 2'
        New-UDTreeNode -Name 'Level 2 - Item 3' -Children {
            New-UDTreeNode -Name 'Level 3'
        }
    }
}

Dynamic Tree View

Dynamic tree views allow you to run PowerShell whenever a node is clicked. You can then return a list of nodes that should be rendered underneath the clicked node. You can also take other actions such as opening a modal or showing a toast.

New-UDTreeView -Node { New-UDTreeNode -Name root } -OnNodeClicked {
    New-UDTreeNode -name "$($EventData.Name)child"
}

Typography

Typography component for Universal Dashboard

Use typography to present your design and content as clearly and efficiently as possible.

Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

All Typography Types

@("h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", 
"caption", "button", "overline", "srOnly", "inherit", 
"display4", "display3", "display2", "display1", "headline", "title", "subheading") | ForEach-Object {
    New-UDTypography -Variant $_ -Text $_ -GutterBottom
    New-UDElement -Tag 'p' -Content {}
}

Colored Text

You can use the -Style parameter to define colors for your text.

New-UDTypography -Text 'My Text' -Style @{ color = 'blue' }

New-UDTypography

Name

Type

Description

Required

String

The ID of the component. It defaults to a random GUID.

false

Variant

String

The type of text to display.

false

Text

String

The text to format.

false

Content

ScriptBlock

The content to format.

false

Style

Hashtable

A set of CSS styles to apply to the typography.

false

ClassName

String

A CSS className to apply to the typography.

false

Align

String

How to align the typography.

false

GutterBottom

SwitchParameter

The gutter bottom.

false

NoWrap

SwitchParameter

Disables text wrapping.

false

Paragraph

SwitchParameter

Whether this typography is a paragraph.

false

Icon

Icon component for Universal Dashboard

FontAwesome icons to include in your dashboard.

Icon

Create icons by specifying their names. You can use the icon reference below to find icons.

New-UDIcon -Icon 'address_book'

Size

Set the size of the icon. Valid values are: xs, sm, lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x

    New-UDIcon -Icon 'address_book' -Size 'sm'
    New-UDIcon -Icon 'address_book' -Size 'lg'
    New-UDIcon -Icon 'address_book' -Size '5x'
    New-UDIcon -Icon 'address_book' -Size '10x'

Rotation

Rotate icons. The value represents the degrees of rotation.

New-UDIcon -Icon 'address_book' -Size '5x' -Rotation 90

Border

Add a border to your icon.

New-UDIcon -Icon 'address_book' -Size '5x' -Border

Style

Apply CSS styles to your icon.

New-UDIcon -Icon 'address_book' -Size '5x' -Style @{
    backgroundColor = "red"
}

Visually Search for Icons

New-UDTextbox -Id 'txtIconSearch' -Label 'Search' 
New-UDButton -Text 'Search' -OnClick {
    Sync-UDElement -Id 'icons'
}

New-UDElement -tag 'p' -Content {}

New-UDDynamic -Id 'icons' -Content {
        $Icons = [Enum]::GetNames([UniversalDashboard.Models.FontAwesomeIcons])
        $IconSearch = (Get-UDElement -Id 'txtIconSearch').value
        if ($null -ne $IconSearch -and $IconSearch -ne '')
        {
        $Icons = $Icons.where({ $_ -match $IconSearch})
    }

    foreach($icon in $icons) {
        New-UDIcon -Icon $icon -Size lg
    }
}

Parameters

New-UDIcon

Name

Type

Description

Required

string

Id of the icon

false

Icon

FontAwesomeIcons

Icon to select

false

FixedWidth

switch

false

Inverse

switch

Whether to inverse the icon

false

Rotation

int

Rotates an icon clockwise based on the degrees specified

false

ClassName

string

false

Transform

string

false

Flip

string

false

Pull

string

false

ListItem

switch

false

Spin

switch

Caues the icon to spin.

false

Border

switch

Adds a border to the icon.

false

Pulse

switch

false

Size

string

The size of the icon

false

Style

hashtable

A CSS style to apply to the icon.

false

Title

string

false

Regular

switch

false

Color

Table

Table component for Universal Dashboard

Tables display sets of data. They can be fully customized.

Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.

Simple Table

A simple example with no frills. Table columns are defined from the data.

Table with Custom Columns

Define custom columns for your table.

Table with Custom Column Rendering

Define column rendering. Sorting and exporting still work for the table.

Table Column Width

Column width can be defined using the -Width parameter. You can also decide to truncate columns that extend past that width.

Filters

You can configure custom filters per column. The table supports text, select, fuzzy , slider, range, date , number, and autocomplete filters.

Table with server-side processing

For a full example of server-side processing, .

Process data on the server so you can perform paging, filtering, sorting and searching in systems like SQL.

Paging

Disable Page Size All

By default, the page size selector provides an option to show all rows. If you want to prevent users from doing this, use the -DisablePageSizeAll cmdlet.

Sorting

You can control which columns can be sorted by using New-UDTableColumn and -ShowSort parameter.

Disable Sort Remove

This documentation is for a feature that will be available in a future version of PowerShell Universal.

By default, the sorting of a table has 3 states. Unsorted, ascending and descending. If you would like to disable the unsorted state, use the -DisableSortRemove parameter of New-UDTable.

Selection

The following example creates a table with row selection enabled. A toast is show when clicking the row or when clicking the GET Rows button.

The $EventData variable for the -OnRowSelected event will include all the columns as properties and a selected property as to whether the row was selected or unselected.

For example, the service table data would look like this.

Exporting

Server-Side Exporting

You can control the export functionality with a PowerShell script block. This is useful when exporting from server-side sources like SQL server tables.

In this example, I have a SQL table that contains podcasts. When exporting, you will receive information about the current state of the table to allow you to customize what data is exported.

Customizing Export Options

You can decide which export options to present to your users using the -ExportOption cmdlet. The following example would only show the CSV export option.