Code Editor

Code editor component for Universal Dashboard.

To use a code editor within your dashboard, you will need to add the UniversalDashboard.CodeEditor component.

Learn more about adding custom component libraries

The code editor component allows you to host the Microsoft Monaco 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.

New-UDCodeEditor -Height '500' -Language 'powershell'

Populating Code

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

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!'

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.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'

New-UDButton -Text 'Get Code' -OnClick {
    Show-UDToast -Message (Get-UDElement -id 'editor').Code
}

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.

New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'

New-UDButton -Text 'Get Code' -OnClick {
    Set-UDElement -Id 'editor' -Properties @{
        code = "# Hello!"
    }
}

Options

The documentation is for an upcoming feature of PowerShell Universal .

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.

For a full list of options, check the IEditorConsturctionOptions interface.

New-UDCodeEditor -Language powershell -Height 100 -Options @{ fontSize = 10 }