Dual Listbox
Used to move options between two lists and is often referred to as a multi-select.
Overview
The Dual Listbox component allows users to select multiple items from two lists. It is typically made up of two lists of items, each with a set of options from which the user can choose. Users can select items from either list by clicking on them and moving items between them using arrow buttons or drag-and-drop functionality.
The Dual Listbox component may also include filtering and searching options, allowing users to find specific items within the lists quickly. It may also include formatting options for the displayed items, such as font size and color.
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. It includes 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. |
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 will happen when users select an option. You can find a list of interactions 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
