Dual Listbox
Used to move options between two lists and is often referred to as a multi-select.
What the Dual Listbox Component Does
The Dual Listbox component lets users pick multiple items from two separate lists. Imagine it like two boxes side-by-side, each filled with options. Users can choose items from either box and move them between them using arrows or dragging and dropping.
The Dual Listbox is useful for tasks like assigning items to categories, selecting members for a team, or managing any situation where users need to choose from two sets of options.
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 |
|---|---|---|
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. | |
Links the Dual Listbox values to variable collections in Salesforce. | Suitable when Dual Listbox values needs to reflect changing data from Salesforce records. | |
Displaying a list of options defined in a Salesforce picklist. | Best for presenting a list of predefined options for selection. | |
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
Last updated
