Creating Lightning Components Dynamically

Through this blog, I will share the approach to create lightning components dynamically by sharing an example in which we will display account summary information by creating summary component dynamically.

I have already posted one blog through which we can create ui:button dynamically and can destroy it. Please refer below URL if you want to refer that before continuing with this blog:

creating or destroying buttons dynamically

Below is snapshot of app which will display recent accounts on left side and on right side, it will display opportunities and case summary for account. You can click on "show Info" link before any account record and its related information will appear on right side dynamically.

Code to create dynamic component

You can use $A.createComponent method which accepts 3 parameters:

1. ComponentName (String) :Type of component to create like "c:newCmp" etc.
2. attributes : JSON specify component attributes values
3. callback function: Once the component is created, this callback function will be invoked.This function can be used to append newly created component to target component. You can place the newly created component inside some div to display.

Below is sample code along with comments to explain steps:

 //find the div markup where you want to display dynamic component

//here "dynamicCmpSection" is aura:id of div

var targetCmp = component.find("dynamicCmpSection");

//create JSON specify all attributes needed for new component

var cmpAttributes = {

                "attribute1": "attribute Value",

"attribute1": "attribute Value"

            }

$A.createComponent(

"c:Demo_DynamicViewCmp", 

cmpAttributes,

function(tempbody) {

//Check if component is valid

if (component.isValid()) {

var targetCmp = component.find("dynamicCmpSection");

//first remove all content inside the div by making its body as null

targetCmp.set("v.body",[]);

var body = targetCmp.get("v.body");

//add newly created component in div

body.push(tempbody);

targetCmp.set("v.body", body);

console.log('***component loaded successfully');

}

}

);

Below is complete code related to snapshot shown in blog.

	<aura:component controller="Demo_CreateDynamicCmpController">
	<aura:attribute name="ltngAccList" type="List"/>
	<aura:attribute name="menu" type="List" default="View,Edit"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<div class="slds-grid slds-wrap">
	<div class="slds-col slds-size_1-of-1 slds-small-size_1-of-2 slds-medium-size_2-of-4">
	<lightning:card footer="@sunil02kumar" title="Recient Accounts">
	<aura:set attribute="actions">
	<!-- Add action if required-->
	</aura:set>
	<p class="slds-p-horizontal_small">
	<!--display all accounts-->
	<table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">
	<thead>
	<tr class="slds-text-title--caps">
	<th scope="col">Actions</th>
	<th scope="col">Name</th>
	<th scope="col">Industry</th>
	<th scope="col">Type</th>
	</tr>
	</thead>
	<tbody>
	<aura:iteration items="{!v.ltngAccList}" var="item">
	<tr class="slds-hint-parent">
	<td scope="row" class="slds-cell-wrap">
	<a href=""> <ui:outputText value="show Info"
	click="{!c.showSummerizedinfo}" class="{!item.Id}" /></a>
	</td>
	<td scope="row" class="slds-cell-wrap"> {!item.Name}</td>
	<td scope="row" class="slds-cell-wrap"> {!item.Industry}</td>
	<td scope="row" class="slds-cell-wrap"> {!item.Type}</td>
	</tr>
	</aura:iteration>
	</tbody>
	</table>
	</p>
	</lightning:card>
	</div>
	<div aura:id="dynamicCmpSection" class="slds-col slds-size_1-of-1 slds-small-size_1-of-2 slds-medium-size_2-of-4">
	<!--section to display summerized information-->
	</div>
	</div>
	</aura:component>

view raw Demo_CreateDynamicCmp.cmp hosted with ❤ by GitHub

	<aura:application extends="force:slds">
	<c:Demo_CreateDynamicCmp/>
	</aura:application>

