The editor component is based on Editor.js. It's a block editor that accepts text, links, lists, code and images.

When working with the editor, you can receive data about the current document via the OnChange parameter. By default, data is returned in the Editor.js JSON format.

Creating an Editor

To create a basic editor, use the New-UDEditor cmdlet.

New-UDEditor

The editor will be available and you can add new blocks by clicking the plus button.

Working with Data

If you define a script block for the -OnChange event handler. The $EventData variable will contain the current status of the editor. By default, this returns the Editor.JS JSON block format.

New-UDEditor -OnChange {
    Show-UDToast $EventData
}

You can also use the HTML render plugin by specifying the -Format parameter.

New-UDEditor -OnChange {
    Show-UDToast $EventData
} -Format 'html'

To specify the default data for the editor, use the -Data parameter. You need to specify the JSON block format.

New-UDEditor -Data $Data

Image Support

In order to support images, you will need to provide a published folder in which to upload the images. Once a published folder is defined, images can be uploaded directly in the editor. They will be placed within the directory and then served through the request path.

New-UDEditor -PublishedFolder 'MyImages'

API

New-UDEditor

Buttons allow users to take actions, and make choices, with a single tap.

Contained Button

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

 New-UDButton -Variant 'contained' -Text 'Default'

Outlined Button

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

New-UDButton -Variant 'outlined' -Text 'Default'

Control Button Size

You can control the pixel size of a button based on pixel size by using the Style parameter

New-UDButton -Id "Submit" -Text "Submit" -Style @{ Width = "150px"; Height = "100px" }

Buttons with icons and label

Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.

New-UDButton -Icon (New-UDIcon -Icon trash) -Text 'Delete'

Buttons with event handlers

You can specify a script block to execute when the button is clicked

New-UDButton -Text 'Message Box' -OnClick {
    Show-UDToast -Message 'Hello, world!'
}

Loading Button

Loading buttons will display a loading icon while an event handler is running. This is useful for longer running events.

New-UDButton -Text 'Message Box' -OnClick {
    Show-UDToast -Message 'Hello, world!'
    Start-Sleep 10
} -ShowLoading

API

• New-UDButton

Date pickers pickers provide a simple way to select a single value from a pre-determined set.

Date pickers can be used in and .

OnChange Event Handler

The OnChange event handler is called when the date changes. You can access the current date by using the $Body variable.

Variant

You can customize how the date picker is shown. The default is the inline variant that displays the date picker popup inline with the input control. You can also use the dialog variant that pops the date picker up in the middle of the screen. Finally, the static variant displays the date picker without having to click anything.

Locale

To set the locate of the date picker, specify the -Locale parameter.

Minimum and Maximum

By default, the user can select any date. To specify minimum and maximum dates, using the -Minimum and -Maximum parameters.

API

The code editor component allows you to host the editor within your dashboards.

Creating a Code Editor

You can create a new code editor with the New-UDCodeEditor cmdlet. Specifying the -Language parameter will enable syntax highlighting for that language. You will need to specify a height in pixels.

Populating Code

Use the -Code parameter to specify code that will be populated within the code editor when it loads.

Retrieving code from another component

You can retrieve code from another component using the Get-UDElement cmdlet and accessing the code property of the hashtable that is returned.

Setting code from another component

You can set code from another component using the Set-UDElement cmdlet. Specify the code value in a hashtable passed to the -Properties parameter.

Options

The Monaco editor supports a wide range of options. If you wish to use options that aren't available on the New-UDCodeEditor cmdlet, you can use the -Options parameter and pass a hashtable of options instead.

The autocomplete is a normal text input enhanced by a panel of suggested options.

Static List of Options

Creates a basic autocomplete with a static list of options

Dynamic List of Options

When text is typed, it can be filtered with OnLoadOptions. $Body will contain the current text that is typed.

This example filters the array with Where-Object.

OnChange

$Body contains the currently selected item. The OnChange event will fire when the user selects one or more items.

Icon

You can place an icon before an autocomplete by using the -Icon parameter.

OnEnter

OnEnter is triggered when the user presses the enter key within the autocomplete.

Options

