Dual Listbox

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

Configuring the Dual Listbox

Configuring the Data Source

Configuring the Data Source is key to effectively utilizing the Avonni Dual Listbox Component. The Data Source is where you define the content of your dual listbox. There are three main types of data sources: Manual, Variable, Picklist, and Query.

Data Source Type	Description	When to Use
Manual	Involves manually entering data for Dual Listbox values. Useful for static content or predefined items.	Ideal for content that doesn't change frequently or for quick setup with specific items.
Variable	Links the Dual Listbox values to variable collections in Salesforce.	Suitable when Dual Listbox values needs to reflect changing data from Salesforce records.
Picklist	Displaying a list of options defined in a Salesforce picklist.	Best for presenting a list of predefined options for selection.
Query	Enables fetching data through a query, pulling various records/data points from Salesforce.	Ideal for complex data retrieval or when sourcing. Using a 'Get Records' collection is not necessary with this method, as the query itself is powerful enough to simplify your flow.

Configuring the Data Mappings

Proper data mapping is essential when using a variable data source with the Avonni Dual Listbox. This process involves matching Salesforce fields from the 'Get Records' collections to the corresponding attributes in the Dual Listbox. Doing so ensures that the data retrieved from Salesforce is accurately displayed and organized within the listbox, facilitating effective and precise data selection.

Changing the Properties

Choosing a variant

If you want to add a label to your dual listbox, you can change to variant to access multiple settings.

Setting a size

Width of the source options listbox and the selected options listbox. Valid values include small, medium, and large

Adding a search engine

If present, a search box is added to the first listbox to search options. It is helpful if you are displaying a lot of options.

Make options draggable

If present, the options are draggable between the left and right lists.

Adding Interactions

Interactions define what happens when users select an option. A list of interactions is available here.

Styling the Dual Listbox

From the Styles panel, you can customize styling for the Dual Listbox: Margin, Header, Option, Boxes Label and Boxes.

You can find the instructions for styling here.

Tutorials

Display contacts with custom icons

Accounts list group by industry