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 users to choose a single option from a menu. The items in the drop-down menu can be either grouped or displayed individually. The grouping of menu items can be handled with the options array attribute. Below is a list of the attributes used for the single select drop-down field. All mandatory fields are marked with an asterisk *, and the maximum character limits for each field are also provided, along with their data types.
| Attribute Name | Data Type & Limit | 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. Maximum number of elements - 100
Syntax: { 鈸� 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. |
Developer defined dropdown without grouping
Syntax :
{
"type": "select",
"name": "",
"label": "",
"hint": "",
"placeholder": "",
"mandatory": true, //default value is set as true
"value": "",
"options": [
{
"label": "",
"value": "",
"thumbnail":"",
"description":""
}
]
}Code Sample :
// Single select without grouping
inputs = list();
inputs.add({
"type": "select",
"name": "teammem",
"label": "Select User",
"hint": "Choose a user to add to your team",
"placeholder": "Search or select a user",
"mandatory": true,
"value": "olivia",
"options": [
{
"label": "Scott Fisher",
"value": "scott",
"thumbnail": "/sites/zweb/images/cliq/commands/man_shallow.webp",
"description": "Project lead with 5+ years in software development"
},
{
"label": "Li Ju ng",
"value": "li",
"thumbnail": "/sites/zweb/images/cliq/commands/smiling_woman.webp",
"description": "UX designer with a passion for user-first interfaces"
},
{
"label": "Olivia Palmer",
"value": "olivia",
"thumbnail": "/sites/zweb/images/cliq/commands/woman_white_shirt.webp",
"description": "Team coordinator managing internal and client comms"
}
]
});
form = {
"type": "form",
"title": "Add Team Member",
"hint": "Assign a user to your team for collaboration",
"name": "notifier",
"version": 1,
"button_label": "Add User",
"action": {
"type": "invoke.function",
"name": "adduser"
},
"inputs": inputs
};
return form;
Developer defined dropdown with grouping
Syntax:
{
"type": "select",
"name": "",
"label": "",
"hint": "",
"placeholder": "",
"mandatory": true,
"value": "",
"options": [
{
"label": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
},
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
}
]
},
{
"label": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
},
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
}
]
}
]
}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:
// Single select with grouping
inputs = list();
inputs.add({
"type": "select",
"name": "team",
"label": "Select Team",
"hint": "Choose the team the user belongs to",
"placeholder": "Select a team from the list",
"mandatory": true,
"value": "devops",
"options": [
{
"label": "Zylcal",
"options": [
{
"label": "Zylcal Dev-ops",
"value": "devops",
"description": "Handles deployment, infrastructure, and CI/CD pipelines"
},
{
"label": "Zylcal QA",
"value": "qa",
"description": "Responsible for testing, quality checks, and bug tracking"
},
{
"label": "Zylcal Marketing",
"value": "marketing",
"description": "Drives branding, campaigns, and user engagement for Zylcal"
}
]
},
{
"label": "Zyltrix",
"options": [
{
"label": "Finance",
"value": "finance",
"description": "Manages budgets, invoices, and financial reports"
},
{
"label": "Accounts",
"value": "accounts",
"description": "Handles billing, audits, and transaction records"
},
{
"label": "HR",
"value": "hr",
"description": "Oversees recruitment, policies, and employee welfare"
}
]
}
]
});
form = {
"type": "form",
"title": "Assign Team",
"hint": "Assign the selected user to a specific team",
"name": "notifier",
"version": 1,
"button_label": "Assign",
"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. Maximum number of elements - 100
Syntax: { 鈸� 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. |
Developer defined dropdown multiple select without grouping
Syntax:
{
"type": "select",
"max_selections":"",
"multiple":true
"name": "",
"label": "",
"hint": "",
"placeholder": "",
"mandatory": true, //default value is set as true
"value": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
}
]
}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:
//Multi select without grouping
inputs = list();
inputs.add({
"type": "select",
"name": "clients",
"label": "Select Clients",
"hint": "Choose clients associated with the project",
"placeholder": "Select clients",
"multiple": true,
"max_selections": "3",
"mandatory": false,
"options": [
{
"label": "Daniel Rivera",
"value": "daniel",
"thumbnail": "/sites/zweb/images/cliq/commands/man_shallow.webp"
},
{
"label": "Emma Watson",
"value": "emma",
"thumbnail": "/sites/zweb/images/cliq/commands/smiling_woman.webp"
},
{
"label": "Liam Brooks",
"value": "liam",
"thumbnail": "/sites/zweb/images/cliq/commands/woman_white_shirt.webp"
},
{
"label": "Robin Sawyer",
"value": "robin",
"thumbnail": "/sites/zweb/images/cliq/commands/greytshirtuser.png"
}
]
});
form = {
"type": "form",
"title": "Add Users & Clients",
"hint": "Assign team members and link relevant clients",
"name": "notifier",
"version": 1,
"button_label": "Submit",
"action": {
"type": "invoke.function",
"name": "adduser"
},
"inputs": inputs
};
return form;
Developer defined dropdown multiple select with grouping
Syntax:
{
"type": "select",
"max_selections":"",
"multiple":true,
"name": "",
"label": "",
"hint": "",
"placeholder": "",
"mandatory": true,
"value": "",
"options": [
{
"label": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
},
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
}
]
},
{
"label": "",
"options": [
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
},
{
"label": "",
"value": "",
"thumbnail": "",
"description":""
}
]
}
]
}Code Sample:
//Multi select with grouping
inputs = list();
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":"/sites/zweb/images/cliq/finance_illustrations.png"
},
{
"label":"Zylcal QA",
"value":"qa",
"thumbnail":"/sites/zweb/images/cliq/finance_illustrations.png"
},
{
"label":"Zylcal Marketing",
"value":"marketing",
"thumbnail":"/sites/zweb/images/cliq/icons/qa_marketing_image.png"
}
}
},
{
"label":"Zyltrix",
"options":{
{
"label":"Finance",
"value":"finance",
"thumbnail":"/sites/zweb/images/cliq/finance_illustrations.png"
},
{
"label":"Accounts",
"value":"accounts",
"thumbnail":"/sites/zweb/images/cliq/icons/accounts_illustrations.jpg"
},
{
"label":"HR",
"value":"hr",
"thumbnail":"/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;
