Drop-down Menu: Developer Defined
The drop-down menu is a clear method of showing a list of data, allowing users to pick their choice from the list. This field can be categorized into two types based on the choice of selection types offered.
Single select drop-down
The single select drop-down field allows the user to choose a single option from the drop-down menu. The drop-down menu items can either be grouped or listed individually. Grouping of menu items can be handled in the options array attribute. Below given are the list of attributes passed for the single select drop-down field. All mandatory fields are indicated with a * and the maximum characters allowed for each field is given along with the Data Type.
| Attribute Name | Data Type | Description |
| type* | string Value should be select | The type of input field. For drop-down menu type must be select |
placeholder*
| string (100) | Sample field value displayed to the user that describes the expected value of the input field. |
| name* | string (50) | A unique identifier for the field. On form submission, the value defined for this key will be available in the function associated with the form. Note: Allowed characters are alphabets (lowercase and uppercase), numbers, underscore (_) and hyphen (-). a-z, A-Z, 0-9, _, - |
| hint | string (100) | Provides a brief description of the field's purpose and the expected input. |
| label* | string (50) | The field's display name. |
| mandatory | boolean | Defines if the field's requisite is mandatory or not. Default value considered is true |
| options* | array | An array of JSON objects following the structure label and value. This attribute will be considered only when the data source is list. Max no of elements - 100 { ⓘ Note: |
| value | string | Provide a default input for the field by giving the value of any drop-down list item. Note: The value provided must match the value fields of any drop-down menu item. |
Syntax
Drop-down menu field without grouping
{
"type": "select",
"name": "",
"label": "",
"hint": "",
"placeholder": "",
"mandatory": true, //default value is set as true
"value": "",
"options": [
{
"label": "",
"value": "",
"thumbnail":""
}
]
}
Drop-down menu field with grouping
{
"type": "select",
"name": "",
"label": "",
"hint": "",
"placeholder": "",
"mandatory": true,
"value": "",
"options": [
{
"label": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": ""
},
{
"label": "",
"value": "",
"thumbnail": ""
}
]
},
{
"label": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": ""
},
{
"label": "",
"value": "",
"thumbnail": ""
}
]
}
]
}
Quick Tip:
All input field types given here are explained with a sample code snippet. Try out these snippets by creating a slash command.
Code Sample
inputs = list();
//Single select without grouping
inputs.add({"type":"select","name":"teammem","label":"User","hint":"Add a user to your team","placeholder":"Add a user to your team","mandatory":true,"value":"olivia","options":{{"label":"Scott Fisher","value":"scott","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/commands/man_shallow.webp"},{"label":"Li Ju ng","value":"li","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/commands/smiling_woman.webp"},{"label":"Olivia Palmer","value":"olivia","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/commands/woman_white_shirt.webp"}}});
//Single select with grouping
inputs.add({"type":"select","name":"team","label":"Team","hint":"Select a team","placeholder":"Choose your team from the menu","mandatory":true,"value":"devops","options":{{"label":"Zylcal","options":{{"label":"Zylcal Dev-ops","value":"devops"},{"label":"Zylcal QA","value":"qa"},{"label":"Zylcal Marketing","value":"marketing"}}},{"label":"Zyltrix","options":{{"label":" Finance","value":"finance"},{"label":"Accounts","value":"accounts"},{"label":"HR","value":"hr"}}}}});
form = {"type":"form","title":"Add user","hint":"Add a user to your team","name":"notifier","version":1,"button_label":"Add","action":{"type":"invoke.function","name":"adduser"},"inputs":inputs};
return form;
Multi select drop-down
The multi select drop-down field allows users to choose multiple items from the menu list. The maximum number of items that can be selected is defined using the max_selections attribute. Below given are the list of attributes passed for the multi select drop-down field.
Note: Multi select drop-downs can also be listed with or without grouping!
| Attribute Name | Data Type | Description |
| type* | string Value should be select | The type of input field. For drop-down menu type must be select |
| placeholder* | string (100) | Sample field value displayed to the user that describes the expected value of the input field. |
| name* | string (50) | A unique identifier for the field. On form submission, the value defined for this key will be available in the function associated with the form. Note: Allowed characters are alphabets (lowercase and uppercase), numbers, underscore (_) and hyphen (-). a-z, A-Z, 0-9, _, - |
| hint | string (100) | Provides a brief description of the field's purpose and the expected input. |
| label* | string (50) | The field's display name. |
| mandatory | boolean | Defines if the field's requisite is mandatory or not. Default value considered is true |
| options* | array | An array of JSON objects following the structure label and value. This attribute will be considered only when the data source is list. Max no of elements - 100 { ⓘ Note: |
| value | string | Provide a default input for the field by giving the value of any drop-down list item. Note: The value provided must match the value fields of any drop-down menu item. |
| multiple* | boolean | For all multi select fields, multiple should be set as true |
| max_selections | integer Maximum selections: 10 | Defines the number of options that a user can choose from the drop-down. Note: Value for this field defaults to 1 in case of single select drop-downs. |
Syntax
{
"type": "select",
"max_selections":"",
"multiple":true
"name": "",
"label": "",
"hint": "",
"placeholder": "",
"mandatory": true, //default value is set as true
"value": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": ""
}
]
}
Quick Tip:
All input field types given here are explained with a sample code snippet. Try out these snippets by creating a slash command.
Code Sample
inputs = list();
//Multi select without grouping
inputs.add({"type":"select","max_selections":"4","multiple":true,"name":"teammem","label":"User","hint":"Add a user","placeholder":"Add a user","mandatory":true,"value":"olivia","options":{{"label":"Scott Fisher","value":"scott"},{"label":"Li Ju ng","value":"li"},{"label":"Olivia Palmer","value":"olivia"}}});
//Multi select with grouping
inputs.add({"type":"select","max_selections":"4","multiple":true,"name":"team","label":"Team","hint":"Select a team","placeholder":"Choose your team from the menu","mandatory":true,"value":"devops","options":{{"label":"Zylcal","options":{{"label":"Zylcal Dev-ops","value":"devops","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/finance_illustrations.png"},{"label":"Zylcal QA","value":"qa","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/finance_illustrations.png"},{"label":"Zylcal Marketing","value":"marketing","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/icons/qa_marketing_image.png"}}},{"label":"Zyltrix","options":{{"label":" Finance","value":"finance","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/finance_illustrations.png"},{"label":"Accounts","value":"accounts","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/icons/accounts_illustrations.jpg"},{"label":"HR","value":"hr","thumbnail":"https://www.zoho.com/sites/zweb/images/cliq/icons/hr_models_cover.webp"}}}}});
form = {"type":"form","title":"Add user","hint":"Add user to a team","name":"notifier","version":1,"button_label":"Add","action":{"type":"invoke.function","name":"adduser"},"inputs":inputs};
return form;
