Dynamic Picklist as Design Attribute for App Builder

by

In this implementation, we will see how can we use Dynamic Picklist as Design Attribute for App Builder. We can use design resources to control which attributes are exposed to various tools like the Lightning App Builder, Experience Builder, or Flow Builder. 

Using design resources, we can make aura component attribute available for admins to edit in tools such as App Builder. To do this, just add design:attribute node in the design resource.

For example, the below line of code in the design resource will show the text field with the label Enter Name while adding the component on the page using App Builder.

<design:attribute name="strName" label="Enter Name" description="Your Name" />

Note: There should be aura:attribute with the same name as design:attribute in the lightning component.

We can also show the Picklist to select a value from a predefined list. To do that, Add datasource attribute in the above line and provide values separated with comma (,) like below.

<design:attribute name="strName" label="Select Name" description="Your Name" datasource="Niks,WeirdCoder,MysticBaba,RedDevil" />

Note: The limitation with datasource is that it can only have predefined String values.

Steps to Implement

In order to show Dynamic Picklist as Design Attribute, follow below steps:

  1. Create a custom class that extends VisualEditor.DynamicPickList class.
  2. Implement getDefaultValue() and getValues() abstract methods.
  3. getDefaultValue() will return an instance of VisualEditor.DataRow class to define the default value. We have to pass the name and label for the default value in a constructor.
  4. getValues() will return an instance of VisualEditor.DynamicPickListRows. Create an instance of VisualEditor.DynamicPickListRows. Create multiple instances of VisualEditor.DataRow for the picklist values and add each instance to the instance of VisualEditor.DynamicPickListRows using addRow(objValue).
  5. In a design resource, for the value of datasource, put apex://className. className should be the name of the custom class that extends VisualEditor.DynamicPickList.

Code

DesignPicklistAttribute.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    
    <!-- To store name-->
    <aura:attribute name="strName" type="String" default=""/>
    
    <!-- To show list of Sobjects-->
    <aura:attribute name="strSobjectName" type="String" default="Account"/>
</aura:component>

DesignPicklistAttribute.design

<design:component>
    <design:attribute name="strName" label="Enter Name" description="Your Name" />
    
    <!-- datasource contains the apex class name that will return the list of Sobjects-->
	<design:attribute name="strSobjectName" label="Select Sobject" description="Name of the Sobject" 
                      datasource="apex://ListSObjects"/>
</design:component>

ListSObjects.apxc

global class ListSObjects extends VisualEditor.DynamicPickList{    
    
    // Return the default value for Picklist.
    global override VisualEditor.DataRow getDefaultValue(){
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('Account', 'Account');
        return defaultValue;
    }
    
    // To return the list of Sobjects.
    global override VisualEditor.DynamicPickListRows getValues() {
        List<Schema.SObjectType> lstObjectSchema = Schema.getGlobalDescribe().Values();
        VisualEditor.DataRow objListValue;
        VisualEditor.DynamicPickListRows  lstSObjects = new VisualEditor.DynamicPickListRows();
        for(SObjectType objSobject : lstObjectSchema){
            objListValue = new VisualEditor.DataRow(objSobject.getDescribe().getName(), objSobject.getDescribe().getName());
        	lstSObjects.addRow(objListValue);
        }
        return lstSObjects;
    }
}

Also Read:

Dynamic Picklist as Design Attribute

This is how it will look in App Builder:

Dynamic Picklist as Design Attribute in App Builder
Dynamic Picklist as Design Attribute in App Builder

If you don’t want to miss a new implementation, please Subscribe here.

Related implementation suggested for you:

See you in the next implementation, Thank you!

Leave a Comment