Code Editor
This component is an interactive text box that allows you to edit and test code. It can be used to let users validate JSON or work with code in languages such as Ruby, HTML, Markdown, and more.
Code-Editor Properties
Component Properties
Code Editor Property | Description |
---|---|
Content | |
Label | Sets a label text for the code editor |
Language | Select from HJSON (human readable), JSON (strict), Ruby HTML Template (ERB), HTML, or Markdown |
Default value | Values to be shown in the code editor component by default |
Appearance | |
Label style | Changes the style (font, size, color, etc.) of the code editor's label text. Configure styles in the Typography settings |
Line wrapping | Whether code editor should scroll or wrap for long lines, values are a boolean |
Line numbers | Whether code editor should number each line |
Loading animation | Whether code editor should show loading animation when a dependent API is running, values are a boolean |
Layout | |
Width | Controls the width of the component |
Height | Controls the height of the component |
Visible | Controls the visibility of the component, values are a boolean |
Collapse when invisible | Controls what happens when the component is invisible. When true , other components shift to fill its space; when false , it leaves a blank space. This has no effect in edit mode. |
Interaction | |
Newline Character | Determines the newline character used in the code editor and its output |
Disabled | Prevents editing, values are a boolean |
Required | Makes input to the component mandatory, values are a boolean |
Validation | Custom rule that must evaluate to a boolean |
Settable Properties
Property Via Form / Via RunJS | Type | Example Value |
---|---|---|
Current Value / value | string ,null | "const count = 3;" |
Reference Properties
Properties can be accessed from other frontend components and backend APIs by adding the name of the Code Editor component, and dot referencing the property. For a Code Editor named CodeEditor1
:
Property | Description |
---|---|
CodeEditor1.parsedValue | Access the parsed value of the code block as an array in the Code Editor |
CodeEditor1.stringValue | Access the string value of the code block in the Code Editor |
CodeEditor1.isValid | Validates the code block, returns a boolean |
Events
The following events are triggered by user interactions with Code Editor components. Use event handlers to trigger actions in response to user events.
Property | Description |
---|---|
onChange | Triggers an action when the code block is changed |
Example Usage:
Use Code Editor to Visualize Data
You can leverage the Code Editor component combined with a Chart component in order to have an interactive tool to visualize your data. In the Chart component, set the Chart Data to {{CodeEditor1.parsedValue}}
and you'll be able to visualize the data as seen below:
Sample data in JSON
[
{
"city": "Toronto",
"population": 2930000,
"country": "Canada"
},
{
"city": "New York",
"population": 8419000,
"country": "USA"
},
{
"city": "Vancouver",
"population": 675218,
"country": "Canada"
},
{
"city": "San Francisco",
"population": 874961,
"country": "USA"
}
]
Displaying HTML Templates
You can leverage the Code Editor in combination with an iFrame Component to validate, edit, and display HTML code. Be sure to set the Source Doc parameter to the parsedValue
of your Code Editor.
Displaying read only structured data
By setting a code editor to read only mode, you're able to view code, for example config files, and validate JSON.
Use custom validation rules
Use the .test()
method to evaluate an expression to detect the validity of a user's code. For example, the following regex pattern could be used to ensure that a markdown image is properly formatted (It is assumed that the Language Property of the Code Editor is set to Markdown
):
{{/(\!)(\[(?:.*)?\])(\(.*(\.(jpg|png|gif|tiff|bmp))(?:(\s\"|\')(\w|\W|\d)+(\"|\'))?))/gm.test(CodeEditor1.stringValue)}}