Code Editor
An interactive text box to edit and test code.
Use the Code Editor to allow users to validate JSON or interact with code, such as Ruby.
- Guide
- Properties
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"
}
]
Code Editor Component Properties
Code Editor Property | Description |
---|---|
Label | Sets a label text for the code editor |
Language | Select from HJSON (human readable), JSON (strict), or Ruby HTML Template (ERB) |
Default Value | Values to be shown in the code editor component by default |
Line Wrapping | Whether code editor should scroll or wrap for long lines, values are a boolean |
Visible | Controls the visibility of the component, values are a boolean |
Read only | Prevents editing, values are a boolean |
Code Editor Event Handler
Property | Description |
---|---|
onChange | Triggers an action when the code block is changed |
Code Editor Reference Properties for Components and APIs
Properties can be accessed by adding the name of the Code Editor component, and dot referencing the property. For a Code Editor named CodeEditor1
:
{{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}} // Validate the code block and return true or false accordingly