You can use New-UDAutoCompleteOption to specify name and values.

API

Checkboxes allow the user to select one or more items from a set.

Checkboxes

Checkboxes can be disabled and checked by default

Checkboxes with custom icon

Create checkboxes that use any icon and style.

Checkboxes with onChange script block

Create checkboxes that fire script blocks when changed.

Checkbox with custom label placement

You can adjust where the label for the checkbox is placed.

Get the value of a Checkbox

You can use Get-UDElement to get the value of the checkbox. Get-UDElement will also return other properties of the checkbox component.

The following example shows a toast message with the value of the checkbox.

API

Radio buttons allow the user to select one option from a set.

Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.

Radio buttons should have the most commonly used option selected by default.

Simple Radio

OnChange

An event handler that is called when the radio group is changed. the $Body variable will contain the current value.

Default Value

Set the default value of the radio group.

Custom Formatting

You can use custom formatting within the radio group. The below example will place the radio buttons next to each other instead of on top of each other.

API

Forms provide a way to collect data from users.

Forms can include any type of control you want. This allows you to customize the look and feel and use any input controls.

Data entered via the input controls will be sent back to the the OnSubmit script block when the form is submitted. Within the OnSubmit event handler, you will access to the $EventData variable that will contain properties for each of the fields in the form.

For example, if you have two fields, you will have two properties on $EventData.

Supported Controls

The following input controls automatically integrate with a form. The values that are set within these controls will be sent during validation and in the OnSubmit event handler.

Simple Form

Simple forms can use inputs like text boxes and checkboxes.

Formatting a Form

Since forms can use any component, you can use standard formatting components within the form.

Returning Components

When a form is submitted, you can optionally return another component to replace the form on the page. You can return any Universal Dashboard component. All you need to do is ensure that the component is written to the pipeline within the OnSubmit event handler.

Validating a Form

Form validation can be accomplished by using the OnValidate script block parameter.

Canceling a Form

You can define an -OnCancel event handler to invoke when the cancel button is pressed. This can be used to take actions like close a modal.

Displaying output without Replacing the form

Although you can return components directly from a form, you may want to retain the form so users can input data again. To do so, you can use Set-UDElement and a placeholder element that you can set the content to.

In this example, we have an empty form that, when submitted, will update the results element with a UDCard.

Schema Forms

Fields

You define fields that accept string, number, integer, enum and boolean types. This changes the type of input shown.

Required Properties

You can use the required property to set a list of required properties.

Ordering

You can use the schemaUI property to modify the ordering of the fields.

Arrays

You can create forms that accept 0 to many objects. The user will be able to add and remove objects to the form.

Script Forms

You can automatically generate forms based on scripts in your PowerShell Universal environment. Script forms will generate input components based on the param block. Script forms automatically support progress and feedback.

Script forms also support displaying the output as text or a table.

API

Basic Rating

OnChange

Take action when the rating is changed.

Maximum

Change the maximum rating.

Precision

Change the precision for ratings.

Size

Change the size of the rating icons.

The UDUpload component is used to upload files to Universal Dashboard. You can process files the user uploads. You will receive the data for the file, a file name and the type of file if it can be determined by the web browser.

This component works with and .

Uploading a File

Uploads a file and shows the contents via a toast.

The body of the OnUpload script block is a JSON string with the following format.

The $EventData is an object with the following structure.

Uploading a File with a Form

Uploads a file as part of a UDForm.

The body of the OnSubmit script block is the same one you will see with any form and the file will be contains as one of the fields within the form.

Example: Uploading a file and save to it the temp directory

This example allows a user to upload a file. Once the file is uploaded, it will be saved to the temporary directory.

API

Switches toggle the state of a single setting on or off.

Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.

Switch

Create a basic switch.

New-UDSwitch -Checked $true 
New-UDSwitch -Checked $true -Disabled

OnChange Event

Respond to when a switch value is changed. The $EventData variable will include whether or not the switch was checked or unchecked.

New-UDSwitch -OnChange { Show-UDToast -Message $EventData }

Get-UDElement Support

You can retrieve the value of the switch within another component by using Get-UDElement. Use the Checked property to determine whether the switch is checked out not.

