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

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"
  }
]

Properties

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