How do I create a picklist of option in the design attribute of my lightning flow component

Question

I want to have a picklist of options in the config settings of my lightning flow component. Then I can read the chosen option and execute different code depending on flow component settings at flow screen design time.

It shows the variable but not as a picklist of options. If I try to change the components (cmp) attribute type from type="string" to type="string[]" as I've seen in some posts, I get the following error. "Only String attributes may have a datasource in the design file."

Compoment .cmp

<aura:component implements="lightning:availableForFlowScreens" access="global">
    <aura:attribute name="lbl" type="String" default="No Label"/>
    <aura:attribute name="pList" type="String" access="global"/>
    <aura:attribute name="selOpt" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div>
        {!v.lbl}<br/>
        Chosen Design Option: {!v.selOpt}
    </div>
</aura:component>

Design File .design

<design:component label="Flow Component Test">
    <design:attribute name="lbl" label="Label"/>
    <design:attribute name="pList" datasource="Option 1,Option 2,Option 3"/>
</design:component> 

Controller .js

({
    doInit : function(component, event, helper) {
        var selOpt = component.get('v.pList');
        component.set('v.selOpt',selOpt);
    }
})

Answer 1

<aura:attribute name="pList" type="string" access="global"/>

Should be:

<aura:attribute name="pList" type="String" access="global"/>

Aura is case sensitive, so you must make sure that you are using the correct casing for attribute types (e.g. Boolean instead of boolean, or Object rather than object).