Configurable inputs

Introduction

Configurable inputs are meta elements that can be added to activity, teaching element and repository. Core meta elements are listed below, but custom meta element may be added as an extension.

1. Input

Code example

meta: [{
    "key": "inputKey",
    "type": "INPUT",
    "label": "Input field",
    "placeholder": "Click to add...",
    "validate": {
        "rules": {
            "required": false,
            "max": 250
        }
    }
}]

Preview

2. Text Area

Code example

meta: [{
    "key": "textareaKey",
    "type": "TEXTAREA",
    "label": "Description",
    "placeholder": "Click to add...",
    "validate": {
        "rules": {
            "required": false,
            "max": 250,
            "min": 5
        } 
    }
}]

Preview

3. Checkbox

Code example

meta: [{
    "key": "checkboxKey",
    "type": "CHECKBOX",
    "label": "Generic checkbox label",
    "description": "Description for a checkbox"
}]

Preview

4. Switch

Code example

meta: [{
    "key": "switchKey",
    "type": "SWITCH",
    "label": "Generic switch label",
    "description": "Description for a switch"
}]

Preview

5. Color picker

Code example

meta: [{
    "key": "colorKey",
    "type": "COLOR",
    "label": "Pick a color"
}]

Preview

6. Select

To enable multiselect change the multiple prop to true.

Code example

meta: [{
    "key": "selectKey",
    "type": "SELECT",
    "label": "Select From List",
    "multiple": false,
    "options": [{
      "label": "selection 1",
      "value": 5
    }, {
      "label": "selection 2",
      "value": 10
    }, {
      "label": "selection 3",
      "value": 15
    }, 
    {
      "label": "Advocate",
      "value": 20,
      "img": "https://s3.amazonaws.com/gol-badges/advocate.svg"
    }, 
    {
      "label": "Ally",
      "value": 25,
      "img": "https://s3.amazonaws.com/gol-badges/ally.svg"
    }, 
    {
      "label": "Coach",
      "value": 30,
      "img": "https://s3.amazonaws.com/gol-badges/coach.svg"
    },
    {
      "label": "Leveling Up",
      "value": 35,
      "img": "https://s3.amazonaws.com/gol-badges/leveling_up.svg"
    }]
}]

Preview

7. Date Picker

Note: to disable time picker, change hideTime prop to false

Code example

meta: [{
    "key": "datePicker",
    "type": "DATETIME",
    "label": "date picker",
    "hideTime": false
}]

Preview

8. HTML with Quill editor

Code example

meta: [{
    "key": "html",
    "type": "HTML",
    "label": "html with quill"
}]

Preview

9. File upload

Code example

meta: [{
    "key": "file",
    "type": "FILE",
    "label": "File Upload",
    "placeholder": "Click to add...",
    "validate": {
        "rules": {
            "ext": [
                "pdf",
                "xlsx",
                "mp3",
                "ogg",
                "wma",
                "rar",
                "tar.gz",
                "7z",
                "zip",
                "jpg",
                "jpeg",
                "png",
                "xml",
                "tar"
            ]
        }
    }
}]

Preview