LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Tutorial
    • Avonni Components App
      • Accessing the App
      • Folders
      • Templates
      • Version management
    • Understanding The Essentials
      • Component Builder
      • Component Visibility
      • Target Page Object
      • Using Variables and Component Data
      • Publishing your Dynamic Components
      • Dynamic vs. Flow Components
    • AppExchange Listing Page
    • Installation & Licenses Management
  • Tutorials
    • Projects
    • Components
      • Calendar
        • How to Create Events Quickly by Dragging
        • How to Add an Edit Action to Calendar Events
        • How to Add a New Event Button to the Calendar Header
        • How to Customize the Right-Click Menu
        • How to Reschedule Events with Drag and Drop
      • Columns
        • Creating a Responsive 3-Column Layout
      • Data Table
        • How to customize Data Table style
        • How to make a field editable
        • How to add clickable buttons
        • How to color-code badges
        • How to export data
        • How to configure search
        • How to set columns visibility
        • How to Conditionally Color Data Table Cells
      • Kanban
        • Saving Changes on Drag-and-Drop
      • List
      • Metric
      • Record Detail
        • Saving Changes
    • Interactions
      • How to create an interaction to navigate to an object page
      • How to create an interaction to navigate to a record page
      • How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow
    • Reactive Components
      • Reactive Map and Data Table
      • Master-Detail Relationship with Data Tables
      • Vertical Tabs with Reactive Data Table
    • Style
      • How do you add space or a break between sections or fields?
    • Tips and Tricks
      • Using the Dynamic Component component
  • Component Builder
    • Overview
    • Configuring Components
      • Properties
      • Fields
      • Style
    • Data & Interactions
      • Data Sources
        • Manual
        • Picklist
      • Resources
        • Constant
        • Formula
        • Nested Queries
        • Query
        • Variable
      • Interactions
        • CRUD from Record Variable
        • Download
        • Execute Flow
        • Navigate
        • On Load
        • Open Alert Modal
        • Open Confirm
        • Open Dynamic Component Dialog
        • Open Dynamic Component Panel
        • Open Flow Panel
        • Open Flow Dialog
        • Show Toast
    • Advanced Features
      • Copy and Paste
      • Debug Panel
      • Keyboard Shortcut
      • Undo / Redo
  • Components
    • Explore All Components
    • Accordion
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Badge
    • Barcode
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Button Stateful
    • Calendar
    • Camera 🆕
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Button
    • Chip Container
    • Color Picker
    • Columns
    • Combobox
    • Container
    • Counter
    • Data LWC Container
    • Data Table
    • Date Picker
    • Date
    • Date Range
    • Dual Listbox
    • Dynamic Component
    • File Upload
    • Flow
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Icon
    • Icon Picker
    • Illustration
    • Image
    • Input Color
    • Input Date
    • Input Pen (Signature)
    • Input Text
    • Kanban
    • List
    • LWC Container
    • Map
    • Media Object
    • Metric
    • PDF Viewer
    • Pivot Table
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Rating
    • Record Detail
    • Relationship Graph
    • Scope Notification
    • Section
    • Separator
    • Slider
    • Status
    • Tabbed Container
    • Tabs
    • Text
    • Text Area
    • Timeline
    • Toggle
    • Tree
    • Vertical Visual Picker
    • Video Player
    • Visual Picker
    • Visual Picker Link
  • Help
    • Contact Support
    • Security
    • Performance Guide
    • Deployment Process
    • Release Notes
    • Report Bugs
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Setting Up Your Dual Listbox
  • 1. Configure the Data Source
  • 2. Configure Data Mappings (for Variable and Query Sources)
  • 3. Change the Properties
  • 4. Add Interactions

Was this helpful?

  1. Components

Dual Listbox

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

Last updated 3 months ago

Was this helpful?

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:

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.

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.