Code Editor
Code editor component for Universal Apps.
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 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 }
API
Last updated
Was this helpful?