view raw Demo_CreateDynamicCmpApp.app hosted with ❤ by GitHub

	public class Demo_CreateDynamicCmpController {
	@AuraEnabled
	public static List<Account> findAccounts(){
	List<Account> AccList=new List<Account>();
	AccList=[select id, Name, Industry, Type from Account order by Lastmodifieddate DESC Limit 10];
	return AccList;
	}
	@AuraEnabled
	public static List<summerizedInfowrapper> findSummerizedInfo(string accid){
	List<summerizedInfowrapper> returList= new List<summerizedInfowrapper>();
	//summerize opportunity data
	summerizedInfowrapper opportunitywrapper = new summerizedInfowrapper();
	List<string> columns= new List<string>{'Stage','Amount'};
	opportunitywrapper.colLabels=columns;
	opportunitywrapper.title='Opportunities Grouped by Stage';
	string queryStringOppy ='SELECT StageName, SUM(Amount) FROM Opportunity where AccountId=:accid ';
	queryStringOppy = queryStringOppy + ' GROUP BY StageName';
	AggregateResult[] groupedResults = database.query(queryStringOppy);
	List<dataWrapper> dataList= new List<dataWrapper>();
	integer count =0;
	for (AggregateResult ar : groupedResults)
	{
	dataWrapper data1=new dataWrapper();
	string categorylabel = string.valueof(ar.get('StageName'));
	data1.columnValue = categorylabel;
	decimal amount = (decimal)ar.get('expr0');
	data1.dataValue = string.valueof(amount);
	dataList.add(data1);
	}
	opportunitywrapper.summerizedData=dataList;
	returList.add(opportunitywrapper);
	system.debug('**** opportunity returList:'+returList);
	//summerized case data
	summerizedInfowrapper caseWrapper = new summerizedInfowrapper();
	List<string> caseColumns= new List<string>{'Case status','No.of Cases'};
	caseWrapper.colLabels=caseColumns;
	caseWrapper.title='Cases Grouped by Status';
	string CaseQueryString = 'SELECT COUNT(Id), Status FROM Case where accountId = :accid';
	CaseQueryString = CaseQueryString + ' GROUP BY Status';
	AggregateResult[] groupedResults1 = database.query(CaseQueryString);
	List<dataWrapper> caseDataList= new List<dataWrapper>();
	for (AggregateResult ar : groupedResults1)
	{
	dataWrapper caseData=new dataWrapper();
	caseData.columnValue = string.valueof(ar.get('Status'));
	caseData.datavalue = string.valueof(ar.get('expr0'));
	caseDataList.add(caseData);
	}
	caseWrapper.summerizedData=caseDataList;
	returList.add(caseWrapper);
	system.debug('****case returList:'+returList);
	return returList;
	}
	public class summerizedInfowrapper{
	@AuraEnabled
	public string title;
	@AuraEnabled
	public list<dataWrapper> summerizedData;
	@AuraEnabled
	public List<string> colLabels;
	public summerizedInfowrapper(){
	summerizedData= new list<dataWrapper>();
	colLabels=new List<string>();
	}
	}
	public class dataWrapper{
	@AuraEnabled
	public string columnValue;
	@AuraEnabled
	public string dataValue;
	}
	}

view raw Demo_CreateDynamicCmpController.apxc hosted with ❤ by GitHub

	({
	doInit : function(component, event, helper) {
	console.log('doinit gets called in Demo_CreateDynamicCmp');
	var params = {};
	helper.callToServer(
	component,
	"c.findAccounts",
	function(response)
	{
	console.log('apex response :'+JSON.stringify(response));
	component.set("v.ltngAccList",response);
	//code to create dynamic component using helper function
	var selectedId = response[0].id;
	var cmpAttributes = {
	ltngAccId: selectedId
	}
	//creating component dynamically using helper function
	helper.createDynamicCmp(
	component,
	"dynamicCmpSection",
	"c:Demo_DynamicViewCmp",
	cmpAttributes
	);
	},
	params
	);
	},
	showSummerizedinfo : function(component, event, helper) {
	var selectedId = event.getSource().get('v.class');
	if (selectedId) {
	var cmpAttributes = {
	ltngAccId: selectedId
	}
	var targetCmp = component.find("dynamicCmpSection");
	console.log('****calling createDynamicCmp in Demo_CreateDynamicCmp helper');
	$A.createComponent(
	"c:Demo_DynamicViewCmp",
	cmpAttributes,
	function(tempbody) {
	//Add the dynamic cmp to div
	if (component.isValid()) {
	var targetCmp = component.find("dynamicCmpSection");
	targetCmp.set("v.body",[]);
	var body = targetCmp.get("v.body");
	body.push(tempbody);
	targetCmp.set("v.body", body);
	console.log('***component loaded successfully');
	}
	}
	);
	}
	}
	})

