Configurable inputs

Introduction

Configurable inputs are elements that can be associated with the repository, activity, or content element entity in order to store additional data about the entity. They are extensible and can be installed as a plugin.

Common configuration properties

• type - input type, the id of the element being used to collect the data
• key - property name that will be used to store input data, should be in camelCase
• label

const example = {
  type: 'INPUT',
  key: 'exampleInput',
  label: 'Example input'
};

Validation

....

Pre-installed core inputs:

1. Standard input
2. Text Area
3. Select
4. Checkbox
5. Switch
6. Date picker
7. File upload
8. HTML input
9. Color picker

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