# Action Dropdown

A dropdown that runs custom logic when the user picks an option. Each selection can read or set session variables, change page state, or trigger downstream blocks. Think of it as a switch — the user's choice controls what the rest of the page does.

## Available in

* Page modules
* Order Form modules
* Catalog modules
* Dashboard modules
* Modal modules

Action Dropdown isn't available in Reports or Navigation modules.

## When to use

* Switching between sub-views on a single page (e.g. *Recent / This week / This month* on a report).
* Letting a cashier pick an order type (*Sale / Return / Quote*) that drives downstream form behaviour.
* Filtering a Catalog Display by a session variable the user controls.
* Anywhere the user's choice should change page state without navigating away.

## Settings

| Setting       | Description                                                                                                                                         |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Configure** | Opens the configuration modal. All Action Dropdown options live here — label, placeholder, default value, options list, JS code, variant, and size. |

The configuration modal supports:

* **Label** — text shown above the dropdown.
* **Placeholder** — hint text shown when no option is selected.
* **Default value** — option pre-selected when the page loads.
* **Options Mode** — *Static* (you list the options) or *Script* (a small JavaScript snippet returns the options at render time).
* **Options** — when Mode is Static: the list of `{ label, value }` pairs.
* **Options Script** — when Mode is Script: a snippet that returns the options array, useful for options that depend on session variables, the signed-in user, or other dynamic state.
* **JS Code** — JavaScript that runs on selection. Has access to:
  * `setVariable(name, value)` — write a session variable.
  * `getVariable(name)` — read a session variable.
  * `variables` — object of all current session variables.
* **Variant / size** — visual styling.

## How it works

When the user picks an option:

1. The selection is captured.
2. The configured **JS Code** runs with the selected value available in scope.
3. Side effects (set variables, update state) propagate to other blocks on the page that read those variables.

{% hint style="info" %}
Action Dropdown is the right block when the user's choice should drive other blocks on the page. If the user just needs to navigate, use **Action Button** with action type *Navigate* instead.
{% endhint %}

## Examples

**Date-range switcher.** Place an Action Dropdown above a Report Widget with options *Today / This week / This month*. The JS code calls `setVariable('reportRange', value)`. The Report Widget filters its query by the `reportRange` variable.

**Order type picker.** On an order form, a *Transaction Type* dropdown with *Sales Order / Cash Sale / Estimate*. The JS code sets a session variable that other blocks (Submit Button, Summary) read to adjust their behaviour.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Action Button</strong></td><td>Single-action button with the same kind of configuration modal.</td><td><a href="/pages/eJnsvUn6cKd9Lt95bP9b">/pages/eJnsvUn6cKd9Lt95bP9b</a></td></tr><tr><td><strong>Module Variables</strong></td><td>How session variables work and where to read/set them.</td><td><a href="/pages/S9QlmvCWJ8AOsDrFpQtz">/pages/S9QlmvCWJ8AOsDrFpQtz</a></td></tr><tr><td><strong>Variables</strong></td><td>Initialise variables on page load (no UI control needed).</td><td><a href="/pages/2ToYy14LbRDeVch9XRjC">/pages/2ToYy14LbRDeVch9XRjC</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/action-components/action-dropdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.