1

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

Picklist Variable Resource to pick up the input from the Lightning Component

Choice Resource to be used in the Screen Component within the Picklist or Radio Button components

Screen component example with Picklist and Radio Button components

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.

Final result for the Flow Screen

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

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.

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.

| improve this answer | |
  • 1
    Thank you for your answer! Nonetheless I still wonder if a simpler solution exists, e.g. by passing a list to the flow and looping through it somehow in the flow to build a Choice resource and display it in the screen. I'll try something like this before accepting your answer. – ARWarrior Feb 23 at 16:25
  • I am definitely opting for your approach, and trying to implement point 3), becuase my Picklist values are dynamically calculated in the component which then calls the Flow. To be honest, I am struggling to implement point b). Is the goal to store the selected picklist value in the design attribute, to retrieve it later in the Flow? If this is the case I am currently unable to configure the assignment – ARWarrior Feb 24 at 10:34
  • In particular, I find the option 'Manually assign variables (advanced)', but I don't understand how to assign the user selected variable to the design attribute, and how to use it later in the Flow – ARWarrior Feb 24 at 10:39
  • In lightning component, add the 'value' attribute for the <lightning:select> tag, (e.g. <lightning:select label="Select value" value="{!v.selectedPicklistValue}">). Now, add the attribute (selectedPicklistValue) in the design file.Once you add any attribute in the design file, it gets available for selection in the flow. – Prakhar Saxena Feb 24 at 13:22
  • 1
    In flow, just create a text variable (e.g. selectedPicklistValue) and assign this variable for the design attribute in 'Manually assign variables (advanced)' section. The picklist value selected by the user from the lightning component will be stored in the flow variable 'selectedPicklistValue' which can be used later in the flow. – Prakhar Saxena Feb 24 at 13:24
0

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/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.