Display a list of strings as picklist choices in Screen Flows

Hey there! In this post, let’s see how to pass a list of strings to be displayed as choices in a screen flow’s picklist component.

Here, we will try to prepare a list of strings and then, pass it to the picklist screen component, as seen in the below image (gif).

This is made possible with the help of a flow variable with Apex-Defined data type. Let’s get started!

As a bonus, I’ve created a simple Apex class that has an invocable method. The method takes a string input (that contains commas) and returns a list of strings, split by commas.

If you already have the list of strings, you can skip to this section.

Split a String into a List of Strings

Here, we’ll focus on writing an apex class that contains an invocable method. As mentioned above, the method takes in a string that has commas, and returns a list of strings that are split by commas.

Below is the code for the Apex class.

public class StringSplitter {
    public class InputWrapper {
        @InvocableVariable(required=true)
        public String inputString;
    }
    
    public class OutputWrapper {
        @InvocableVariable
        public List<String> outputList;
        public OutputWrapper(List<String> output) {
            this.outputList = output;
        }
    }
    
    @InvocableMethod(label='Split String' description='Splits a comma-delimited string into a list of strings')
    public static List<OutputWrapper> splitString(List<InputWrapper> inputList) {
        List<OutputWrapper> results = new List<OutputWrapper>();
        for (InputWrapper input : inputList) {
            List<String> splitResult = input.inputString.split(',\\s*');
            results.add(new OutputWrapper(splitResult));
        }
        return results;
    }
}

Get Text Input from the Screen Flow

In this step, I’ve created a screen flow, and added a screen to it, which will have a text input. This input will serve as the string that contains commas, which will later be split into a list of strings.

Invoking the “Split String” Apex method

After adding the screen, let’s create a flow variable to store the list of strings in the original string that is delimited by commas.

Please make sure to check the “Allow multiple values (collection)” option.

Now, let’s add an Apex action next to the screen in the flow.

The Apex action should call the Split String method.

Assign the text input that the user provides in the previous screen to the inputString parameter.

Store the outputList value in the list variable we’ve created above - listOfStrings

Check the below screenshot to ensure you are with me so far.

Now that we have our list of strings, we are ready to create our dynamic choice set.

Loop through the List of Strings

Add a Loop component after the Apex action, and set the list of strings - listOfStrings - as the Collection Variable.

Now, let’s create our custom choices. For this, we would need an Apex class which would act as our custom data type.

Create an Apex Class with the following code.

public class CustomChoice {
    @AuraEnabled public String label;
    @AuraEnabled public String value;
    
    public CustomChoice() {
        // A constructor with no arguments is required.
    }
}

Now, in order for this new apex class to reflect in our screen flow, save the flow and refresh the browser tab.

Once that is done, let’s create a new variable with data type as “Apex-defined”, and select the CustomChoice Apex class.

Now, this variable customChoice represents a single picklist choice. We need another variable to hold these custom choices. Let’s create another variable and follow the same steps as before (data type and apex class selection), but this time, let’s make this new variable as a collection by checking the “Allow multiple values (collection)” option.

Now, we are ready to enter the loop.

Assign Choices and Add to the Choice List

In the For Each branch of the loop component we added before, add an assignment component.

Assign the current item in the loop (the current string value) to the label and the value attributes of the customChoice variable.

In the same assignment component, add the customChoice variable to the customChoiceList list variable.

Now, we are ready to create our collection choice set.

Create a Collection Choice Set

Let’s create a new resource of type “Collection Choice Set”.

For the collection, choose the customChoiceList list variable.

To configure each choice, assign the label and value attributes to the Choice Label and Choice Value accordingly. Check the below screenshot to ensure you’ve got it right.

Now let’s add a screen in the “After Last” path of the Loop component.

Inside the screen, let’s add a Picklist component. Now, you’ll be able to select the collection choice set colChoice_list as the Choice under “Configure Choices” section.

Yay, it’s done! This is how the final flow looks.

Ready to go!

Now we are ready to test the flow. Click on “Save” and then click “Debug”.

Now, when you run the flow in the Debug mode, you can provide a comma-separated string as an input and when you click “Next”, the list of strings are displayed as choices in the picklist.

Now, this collection choice set can be used in several other components like radio buttons, multi-select picklists, choice lookup etc.

I’ve added those components in the below image (gif) to showcase the possibilities.

That’s it! I hope this post is helpful to you!

See ya in another one! 👋