New-UDSwitch -Id 'switch' 
New-UDButton -Text 'Click' -OnClick {
    Show-UDToast -Message (Get-UDElement -Id 'switch').checked
}

API

• New-UDSwitch

A textbox lets users enter and edit text.

Textbox

New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
New-UDTextbox -Label 'Disabled' -Placeholder 'Textbox' -Disabled
New-UDTextbox -Label 'Textbox' -Value 'With value'

Password Textbox

A password textbox will mask the input.

New-UDTextbox -Label 'Password' -Type password

Multiline

You can create a multiline textbox by using the -Multiline parameter. Pressing enter will add a new line. You can define the number of rows and the max number of rows using -Rows and -RowsMax.

New-UDTextbox -Multiline -Rows 4 -RowsMax 10

Interaction

Retrieving a textbox value

You can use Get-UDElement to get the value of a textbox

New-UDTextbox -Id 'txtExample' 
New-UDButton -OnClick {
    $Value = (Get-UDElement -Id 'txtExample').value 
    Show-UDToast -Message $Value
} -Text "Get textbox value"

Setting the textbox value

New-UDTextbox -Id 'txtExample' -Label 'Label' -Value 'Value'

New-UDButton -OnClick {

    Set-UDElement -Id 'txtExample' -Properties @{
        Value = "test123"
    }

} -Text "Get textbox value"

Icons

You can set the icon of a textbox by using the -Icon parameter and the New-UDIcon cmdlet.

New-UDTextbox -Id "ServerGroups" -Icon (New-UDIcon -Icon 'server') -Value "This is my server"

Mask

The textbox mask is accomplished using react-imask. You can specify RegEx and pattern matching.

• Pattern Mask

• RegEx Mask

This example creates a mask for US based phone numbers.

New-UDTextbox -Mask "+1 (000) 000-0000"

Unmasking

The default behavior of -Mask is to return the masked value in forms and Get-UDElement. You can return the unmasked value by specifying the -Unmask parameter.

New-UDTextbox -Mask "+1 (000) 000-0000" -Unmask

OnEnter

The -OnEnter event handler is executed when the user presses enter in the text field. It is useful for performing other actions, like clicking a button, on enter.

New-UDTextbox -OnEnter {
    Invoke-UDEndpoint -Id 'submit' -Session
}

New-UDButton -Id 'submit' -OnClick {
    Show-UDToast -Message 'From Textbox'
}

OnBlur

The -OnBlur event handler is executed when the textbox loses focus.

New-UDTextbox -OnBlur {
    Show-UDToast "Blurred"
}

OnValidate

Use the -OnValidate event handler to validate input typed in the textbox.

New-UDTextbox -OnValidate {
    if ($EventData.Length -lt 10)
    {
        New-UDValidationResult -ValidationError 'String needs to be longer than 10'
    }
}

API

New-UDTextbox

Select components are used for collecting user provided information from a list of options.

Simple Select

Create a simple select with multiple options.

New-UDSelect -Option {
    New-UDSelectOption -Name 'One' -Value 1
    New-UDSelectOption -Name 'Two' -Value 2
    New-UDSelectOption -Name 'Three' -Value 3
}

Grouped Select

Create a select with groups of selections.

New-UDSelect -Option {
    New-UDSelectGroup -Name 'Group One' -Option {
        New-UDSelectOption -Name 'One' -Value 1
        New-UDSelectOption -Name 'Two' -Value 2
        New-UDSelectOption -Name 'Three' -Value 3
    }
    New-UDSelectGroup -Name 'Group Two' -Option {
        New-UDSelectOption -Name 'Four' -Value 4
        New-UDSelectOption -Name 'Five' -Value 5
        New-UDSelectOption -Name 'Size' -Value 6
    }
}

OnChange

Execute a PowerShell event handler when the value of the select is changed. $EventData[0] for the single item that was selected.

New-UDSelect -Option {
    New-UDSelectOption -Name 'One' -Value 1
    New-UDSelectOption -Name 'Two' -Value 2
    New-UDSelectOption -Name 'Three' -Value 3
} -OnChange { Show-UDToast -Message $EventData[0] }

