Custom fields controls for CSV files

The script editor's CSV editor allows you to easily work with CSV files. In CSV all data are considered to be text, hence the default is to show all fields as text fields (as in most spreadsheet apps). It does however support custom controllers for editing the data in a more structured way using for example number input fields, checkboxes, date selectors and select boxes.

Column properties

• element is used to control the element type (default is "text")
• width is used to control the width of the element, in px or % (default is auto)

The syntax to configure these fields follows the HTML specification, and there is support for two different types of input elements: input and select.

Each field type supports different attributes to customize the behavior such validation and default values.

Input

The input element mimics the HTML <input> field, we support the attributes listed below. To create a input field use the following syntax:

• type used to set the field type such as text, checkbox, number and date. The default is text.

Attributes for text (and other)

• value is used to control the default value
• placeholder is the placeholder value to show if empty
• pattern is the pattern the input should match (if not empty)
• required is used to control if data must be inserted
• readonly is used to control if the field is editable
• minlength is used to control the min length of a field
• maxlength is used to control the max length of a field

Attributes for checkbox

• checked is used to control the default value (default false)
• data-true the value to represent a checked checkbox (default is "true")
• data-false the value to represent a unchecked checkbox (default is "false")

Attributes for number

• min is used to control the lowest number
• max is used to control the highest number
• step is used to control the step

An example checkbox and date selector

{
  "columns": {
    "Birthday": {
      "element": "input",
      "attributes": {
        "type": "date",
        "required": true
      }
    },
    "Cake": {
      "width": "100px",
      "element": "input",
      "attributes": {
        "type": "checkbox",
        "checked": true
      }
    }
  }
}

Select

The select element mimics the HTML <select> element. The select element should consist of a element type and options

{
  "columns": {
    "Fruit": {
      "element": "select",
      "options": [
        {
          "text": "I like bananas",
          "attributes": {
            "value": "banana"
          }
        },
        {
          "text": "I like oranges",
          "attributes": {
            "value": "orange",
            "selected": true
          }
        }
      ]
    }
  }
}

The text is the value to for the <option> (which is also the value if no attribute.value is given).