Creating Lightning Component Dynamically

Demo_CreateDynamicCmp.cmp

<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>

Demo_CreateDynamicCmpApp.app

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

Demo_CreateDynamicCmpController.apxc

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;
    }
}

Demo_CreateDynamicCmpController.js

({
    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');
                    }
                }
            );
        }
    }
})

Demo_CreateDynamicCmpHelper.js

({
	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');
                }
            }
        );
    }
})

Demo_DynamicViewCmp.cmp

<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>

Demo_DynamicViewCmpController.js

({
	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
        );	
	}
})

Demo_DynamicViewCmpHelper.js

({
	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);
    }
})