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
The Dual Listbox provides two side-by-side lists, allowing users to select and transfer multiple items between them using interactive controls
Last updated
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.
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.
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.
If you want to add a label to your dual listbox, you can change to variant to access multiple settings.
Width of the source options listbox and the selected options listbox. Valid values include small, medium, and large
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.
If present, the options are draggable between the left and right lists.
Interactions define what happens when users select an option. A list of interactions is available here.
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.
.avif?alt=media&token=33729dd8-86c7-464c-83cf-44a3cd450034)
