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 component being used to collect the data
• key - Property name that will be used to store input data, should be in camelCase
• label - Display label

const exampleInput = {
  type: 'TEXTAREA',
  key: 'example',
  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
10. Combobox

1. Input

Code example

const testInput = {
  key: 'inputKey',
  type: 'INPUT',
  label: 'Input field',
  placeholder: 'Click to add...',
  validate: {
    rules: {
      required: false,
      max: 250
    }
  }
}

Preview

2. Text Area

Code example

const textAreaExample = {
  key: 'textareaKey',
  type: 'TEXTAREA',
  label: 'Description',
  placeholder: 'Click to add...',
  validate: {
    rules: {
      required: false,
      max: 250,
      min: 5
    } 
  }
}

Preview

3. Select

To enable multiselect change the multiple prop to true.

Code example

const selectExample = {
  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

4. Checkbox

Code example

const checkboxExample = {
  key: 'checkboxKey',
  type: 'CHECKBOX',
  label: 'Generic checkbox label',
  description: 'Description for a checkbox'
}

Preview

5. Switch

Code example

const switchExample = {
  key: 'switchKey',
  type: 'SWITCH',
  label: 'Generic switch label',
  description: 'Description for a switch'
}

Preview

6. Date Picker

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

Code example

const datePickerExample = {
  key: 'datePicker',
  type: 'DATETIME',
  label: 'date picker',
  hideTime: false
}

Preview

7. File upload

Code example

const fileUploadExample = {
  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

8. HTML with Quill editor

Code example

const HTMLQuillExample = {
  key: 'html',
  type: 'HTML',
  label: 'html with quill'
}

Preview

9. Color picker

Code example

const colorPickerExample = {
  key: 'colorKey',
  type: 'COLOR',
  label: 'Pick a color'
}

Preview

10. Combobox

Supported configuration properties are placeholder, label, multiple, chips

Code example

const comboboxExample = {
  key: 'comboboxKey',
  type: 'COMBOBOX',
  label: 'Select From List Or Add New',
  options: [{
    label: 'selection 1',
    value: 5
  }, {
    label: 'selection 2',
    value: 10
  }, {
    label: 'selection 3',
    value: 15
  }]
}

Preview