Drop-down Menu: Developer Defined

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 NameData TypeDescription

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. 

hint

string (100)Provides a brief description of the field's purpose and the expected input.

label*

string (50)The field's display name.
mandatorybooleanDefines if the field's requisite is mandatory or not.
Default value considered is true
options*array

An array of JSON object following the structure label and value. This attribute will be considered only when the datasource is list. Max no of elements - 100
{
label : $label,    (Maximum allowed characters: 100)
value : $value   (Maximum allowed characters: 20)

(or)

options : [ { label, value } ]
}
Note: The first level of options can have another set of options.

valuestring

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": ""
    }
  ]
}

Drop-down menu field with grouping


{
  "type": "select",
  "name": "",
  "label": "",
  "hint": "",
  "placeholder": "",
  "mandatory": true,
  "value": "",
  "options": [
    {
      "label": "",
      "options": [
        {
          "label": "",
          "value": ""
        },
        {
          "label": "",
          "value": ""
        }
      ]
    },
    {
      "label": "",
      "options": [
        {
          "label": "",
          "value": ""
        },
        {
          "label": "",
          "value": ""
        }
      ]
    }
  ]
}

 

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","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"}]});
//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 user to a 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 NameData TypeDescription

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. 

hint

string (100)Provides a brief description of the field's purpose and the expected input.

label*

string (50)The field's display name.
mandatorybooleanDefines if the field's requisite is mandatory or not.
Default value considered is true
options*array

An array of JSON object following the structure label and value. This attribute will be considered only when the datasource is list. Max no of elements - 100
{
label : $label,    (Maximum allowed characters: 100)
value : $value   (Maximum allowed characters: 20)

(or)

options : [ { label, value } ]
}
Note: The first level of options can have another set of options.

valuestring

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": ""
    }
  ]
}

 

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"},{"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 user to a team","name":"notifier","version":1,"button_label":"Add","action":{"type":"invoke.function","name":"adduser"},"inputs":inputs};
return form;

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohocliq.com