Screen Flow Picklist from Lightning Component

Question

I would like to display a Picklist or Radio Button component inside a Visual Flow Screen with choices given by a List of values.

I have to pass these values to the Flow from within a Lightning Component, so I used the following JavaScript code in the helper to provide the correct input

controller code

    creaFase : function(component,event,helper){
        helper.startFlowCreaFase(component,event,component.get("v.allowedList"));
    },

helper code

    startFlowCreaFase : function(component,event,allowedFasi){
        component.set('v.isOpen',true);
        var flow=component.find('flow');
        var inputVar=[
            {
                name : "FasiDisponibili",
                type : "Picklist",
                value : allowedFasi
            }
        ];
        flow.startFlow('GOAL281_CreaFaseFatturazione',inputVar);
    },

where allowedList is declared in the .cmp as

    <aura:attribute name="allowedList" type="String[]"/>

Inside the Flow I picked up the input by means of a Picklist variable, and then I tried to assign it to a Choice Resource in order to use it in the Screen Component, as shown in the images below

The problem is that the final result is a Picklist (or Radio Button) displaying only a single choice, corresponding to the first value of the component's attribute allowedList.

I would like to know if my approach can be fixed somehow with minor changes. Unluckily I was unable to find exhaustive explanations on how to pass a Picklist to a Flow from an Aura Component, and so I am not sure on my approach to catch up the input in the Flow neither. Any help would be greatly appreciated

Answer 1

As of now, there isn't a straightforward way to pass picklist values from a Lightning component and populate it dynamically in a Flow Picklist element or a Radio button. Below are the few options you can try:

1) Check if the flow element 'Single Select Table' is present in your org. Currently, it's available in only a few managed packages (e.g. Financial Services Cloud). Values from a record collection variable can be displayed in radio buttons using Single Select Table.

2) Check if the values that are being passed from the Lightning component can be replaced by Picklist Choice Set (Displays values from any picklist field present in the org) or Record Choice Set (Displays records of an object based on some conditions).

3) If 1) and 2) are not possible, then add a Lightning component on the Flow screen. Add the interface:

implements="lightning:availableForFlowScreens"

and use <lightning:select> to display picklist values.

If the selected picklist value is to be used later in the flow, then:

a) Define a design attribute in the component for the picklist.

b) While adding the component on the screen, define a flow variable, click on 'Manually assign variables (advanced)' checkbox and assign the variable to the design attribute in 'Store Output Values to Select Variables' section.

Answer 2

You can solve this today using the Quick Choice extension

have your component export a List of Strings and you can then assign that list as one of the inputs to the quick choice component.

If you use Automatic Output Handling, you can even do this on the same screen, instantaneously. See https://unofficialsf.com/using-custom-screen-components-with-conditional-flow-screen-components-can-be-used-with-conditional-field-visibility/