Multiselect Picklist in Flow using Dual Listbox : SFDC Blogger

Multiselect Picklist in Flow using Dual Listbox

Hi!

In this article, I’m gonna share something very cool Implementation
Multiselect Picklist in Flow using Dual List box with the help of LWC Component.

For Example If We have Requirement like We have to build Multiselect Picklist like Standard Multiselect picklist field. We are aware about If we create any field with Multiselect picklist on any Standard or Custom Object UI of Multiselect picklist in layout is look like this.

But in Salesforce/Lightning Flows If We create Multiselect picklist input component so UI look like this.

In Salesforce/Lightning Flows Multiselect picklist Input Component UI is not same like Standard Multiselect picklist. In this Article I am going to Implement the lightning-dual-listbox in LWC Component and that LWC Component We can use in our in Flow if we required UI like Standard Multiselect picklist. I try to Implement this LWC Component in generalize way to achieve the reusability concept.

Use Case: For Demo to Implement the Use Case I have one Country Custom Object. So Business Team going to store Country Name, Country Currency, Country Language, Country Currency Code. In Flow We have to show the Country List in Multiselect picklist format like Standard UI in layouts. So for this Requirement I created Schema Look like this.

What is Dual List box?
A pair of list boxes that enables multiple options to be selected and reordered.

In this article I am going to use lightning-dual-listbox using LWC. A lightning-dual-listbox component represents two side-by-side listboxes. Select one or more options in the list on the left. Move selected options to the list on the right. The order of the selected options is maintained and you can reorder options.

Let's See the Implementation

Implemented all code for this Blog attached the Git Repository Link So you can refer the code. Please the below Video for complete implementation. To achieve this functionality i created Lightning Flows. Final Output After Implementing this Code Look Like this in Flow.