Multiple Select

Execute a PowerShell event handler when the more than one value of the select is changed. $EventData is an array of the selected items.

New-UDSelect -Multiple -Option {
    New-UDSelectOption -Name 'One' -Value 1
    New-UDSelectOption -Name 'Two' -Value 2
    New-UDSelectOption -Name 'Three' -Value 3
} -OnChange { 
    Show-UDToast -Message (ConvertTo-json -InputObject $EventData) 
}

Get-UDElement

Retrieve the value of the select from another component.

  New-UDSelect -Option {
      New-UDSelectOption -Name 'One' -Value 1
      New-UDSelectOption -Name 'Two' -Value 2
      New-UDSelectOption -Name 'Three' -Value 3
  } -Id 'select' -DefaultValue 2

  New-UDButton  -Text 'OnBoard' -OnClick {
    $Element = Get-UDElement -Id 'select'
    if ($Element.Value)
    {
      Show-UDToast -Message $Element.Value
    }
    else 
    {
      Show-UDToast -Message $Element.DefaultValue
    }
  }

API

• New-UDSelect

• New-UDSelectOption

• New-UDSelectGroup

Simple Transfer List

Create a simple transfer list.

New-UDTransferList -Item {
    New-UDTransferListItem -Name 'test1' -Value 1
    New-UDTransferListItem -Name 'test2' -Value 2
    New-UDTransferListItem -Name 'test3' -Value 3
    New-UDTransferListItem -Name 'test4' -Value 4
    New-UDTransferListItem -Name 'test5' -Value 5
} 

Transfer List Value on Change

Use the OnChange event handler to get the value of the selected items.

New-UDTransferList -Item {
    New-UDTransferListItem -Name 'test1' -Value 1
    New-UDTransferListItem -Name 'test2' -Value 2
    New-UDTransferListItem -Name 'test3' -Value 3
    New-UDTransferListItem -Name 'test4' -Value 4
    New-UDTransferListItem -Name 'test5' -Value 5
} -OnChange {
    Show-UDToast ($EventData | ConvertTo-Json)
}

Transfer List in a Form

Transfer lists can be used within forms and steppers.

New-UDForm -Content {
    New-UDTransferList -Item {
        New-UDTransferListItem -Name 'test1' -Value 1
        New-UDTransferListItem -Name 'test2' -Value 2
        New-UDTransferListItem -Name 'test3' -Value 3
        New-UDTransferListItem -Name 'test4' -Value 4
        New-UDTransferListItem -Name 'test5' -Value 5
    }
} -OnSubmit {
    Show-UDToast ($EventData | ConvertTo-Json)
}

API

• New-UDTransferList

• New-UDTransferListItem

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Slider

New-UDSlider -Value 1

Slider with minimum and maximum values

New-UDSlider -Min 10 -Max 1000

Disabled Slider

New-UDSlider -Disabled

Slider with custom step size

New-UDSlider -Min 10 -Max 1000 -Step 100

Slider with marks

New-UDSlider -Marks

Range based slider

New-UDSlider -Value @(1, 10)

OnChange event for slider

New-UDSlider -OnChange {
    Show-UDToast -Message $Body 
    Set-TestData $Body
}

API

• New-UDSlider

Time pickers pickers provide a simple way to select a single value from a pre-determined set.

Time Picker

New-UDTimePicker

Locale

Specify the locale of the time picker.

New-UDTimePicker -Locale fr

24-Hour Time

You can use the -DisableAmPm parameter to use 24-hour time.

New-UDTimePicker -DisableAmPm

API

New-UDTimePicker

A floating action button (FAB) performs the primary, or most common, action on a screen.

A floating action button appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular, and extended.

Only use a FAB if it is the most suitable way to present a screen’s primary action.

Only one floating action button is recommended per screen to represent the most common action.

Floating Action Button

New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Small
New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Medium
New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -Size Large

OnClick

New-UDFloatingActionButton -Icon (New-UDIcon -Icon user) -OnClick {
    Show-UDToast -Message "Hello!"
}

API

• New-UDFloatingActionButton