Dropdown Options

Dropdown input fields can be ce configured using a JSON object. 

Defining the behavior. These are the flags to define the behavior

• placeholder: 'select item', // text to show if no option is selected
• maxItems: 1, // maxItems which can be selected
• create: false, // set to true if user should be able to type new values 
• sort: true, // true sort options,

There are two possibility to define the options of a dropdown, either

A) in the field definition (note: this is better if setting should never be changed). To do this, set the fields

• • options: [], // options in dropdown [{"id":..., "label": ...}] each item in the drop down can have a group assigned "group" (see second example)
  • groups: [], // optional a list of groups to sort options into blocks

B) in a project setting (note: this is better if settings should should be easily changeable). To do this,

• • make up a variable name of the form "dd_myvalues" (note: use dd_ as a prefix, no spaces or special characters for the rest)
  • create a project setting starting with "dd_myvalues" . In this setting put the same definition of drop down values as described just above
  • in the field's definition, instead of describing the "options", and "groups" directly, add a reference "optionSetting":"dd_myvalues"

Example for options in field definition

{
  "options": [
    { "id": "R1", "label": "1" },
    { "id": "R2", "label": "2" },
    { "id": "R3", "label": "3" },
    { "id": "R4", "label": "4" },
    { "id": "R5", "label": "5" },
    { "id": "R6", "label": "6" },
    { "id": "R7", "label": "7" },
    { "id": "R8", "label": "8" },
    { "id": "R9", "label": "9" },
    { "id": "R10", "label": "10" }
  ]
}

Example for options in project setting

{
  "placeholder": "select number of parts", 
  "maxItems": 100, 
  "optionSetting": "dd_options"
}

{ 
  "name":"additional label to show in admin client to distinguish more easily different dropdowns",
  "groups": [
    { "value": "group1", "label": "Group 1" },
    { "value": "group2", "label": "Group 2" }
  ],
  "options": [
    { "class": "group1", "id": "opt1", "label": "Option 1.1" },
    { "class": "group1", "id": "opt2", "label": "Option 1.2" },
    { "class": "group2", "id": "opt3", "label": "Option 1.3" }
  ]
}