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

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

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

New-UDDatePicker

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.

Autocomplete with a static list of options

New-UDAutocomplete -Options @('Test', 'Test2', 'Test3', 'Test4')

Autocomplete with a dynamic list of options

New-UDAutocomplete -OnLoadOptions { 
    @('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -match $Body } | ConvertTo-Json
}

Autocomplete with an OnChange script block

New-UDAutocomplete -OnLoadOptions { 
    @('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -match $Body } | ConvertTo-Json
} -OnChange {
    Show-UDToast $Body 
}

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

New-UDRadioGroup -Label "Day" -Content {
    New-UDRadio -Label Monday -Value 'monday'
    New-UDRadio -Label Tuesday -Value 'tuesday'
    New-UDRadio -Label Wednesday -Value 'wednesday'
    New-UDRadio -Label Thursday -Value 'thursday'
    New-UDRadio -Label Friday  -Value 'friday'
    New-UDRadio -Label Saturday -Value 'saturday'
    New-UDRadio -Label Sunday -Value 'sunday'
}

OnChange

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

New-UDRadioGroup -Label "Day" -Content {
    New-UDRadio -Label Monday -Value 'monday'
    New-UDRadio -Label Tuesday -Value 'tuesday'
    New-UDRadio -Label Wednesday -Value 'wednesday'
    New-UDRadio -Label Thursday -Value 'thursday'
    New-UDRadio -Label Friday  -Value 'friday'
    New-UDRadio -Label Saturday -Value 'saturday'
    New-UDRadio -Label Sunday -Value 'sunday'
} -OnChange { Show-UDToast -Message $Body }
    }

Default Value

Set the default value of the radio group.

New-UDRadioGroup -Label "Day" -Content {
    New-UDRadio -Label Monday -Value 'monday'
    New-UDRadio -Label Tuesday -Value 'tuesday'
    New-UDRadio -Label Wednesday -Value 'wednesday'
    New-UDRadio -Label Thursday -Value 'thursday'
    New-UDRadio -Label Friday  -Value 'friday'
    New-UDRadio -Label Saturday -Value 'saturday'
    New-UDRadio -Label Sunday -Value 'sunday'
} -Value 'sunday'

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.

New-UDRadioGroup -Label "Day" -Content {
    New-UDRow -Columns {
        New-UDColumn -LargeSize 1 -Content {
            New-UDRadio -Label Monday -Value 'monday'        
        }
        New-UDColumn -LargeSize 1 -Content {
            New-UDRadio -Label Sunday -Value 'sunday'
        }
    }
}

New-UDRadio

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.

New-UDCheckbox

A textbox lets users enter and edit text.

Textbox

Password Textbox

A password textbox will mask the input.

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.

Interaction

Retrieving a textbox value

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

Setting the textbox value

Icons

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

Mask

You can define a text mask with a combination of strings and regular expressions. To specify a regular expression, use the JavaScript syntax in your string to start and finish the expression: /\d/.

This example creates a mask for US based phone numbers.

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.

Grouped Select

Create a select with groups of selections.

OnChange

Execute a PowerShell event handler when the value of the select is changed.

Get-UDElement

Retrieve the value of the select from another component.

New-UDSelect

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.

New-UDForm

New-UDFormValidationResult

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

Time Picker

New-UDTimePicker

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

Slider with minimum and maximum values

Disabled Slider

Slider with custom step size

Slider with marks

Range based slider

OnChange event for slider

New-UDSlider

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.

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.

New-UDUpload

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
}

New-UDSwitch

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

New-UDFloatingActionButton