MultiSelectDropDown¶

MultiSelectDropDown element represents a control that provides a menu of options with possibility of choosing more than one option from list.

multi-select-drop-down

Options¶

selectOptions¶

array List with options. Every object on the list must have "label" and "key".

JSON

{
  "options": {
    "selectOptions" : [
      { "key" : "option_1", "label" : "Option 1" },
      { "key" : "option_2", "label" : "Option 2" },
      { "key" : "option_3", "label" : "Option 3" }
    ]
  }
}

selectOptions.key¶

string Represents value in option.

selectOptions.label¶

string Represents label for option.

isWithSearch¶

int Optional parameter. Accepted values: 0 and 1. When 1 given, in select will show input to search option on the list.

Build-in Validators¶

Element validates if given values are located on your selectOptions list.

Available Validators¶

Element does not have available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "multiSelectDropDown",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : array,
  "<element_options>" : {
    "<element_option_isWithSearch>" : int,
    "<element_option_selectOptions>" : [
      {"<selectOptions_key>": string, "<selectOptions_label>": string},
      {"<selectOptions_key>": string, "<selectOptions_label>": string}
    ]
  }
}

example

{
  "type" : "multiSelectDropDown",
  "name" : "branch",
  "label" : "Branch",
  "defaultValue" : ["books_and_multimedia", "delicatessen"],
  "options": {
    "isWithSearch" : 1,
    "selectOptions" : [
      { "key" : "books_and_multimedia", "label" : "Books and multimedia" },
      { "key" : "clothes", "label" : "Clothes" },
      { "key" : "computers", "label" : "Computers" },
      { "key" : "delicatessen", "label" : "Delicatessen" }
    ]
  }
}

Element value¶

usage in module TWIG

{% if moduleConfig.branch %}
   <ul>
        {% for branch in moduleConfig.branch %}
            <li>{{ branch }}</li>
        {% endfor %}
   </ul>
{% endif %}

html output

<ul>
    <li>books_and_multimedia</li>
    <li>delicatessen</li>
</ul>