Create Dynamic Picklists for Your Custom Components (design:component)

Hi,


We can expose a component property as a picklist when the component is configured in the Lightning App Builder. The picklist’s values are provided by an Apex class that you create.

For example, let’s say you’re creating a component for the Home page to display an object records. You can use an Apex class to put the object Names of your Salesforce org in a picklist in the component’s properties in the Lightning App Builder. Then, when admins add the component to a Home page, they can easily select the appropriate object to display records on the page.

Usually we use <design:component/> to set default values for a component while adding it in App Builder. When we want to provide picklist to hold all objects for selection while adding we have to follow the things below.

• Create a custom Apex class to use as a datasource for the picklist. The Apex class must extend the VisualEditor.DynamicPickList abstract class.
• Add an attribute to your design file that specifies your custom Apex class as the datasource.

Apex Class

global class MyCustomPickList extends VisualEditor.DynamicPickList{

    

    global override VisualEditor.DataRow getDefaultValue(){

        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('account', 'Account');

        return defaultValue;

    }

    global override VisualEditor.DynamicPickListRows getValues() {        

        VisualEditor.DynamicPickListRows  picklistRowsList = new VisualEditor.DynamicPickListRows();

        List<VisualEditor.DataRow> dataRowsList = new List<VisualEditor.DataRow>();

        for(Schema.SObjectType sobjectTypeName:schema.getGlobalDescribe().values()){

            VisualEditor.DataRow rowObj = new VisualEditor.DataRow(sobjectTypeName.getDescribe().getLabel(), sobjectTypeName.getDescribe().getName());

            dataRowsList.add(rowObj);

           

        }

         picklistRowsList.addAllRows(dataRowsList);      

       

        return picklistRowsList;

    }

}

Add the Apex Class to Your Design File

To specify an Apex class as a datasource in an existing component, add the datasource

<design:component>
        <design:attribute name="sobjectName" datasource="apex://MyCustomPickList"/>
</design:component>

Dynamic Picklist Considerations

Specifying the Apex datasource as public isn’t respected in managed packages. If an Apex class is public and part of a managed package, it can be used as a datasource for custom components in the subscriber org.
Profile access on the Apex class isn’t respected when the Apex class is used as a datasource. If an admin’s profile doesn’t have access to the Apex class but does have access to the custom component, the admin sees values provided by the Apex class on the component in the Lightning App Builder.







References:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_dynamic_picklists.htm#components_config_for_app_builder_dynamic_picklists