+ Start a Discussion
Siva SakthiSiva Sakthi 

How to display dependent child records in lightning component

Hi,

I am new to lightning development. I have diaplay the parent records hard coded in drop down based on the select its show the child.But how to achive this with out hard coded, Parent and child records in two different component while click the parent record to diaply the associated child records in single component render based (Like Tree fromat).  Eg:   Department is Parent -> HR, Sales,Marketing   , Employee is Child -->John,William,Mac etc 

How to passing the Id 's between component ,parent and child records . Guide me to solve this. 

My Controller: 
---------------------------
public with sharing class CourseController {     
    @AuraEnabled
    public static List<Employee__c > getAllEmployees() {
        List<Employee__c > emps= [SELECT Id, Name FROM Employee__c ];        
        return emps;
    }    
    @AuraEnabled
    public static List<Employee__c > getEmployee(String deptName) {        
        List<Employee__c >  emp= [SELECT Id, Name,department__r.Name FROM Employee__c WHERE department__r.Name = : deptName];
        return emp;
    }    
}

Component 1 :Department.cmp  
---------------------------------------------------
<aura:component implements="force:appHostable" controller="DeptController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="emp" type="Employee__c[]"/>
        <ui:inputSelect aura:id="selection" change="{!c.select}">    
            <ui:inputSelectOption text="All Employee" label="All Employee"/>
            <ui:inputSelectOption text="HR" label="HR"/>
            <ui:inputSelectOption text="Sales" label="Sales"/>
            <ui:inputSelectOption text="Marketing" label="Marketing"/>            
        </ui:inputSelect>    
        <aura:iteration var="e" items="{!v.emp}">
            <c:EmployeeList emp="{!e}"/>
        </aura:iteration>     
</aura:component>

Component 1 -  Client Side Controller
----------------------------------
({
    doInit : function(component, event, helper) {       
        helper.getAllEmployees(component);
    },    
    select : function(component, event, helper){    
        var selectcomponent = event.getSource();
        var selectVal = selectcomponent.get("v.value"); 
        if (selectVal != "All Employees"){    
            var action = component.get("e.getEmployee");
            action.setParams({
                "deptName":selectVal
            });            
            action.setCallback(this, function(response){    
                var state = response.getState();    
                if (component.isValid() && state === "SUCCESS") {    
                    component.set("v.emp", response.getReturnValue());
                }
                else {                    
                    alert('No Records Found');
                }      
            });    
            $A.enqueueAction(action);    
        }    
        else {            
            helper.getAllEmployees(component);
        }
     }
})

Component 1 - Helper.js
--------------
({
    getAllEmployees: function(cmp) {
        var action = cmp.get("e.getAllEmployees");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (cmp.isValid() && state === "SUCCESS") {
                cmp.set("v.emp", response.getReturnValue());
            }
            var toastEvent = $A.get("e.force:showToast");
            if(toastEvent){
               if (state === 'SUCCESS'){
                toastEvent.setParams({
                    "title": "Success!","message": " your records successfully loaded ."
                });
            }
            else {
                toastEvent.setParams({
                        "title": "Error!","message": " Something has gone wrong."
                });
            }  
            toastEvent.fire(); 
            }            
        });
         $A.enqueueAction(action);
    }
})

Component 2 :
---------------------
<aura:component>
        <aura:attribute name="emp" type="Employee__c"/>      
        <div class="{!v.value == 'All Employee'? 'row primary' : 'row '}" >    
            <div onclick="{!c.gotoRecord}">    
                <force:recordView recordId="{!v.emp.Id}" type="MINI"/>    
            </div>            
        </div> 
</aura:component>

Advance Thanks
Sivasakthi







 
ProlayProlay
Check these two links-

https://gist.github.com/martyychang/af8aa7705da69d23598e
http://salesforce.stackexchange.com/questions/96632/are-dependent-picklists-supported-in-lightning-components
Siva SakthiSiva Sakthi
Thanks for your reply.
 
{!Piyush_soni__c}{!Piyush_soni__c}
Here is the code for dependent pick list fields in lightning component
http://www.sfdcmonkey.com/2017/02/18/dependent-picklist-fields-lightning-component/
Hopes it's helps you
thanks