Dual Listbox

The Dual Listbox provides two side-by-side lists, allowing users to select and transfer multiple items between them using interactive controls.

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:

Manual

Enter data directly into the component configuration.

Variable

This is useful for data that changes based on user interactions or other component logic.

Query

This is the most common option for displaying Salesforce records.

Picklist

Retrieve data dynamically from a standard or custom picklist field within Salesforce.

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

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" interaction. This is more robust and scalable, especially for multi-select scenarios.

• Navigate: 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: 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.