Imagine you’re tasked with developing a Lightning component that exhibits records for a specific object. The selection of this object is facilitated through a dynamically generated picklist when the component is integrated into the Lightning page via the App Builder.
Create DesignComponentExample.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" controller="DesignQueryUtils" access="global" > <aura:attribute name="objectName" type="String" default=""/> <aura:attribute name="title" type="String" default=""/> <aura:attribute name="description" type="String" default=""/> <aura:attribute name="recordsList" type="Object" /> <aura:attribute name="columns" type="list" /> <aura:handler name="init" value="{!this}" action="{!c.loadRecords}"/> <!-- Data Table here--> <div style="height:300px"> <b>{!v.title}</b> <lightning:datatable keyField="id" data="{! v.recordsList }" columns="{! v.columns }" hideCheckboxColumn="true"/> <div> {!v.description} </div> </div> </aura:component>
Generate DesignComponentExampleController.js.
({ loadRecords : function(component, event, helper) { component.set('v.columns', [ {label: 'Name', fieldName: 'Name', type: 'text'}, ]); var objName=component.get('v.objectName'); console.log(objName); var action=component.get("c.retrieveDetails"); action.setParams({ "sObjectName":objName }); action.setCallback(this,function(response){ var records = response.getReturnValue(); console.log(records); component.set("v.recordsList",records); }); $A.enqueueAction(action); } })
Develop DesignQueryUtils.apxc.
public class DesignQueryUtils { //To fetch records dynamically @AuraEnabled public static List<sObject> retrieveDetails(String sObjectName){ List<sObject> sObjectList = new List<sObject>(); String query ='SELECT Id,Name FROM '+ sObjectName +' LIMIT 10'; system.debug('query'+query); sObjectList = Database.query(query); return sObjectList; } }
Generate CustomDynamicPicklist.apxc.
global class CustomDynamicPicklist extends VisualEditor.DynamicPickList{ // dynamic picklist creator global override VisualEditor.DataRow getDefaultValue(){ VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('account', 'Account'); return defaultValue; } global override VisualEditor.DynamicPickListRows getValues() { VisualEditor.DynamicPickListRows pickList = 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); } pickList.addAllRows(dataRowsList); return pickList; } }
Finally, within the design resource, we incorporate the Apex class.
Generate the DesignComponentExample.design design resource.
<design:component> <design:attribute name="title" label="Enter title here"/> <design:attribute name="description" label="Enter description here"/> <design:attribute name="objectName" label="specify object name" datasource="apex://CustomDynamicPickList"/> </design:component>
The output looks like :
![](https://sfdcian.com/wp-content/uploads/2024/03/image-31.png)
Dynamic picklist