Skip to content

1.3. Configuring activity metadata

abasic edited this page Mar 5, 2020 · 1 revision

Introduction

Code needs to be added in .activities-rc.json file, inside of the OUTLINE_LEVELS meta arrays. Metadata will be displayed in the activity sidebar:

Sidebar

1. Input

Code example

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

Preview

Input

2. Text Area

Code example

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

Preview

Text area

3. Checkbox

Code example

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

Preview

Checkbox

4. Switch

Code example

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

Preview

Switch

5. Color picker

Code example

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

Preview

Color picker

6. Select

Code example

meta: [{
    "key": "selectKey",
    "type": "SELECT",
    "label": "Select From List"
    "options": [{
      "label": "selection 1",
      "value": 5
    }, {
      "label": "selection 2",
      "value": 10
    }, {
      "label": "selection 3",
      "value": 15
    }]
}]

Preview

Select

7. Multiselect

Code example

meta: [{
  "key": "multiselectKey",
  "type": "MULTISELECT",
  "label": "Objective",
  "placeholder": "Select From List",
  "options": [{
    "label": "Option 1",
    "value": 1
  }, {
    "label": "Option 2",
    "value": 2
  }, {
    "label": "Option 3",
    "value": 3
  }]
}]

Preview

Multiselect

8. Date Picker

Code example

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

Preview

Date picker

9. HTML with Quill editor

Code example

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

Preview

HTML Quill

10. 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

File upload