viaSocket Help

Dropdown

A Dropdown lets users select one or more options.

Single Select and Multi Select

#

Common Use-cases

  • Selection Lists: Spreadsheets, file paths, or category picking.

  • Status Tracking: Workflow states (e.g., Open, In Progress, Closed).

  • Team Assignments: Assigning tasks to specific departments (e.g., Marketing, Sales).

Add field Choose Single select or Multi Select → Configure options type Static or Dynamic

#

Output Format

Key

Description

label

Human readable short text for each item

value

Actual value you will use in the code

sample(Optional)

Example preview value shown during configuration or testing

extraValue (Optional, Single Select only)

Stores additional metadata for the option that can be used later for custom logic, mappings, or processing

#

Option Type

Static

Use this when the dropdown values are fixed and rarely change.

Configure the values inside the Options block in the GUI. The corresponding JSON configuration uses options as the key and the output must be in the given array format.

// Example JSON
{
  "key": "status",
  "label": "Status",
  "type": "dropdown",
  "options": [
    { "label": "Open", "value": "open", "sample": "open" },
    { "label": "Closed", "value": "closed", "sample": "closed" }
  ]
}

Dynamic

Use this when values should be fetched from an API.

Configure the API logic inside the OptionsGenerator block in the GUI. The corresponding JSON configuration uses optionsGenerator as the key and should return the output in the same given format.

// Example JSON
{
  "key": "team",
  "label": "Team",
  "type": "dropdown",
  "optionsGenerator": "return [{label: 'Marketing', value: 'mkt', sample: 'mkt'}]"
}

Available Properties: key, label, placeholder and required.

Additionally, help, defaultValue, visibilityCondition can be configured.

#

Example API Response

[
  {
    "id": "123",
    "name": "Marketing Team"
  },
  {
    "id": "456",
    "name": "Sales Team"
  }
]

Mapping for this should be like,

label → name

value → id

sample → id (Optional)

Note: Dropdowns can also be used for Boolean fields by setting the field type to boolean, which automatically provides True and False options.

#

Additional optional features

Search via API

Enable when the API supports searching.

Click on Enable Searching for Dynamic Dropdown Button after that enable the enableSearchApi.


Pagination

Enable when the API returns paginated results.

Click on Enable Pagination for Dynamic Dropdown Button after that enable the canPaginate.

#

UI Customizations for dynamic/manual input

Key

Description

customInputLabel

A secondary label providing specific instructions or context for manual data entry.

customHelp

Help text or guidelines displayed inside the info (i) icon tooltip.

customPlaceholder

Placeholder text shown inside the manual input field.