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.
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.
1
New-UDCodeEditor -Height '500' -Language 'powershell'
Copied!

Populating Code

Use the -Code parameter to specify code that will be populated within the code editor when it loads.
1
New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!'
Copied!

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.
1
New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'
2
3
New-UDButton -Text 'Get Code' -OnClick {
4
Show-UDToast -Message (Get-UDElement -id 'editor').Code
5
}
Copied!

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.
1
New-UDCodeEditor -Height '500' -Language 'powershell' -Code '#Hello, world!' -Id 'editor'
2
3
New-UDButton -Text 'Get Code' -OnClick {
4
Set-UDElement -Id 'editor' -Properties @{
5
code = "# Hello!"
6
}
7
}
Copied!

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.
1
New-UDCodeEditor -Language powershell -Height 100 -Options @{ fontSize = 10 }
Copied!
Last modified 4mo ago