view raw Demo_CreateDynamicCmpController.js hosted with ❤ by GitHub

	({
	callToServer : function(component, method, callback, params) {
	console.log('Calling helper callToServer function to get data');
	var action = component.get(method);
	if(params){
	action.setParams(params);
	}
	console.log('****param to controller:'+JSON.stringify(params));
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (state === "SUCCESS") {
	callback.call(this,response.getReturnValue());
	}else if(state === "ERROR"){
	var errors = response.getError();
	console.error(errors);
	alert('Problem with connection. Please try after sometime or contact your system administrator.');
	}
	});
	$A.enqueueAction(action);
	},
	createDynamicCmp : function(component, divSection, componentName, params){
	var targetCmp = component.find(divSection);
	console.log('****calling createDynamicCmp in Demo_CreateDynamicCmp helper');
	$A.createComponent(
	componentName,
	params,
	function(dynSecDiv) {
	//Add the dynamic cmp to div
	if (component.isValid()) {
	var targetCmp = component.find(divSection);
	targetCmp.set("v.body",[]);
	var body = targetCmp.get("v.body");
	body.push(dynSecDiv);
	targetCmp.set("v.body", body);
	console.log('****'+componentName+' component loaded successfully');
	}
	}
	);
	}
	})

view raw Demo_CreateDynamicCmpHelper.js hosted with ❤ by GitHub

	<aura:component controller="Demo_CreateDynamicCmpController">
	<aura:attribute name="ltngSummerizedInfo" type="Object"/>
	<aura:attribute name="ltngAccId" type="string"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<div class="slds-text-heading_large">Displaying Account related information for Opportunity and Cases by creating below component dynamically</div>
	<aura:iteration items="{!v.ltngSummerizedInfo}" var="item">
	<div class="slds-card slds-grid slds-wrap" style="padding:20px;">
	<div class="slds-col slds-size_1-of-1" >
	{!item.title}
	<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_striped">
	<thead>
	<tr class="slds-text-title_caps">
	<aura:iteration items="{!item.colLabels}" var="labels">
	<th scope="col">
	<div class="slds-truncate" title="{!labels}">
	{!labels}
	</div>
	</th>
	</aura:iteration>
	</tr>
	</thead>
	<tbody>
	<aura:iteration items="{!item.summerizedData}" var="rec">
	<tr>
	<th scope="row" >
	<div class="slds-truncate" title="{!rec.columnValue}" >
	{!rec.columnValue}
	</div>
	</th>
	<td data-label="{!rec.dataValue}">
	{!rec.dataValue}
	</td>
	</tr>
	</aura:iteration>
	</tbody>
	</table>
	</div>
	</div>
	</aura:iteration>
	</aura:component>

view raw Demo_DynamicViewCmp.cmp hosted with ❤ by GitHub

	({
	doInit : function(component, event, helper) {
	console.log('***ltngAccId:'+ component.get("v.ltngAccId"));
	var params ={"accid":component.get("v.ltngAccId")};
	helper.callToServer(
	component,
	"c.findSummerizedInfo",
	function(response)
	{
	console.log('apex response :'+JSON.stringify(response));
	component.set("v.ltngSummerizedInfo",response);
	},
	params
	);
	}
	})

view raw Demo_DynamicViewCmpController.js hosted with ❤ by GitHub

	({
	callToServer : function(component, method, callback, params) {
	console.log('Calling helper callToServer function to get data');
	var action = component.get(method);
	if(params){
	action.setParams(params);
	}
	console.log('****param to controller:'+JSON.stringify(params));
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (state === "SUCCESS") {
	callback.call(this,response.getReturnValue());
	}else if(state === "ERROR"){
	var errors = response.getError();
	console.error(errors);
	alert('Problem with connection. Please try after sometime or contact your system administrator.');
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw Demo_DynamicViewCmpHelper.js hosted with ❤ by GitHub

Hope this Helps!!