# Dual Listbox

## **Setting Up Your Dual Listbox**

### **1. Configure the Data Source**

The first step is deciding where your listbox pulls its options from. This is key because it determines how static or dynamic your listbox will be—and how much work it can do for you. 

Here are your choices:

<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>Manual</strong></td><td>Enter data directly into the component configuration.</td><td></td></tr><tr><td><strong>Variable</strong></td><td>This is useful for data that changes based on user interactions or other component logic.</td><td></td></tr><tr><td><strong>Query</strong></td><td>This is the most common option for displaying Salesforce records.</td><td></td></tr><tr><td><strong>Picklist</strong></td><td>Retrieve data dynamically from a standard or custom picklist field within Salesforce.</td><td><a href="/pages/NMTcHeq9UuKYUmBedI8t">/pages/NMTcHeq9UuKYUmBedI8t</a></td></tr></tbody></table>

**Why It Matters**: Choosing the right source makes your listbox fit your use case. A static list is simple; a dynamic one adapts. Pick what suits your users and workflow best.

### **2. Configure Data Mappings (for Variable and Query Sources)**

When you use a Variable or Query data source with a component like a Dual Listbox, you need to *map* fields from your data source to the component's display attributes. Think of data mapping as telling the component *which* pieces of information to show and *where* to show them.

**How It Works (Contact Example):**

Let's say you've used an Avonni Query Data Source to retrieve a list of `Contact` records. Each Contact record has many fields (FirstName, LastName, Email, Phone, etc.). You need to tell the Dual Listbox *which* fields to use for its display.

* **Label:** This is the main text displayed for each item in the listbox. You'd typically map this to a field that provides a clear and concise identifier for the record. For a Contact, a good choice is often a *combination* of `FirstName` and `LastName`.
* **Description/Subtitle:** You can use a formula to combine multiple value and display them

<figure><img src="/files/W25I9yCLUsTvq3S8Rjsp" alt=""><figcaption></figcaption></figure>

### **3. Change the Properties**

Now, tweak the Dual Listbox’s properties to match your style and needs. These settings control how it looks and behaves—because a good user experience is half the battle.

* **Variant:** The variant setting primarily controls whether the dual listbox has a label. You can also access additional styling options within the variant settings.
* **Size:** You can adjust the width of the dual listbox to fit your layout. Choose from small, medium, or large size options to control how much horizontal space the component occupies.
* **Search Engine:** If you have many options in your dual listbox, enabling the search engine can improve the user experience. This adds a search box above the source listbox, allowing users to quickly filter and find the options they're looking for.
* **Draggable Options:** By default, users can move items between the source and selected lists by clicking the buttons between the listboxes. If you enable the "Draggable Options" setting, users can drag and drop items directly between the lists.

**Why It Matters**: These tweaks make the listbox feel polished and user-friendly. A clunky tool frustrates people; a tailored one keeps them happy and productive

### **4. Add Interactions**

Interactions allow you to define *what happens* when users interact with your Dual Listbox component – specifically, when selecting or deselecting options. Interactions transform a static list into a dynamic and functional part of your application.

#### **What Can You Do with Interactions?**

When a user makes a selection in the Dual Listbox, you can trigger a variety of actions, including:

* **Update Data:** Modify Salesforce records based on the selected options. *Best Practice:* Launch a Flow that handles the update logic using the "[Open Flow Dialog](/dynamic-components/component-builder/interactions/flow-builder-integration/open-flow-dialog.md)" interaction. This is more robust and scalable, especially for multi-select scenarios.
* [**Navigate**](/dynamic-components/component-builder/interactions/navigation-and-notifications/navigate.md)**:** Send the user to a different page (record detail, list view, external URL) based on their selection. *Example:* Selecting a Contact in the Dual Listbox could navigate to that Contact's record page.
* [**Show Messages**](/dynamic-components/component-builder/interactions/navigation-and-notifications/show-toast.md)**:** Display a toast message or open a modal dialog to provide feedback, warnings, or confirmations. *Example:* After updating records, show a toast message saying "Records updated successfully."

#### **How to Add Interactions**

1. **Select the Dual Listbox:** Click on the Dual Listbox component in the Component Builder canvas.
2. **Go to the Interactions Panel:** Find the "Interactions" panel (or the "Interactions" section within the Properties Panel).
3. **Add a New Interaction:** Add a new interaction for the relevant event (likely "On Change" for a Dual Listbox – this fires whenever the selection changes).
4. **Choose an Action Type:** Select the action you want to perform (Navigate, Open Flow Dialog, Show Toast, etc.).
5. **Configure the Action:** Provide the necessary settings for the chosen action (e.g., the Flow API name, the navigation target, the message text). This often involves referencing the *selected values* from the Dual Listbox.


---

# 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.avonnicomponents.com/dynamic-components/components/dual-listbox.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.